@hhgtech/hhg-components 1.29.501 → 1.29.503

package/build/esm/{index-d7e91e70.js → index-677cf9e3.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-10e886ab.js';
+import './index-b061f549.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-0ff0c442.js';
+import { L as LOCALE } from './Locale-5fa7d8c0.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;
@@ -157,6 +157,18 @@ const LOCALE_SPECS = {
         ABOUT_US_IMAGE: '/fil/images/aboutus/PH.png',
     },
 };
+const COUNTRY_LIST = [
+    { countryCode: 'VN', countryName: 'Việt Nam', languageCode: 'vi' },
+    { countryCode: 'PH', countryName: 'Philippines', languageCode: 'en' },
+    { countryCode: 'TH', countryName: 'ประเทศไทย', languageCode: 'th' },
+    { countryCode: 'KH', countryName: 'កម្ពុជា', languageCode: 'km' },
+    { countryCode: 'MM', countryName: 'မြန်မာ', languageCode: 'my' },
+    { countryCode: 'TW', countryName: '台灣', languageCode: 'zh' },
+    { countryCode: 'SG', countryName: '新加坡', languageCode: 'zh' },
+    { countryCode: 'ID', countryName: 'Indonesia', languageCode: 'id' },
+    { countryCode: 'IN', countryName: 'भारत', languageCode: 'hi' },
+    { countryCode: 'MY', countryName: 'Malaysia', languageCode: 'ms' },
+];
 const STATIC_PAGES = {
     'vi-VN': {
         PRIVACY: '/privacy',
@@ -815,6 +827,7 @@ var index = /*#__PURE__*/Object.freeze({
   SSO_URL: SSO_URL,
   USER_GEOLOCATION_COORDINATES_COOKIE: USER_GEOLOCATION_COORDINATES_COOKIE,
   LOCALE_SPECS: LOCALE_SPECS,
+  COUNTRY_LIST: COUNTRY_LIST,
   STATIC_PAGES: STATIC_PAGES,
   UP_BASEPATH: UP_BASEPATH,
   LOCALE_HAS_COMMUNITY_SITE: LOCALE_HAS_COMMUNITY_SITE,
@@ -850,4 +863,4 @@ var index = /*#__PURE__*/Object.freeze({
   isProduction: isProduction
 });
 
-export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, HAS_CLINITY_DOWNLOAD_SITE as H, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_LOCALES as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, LOCALE_HAS_COMMUNITY_SITE as c, CARE_BOOKING_LOCALES as d, VIDEO_DETAIL_TEMP_STORAGE as e, CDN_ADDRESS as f, DATE_FNS_LOCALE as g, BEARER_REFRESH_TOKEN_COOKIE as h, index as i, SSO_URL as j, UP_BASEPATH as k, DATE_FNS_DATE_FORMAT as l, EMERGENCY_STATUS as m, ServicePrice as n, SERVICE_TYPE as o };
+export { API_DATE_FORMAT as A, BEARER_TOKEN_COOKIE as B, CARE_LOCALES as C, DATA_PRIVACY_LOCALES as D, ECOM_LOCALES as E, FAVICONS as F, GA_TOKEN_COOKIE as G, HAS_CLINITY_DOWNLOAD_SITE as H, ISO_FORMAT as I, LOCALE_SPECS as L, QUERY_HEALTH_TOOL as Q, STATIC_PAGES as S, USER_GEOLOCATION_COORDINATES_COOKIE as U, VIDEO_LOCALES as V, ZINDEX_SSO as Z, ZINDEX_HEADER as a, basePath as b, LOCALE_HAS_COMMUNITY_SITE as c, CARE_BOOKING_LOCALES as d, VIDEO_DETAIL_TEMP_STORAGE as e, CDN_ADDRESS as f, DATE_FNS_LOCALE as g, BEARER_REFRESH_TOKEN_COOKIE as h, index as i, SSO_URL as j, COUNTRY_LIST as k, UP_BASEPATH as l, DATE_FNS_DATE_FORMAT as m, EMERGENCY_STATUS as n, ServicePrice as o, SERVICE_TYPE as p };

package/build/esm/{index-11d191c0.js → index-6b1297f0.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-5f5af6cd.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-d7e91e70.js';
-import { N as NodeIntentType } from './index-10e886ab.js';
+import { c as cookie } from './index-b5e39103.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-677cf9e3.js';
+import { N as NodeIntentType } from './index-b061f549.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-526270bc.js → index-6b4e4591.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-0ff0c442.js';
-import { C as CommonGAssets } from './index-de7197f0.js';
+import { L as LOCALE } from './Locale-5fa7d8c0.js';
+import { C as CommonGAssets } from './index-23aa7283.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-1666f74c.js';
-import { L as LogoIcon } from './logoIcon-f3c24991.js';
-import './index-10e886ab.js';
-import { I as ImageWrap } from './index-9bce48f0.js';
+import { M as MediaQueries } from './utils-5ade66c1.js';
+import { L as LogoIcon } from './logoIcon-5436f70b.js';
+import './index-b061f549.js';
+import { I as ImageWrap } from './index-58539fd0.js';
 
 const StyledLogo = styled.div `
   position: relative;
@@ -48,6 +48,7 @@ const StyledLogo = styled.div `
     top: 50%;
     left: 0;
     transform: translateY(-50%);
+    pointer-events: none;
   }
   .common-logo-seasonal-right {
     position: absolute;

package/build/esm/{index-f421b3cb.js → index-6e76a4a4.js}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
-import { T as Text } from './index-096e6319.js';
+import { T as Text } from './index-087f90b3.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-1666f74c.js';
+import { M as MediaQueries } from './utils-5ade66c1.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-c5938667.js';
-import { R as Radio$1 } from './index-0b05de86.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-3951d926.js';
-import { T as Text$1 } from './index-e1b0a615.js';
+import { S as ShapedArrowDown } from './index-40ada81e.js';
+import { R as Radio$1 } from './index-73316752.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-0726ca1f.js';
+import { T as Text$1 } from './index-25e6e979.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-258f0325.js';
-import { C as Close } from './Close-c2c60fd5.js';
-import { u as useTranslations } from './index-dfa05053.js';
+import { H as Heading } from './index-7be5c11a.js';
+import { C as Close } from './Close-e42dfbe2.js';
+import { u as useTranslations } from './index-ffde4953.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-aeee6382.js → index-7234d6a7.js}

@@ -1,29 +1,45 @@
-import { _ as __rest } from './tslib.es6-3951d926.js';
+import { _ as __rest } from './tslib.es6-0726ca1f.js';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
 import { createStyles, rem, Box, Flex } from '@mantine/core';
-import { R as Radio } from './index-0b05de86.js';
+import { R as Radio } from './index-73316752.js';
 import '@mantine/dates';
-import './index-d7e91e70.js';
-import './index-10e886ab.js';
-import { C as CommonGAssets } from './index-de7197f0.js';
-import './index-5b8fe088.js';
-import { T as Text } from './index-096e6319.js';
-import './index-54b75124.js';
-import './index-94bafefe.js';
-import './index.styles-aec3504c.js';
-import { u as useTranslations } from './index-dfa05053.js';
+import './index-677cf9e3.js';
+import './index-b061f549.js';
+import { C as CommonGAssets } from './index-23aa7283.js';
+import './index-cf966b54.js';
+import { T as Text } from './index-087f90b3.js';
+import './index-3d3ce577.js';
+import './index-2857df98.js';
+import './index.styles-99022525.js';
+import { u as useTranslations } from './index-ffde4953.js';
 import '@mantine/hooks';
-import './utils-1666f74c.js';
-import './index-e97a9574.js';
+import './utils-5ade66c1.js';
+import './index-e8d0a800.js';
 
-var useStyles = createStyles((theme, { type }) => {
+const sizeMap = {
+    lg: {
+        height: 48,
+    },
+    md: {
+        height: 40,
+    },
+    sm: {
+        height: 32,
+    },
+    xs: {
+        height: 32,
+    },
+};
+var useStyles = createStyles((theme, { type, gap, size }) => {
     const isMarryBaby = theme.other.template === 'mb';
+    const base = sizeMap[size] || {};
+    const height = base.height;
     return {
         root: {},
-        wrapper: Object.assign({ gap: rem(8) }, (type === 'radio' && {
+        wrapper: Object.assign({ gap: rem(gap || 8) }, (type === 'radio' && {
             justifyContent: 'flex-end',
-            gap: rem(24),
+            gap: rem(gap || 24),
         })),
         groupErr: {
             fontSize: rem(14),
@@ -48,10 +64,15 @@ var useStyles = createStyles((theme, { type }) => {
         itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
             ? {
                 position: 'relative',
-                padding: `${rem(6)} ${rem(16)}`,
+                padding: `${rem(2)} ${rem(16)}`,
                 border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
+                backgroundColor: '#fff',
                 borderRadius: rem(isMarryBaby ? 16 : 4),
                 cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height,
                 '&[data-disabled="true"]': {
                     background: theme.colors.gray[1],
                     color: `${theme.colors.gray[4]} !important`,
@@ -60,7 +81,7 @@ var useStyles = createStyles((theme, { type }) => {
                     },
                 },
                 img: {
-                    height: rem(26),
+                    height: rem(size === 'lg' ? 26 : 22),
                 },
             }
             : type === 'radio'
@@ -81,15 +102,18 @@ const GenderOptionControl = (_a) => {
     var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
         male: 'male',
         female: 'female',
-    }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    }, type = 'button', hideLabel, labelTextProps, gap, size = 'md', LabelWrapper } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "gap", "size", "LabelWrapper"]);
     const { t } = useTranslations();
-    const { classes, cx, theme } = useStyles({ type }, {
+    const { classes, cx, theme } = useStyles({ type, gap, size }, {
         name: 'GenderOptionControl',
         styles,
     });
     const isMarryBaby = theme.other.template === 'mb';
     const [availableValue, setAvailableValue] = useState();
     const ref = useRef(null);
+    const labelProps = !LabelWrapper
+        ? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
+    const LabelComponent = LabelWrapper || Text;
     const genderOptions = useMemo(() => [
         {
             value: genderValue.male,
@@ -106,7 +130,7 @@ const GenderOptionControl = (_a) => {
         setAvailableValue(availableValueInit);
     }, [availableValueInit]);
     return (React__default.createElement(Box, { ref: ref, className: classes.root },
-        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(Text, { as: "label", size: "p2", weight: "semiBold", variant: "primary" }, label ||
+        React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(LabelComponent, Object.assign({}, labelProps), label ||
                 (isBaby
                     ? t('tools.selectBabyGender')
                     : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {

package/build/esm/{index-0b05de86.js → index-73316752.js}

@@ -1,24 +1,25 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-3951d926.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-0726ca1f.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-de7197f0.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-94bafefe.js';
-import { u as useScreenSize, I as ImageWrap } from './index-9bce48f0.js';
+import { C as CommonGAssets } from './index-23aa7283.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-2857df98.js';
+import { u as useScreenSize, I as ImageWrap } from './index-58539fd0.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-096e6319.js';
-import { t as themeColors } from './index-5b8fe088.js';
+import { T as Text } from './index-087f90b3.js';
+import { t as themeColors } from './index-cf966b54.js';
 import { theme } from './miscTheme.js';
+import { A as ANIMATION_DURATION } from './shared-d8013f83.js';
 import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-6294a5f6.js';
+import { a as useUniqueId } from './useUniqueId-816271bc.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-54b75124.js';
+import { B as Button } from './index-3d3ce577.js';
 
 var useStyles$4 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
@@ -322,16 +323,96 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme, { variantStyle }) => {
-    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
-    const commonStyle = {
-        fontSize: rem(15),
-        lineHeight: rem(24),
+const sizeMap = {
+    lg: {
+        height: 48,
+        fontSize: rem(16),
+        lineHeight: '24px',
+    },
+    md: {
+        height: 40,
+        fontSize: rem(14),
+        lineHeight: '22px',
+    },
+    sm: {
+        height: 32,
+        fontSize: rem(14),
+        lineHeight: '22px',
+    },
+    xs: {
+        height: 32,
+        fontSize: rem(13),
+        lineHeight: rem(20),
         letterSpacing: '-0.3px',
-        color: theme.colors.gray[4],
-    };
+    },
+};
+var useStyles$1 = createStyles((theme, { variantStyle, size, }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
+    const base = sizeMap[size] || {};
+    const leadgenPatch = isLeadgenStyle
+        ? size === 'sm'
+            ? { height: 36, fontSize: rem(13), letterSpacing: '-0.3px' }
+            : { fontSize: rem(15), letterSpacing: '-0.3px' }
+        : {};
+    // const commonStyle = {
+    //   fontSize: rem(15),
+    //   lineHeight: rem(24),
+    //   letterSpacing: '-0.3px',
+    //   color: theme.colors.gray[4],
+    // }
     return {
-        input: Object.assign({}, (isLeadgenStyle && Object.assign(Object.assign({}, commonStyle), { color: '#111111', paddingLeft: 16, paddingRight: 16, '&::placeholder': Object.assign(Object.assign({}, commonStyle), { color: theme.colors.gray[4] }) }))),
+        input: {
+            border: `1px solid ${theme.colors.gray[2]}`,
+            transition: `all ${ANIMATION_DURATION} ease-in-out`,
+            ['&:not(.mantine-Textarea-input)']: Object.assign(Object.assign({ minHeight: 'unset' }, base), leadgenPatch),
+            '&:hover': {
+                border: `1px solid ${theme.fn.primaryColor()}`,
+                // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
+            },
+            '&:focus': {
+                boxShadow: `0px 0px 0px 2px ${theme.colors[theme.primaryColor][2]}`,
+            },
+            '&[data-invalid="true"]': {
+                border: `1px solid ${theme.colors.red600}`,
+                color: '#000',
+            },
+            // ...(isLeadgenStyle && {
+            //   ...commonStyle,
+            //   color: '#111111',
+            //   paddingLeft: 16,
+            //   paddingRight: 16,
+            //   '&::placeholder': {
+            //     ...commonStyle,
+            //     color: theme.colors.gray[4],
+            //   },
+            // }),
+        },
+        rightSection: Object.assign({ color: theme.colors.gray[4] }, (() => {
+            switch (size) {
+                case 'lg':
+                    return Object.assign({ fontSize: rem(16) }, (isLeadgenStyle && {
+                        fontSize: rem(15),
+                    }));
+                case 'md':
+                    return Object.assign({ fontSize: rem(14) }, (isLeadgenStyle && {
+                        fontSize: rem(15),
+                        letterSpacing: '-0.3px',
+                    }));
+                case 'sm':
+                    return Object.assign({ height: 32, fontSize: rem(14), lineHeight: '22px' }, (isLeadgenStyle && {
+                        height: 36,
+                        fontSize: rem(13),
+                        letterSpacing: '-0.3px',
+                    }));
+                case 'xs':
+                    return {
+                        height: 32,
+                        lineHeight: rem(20),
+                        fontSize: rem(13),
+                        letterSpacing: '-0.3px',
+                    };
+            }
+        })()),
     };
 });
 
@@ -342,20 +423,25 @@ const emotionCache = createEmotionCache({
 });
 
 const NumberInput = (_a) => {
-    var { value: _value, onChange: _onChange } = _a, props = __rest(_a, ["value", "onChange"]);
+    var { value: _value, onChange: _onChange, size = 'md', styles, classNames } = _a, props = __rest(_a, ["value", "onChange", "size", "styles", "classNames"]);
     const [value, setValue] = useState(_value);
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles, classNames });
     useEffect(() => {
         _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
     }, [debounced]);
     useEffect(() => {
         setValue(_value);
     }, [_value]);
-    return (React__default.createElement(NumberInput$1, Object.assign({ size: "md", stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
+    return (React__default.createElement(NumberInput$1, Object.assign({ stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
             if (Number(value) === 0)
                 return value;
             return value || '';
-        }, removeTrailingZeros: true, value: value }, props)));
+        }, removeTrailingZeros: true, value: value }, props, { size: size, classNames: {
+            input: classes.input,
+            rightSection: classes.rightSection,
+        } })));
 };
 
 const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
@@ -749,9 +835,9 @@ FloatingLabelControl.Control = FloatingLabelControlControl;
 FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
-    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
+    var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error, size = 'md' } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error", "size"]);
     const variantStyle = useTemplateVariant();
-    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
+    const { classes } = useStyles$1({ variantStyle, size }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -762,7 +848,9 @@ const InputWrapper = forwardRef((_a, ref) => {
     }, [_value]);
     const commonProps = Object.assign(Object.assign({ classNames: {
             input: classes.input,
-        }, ref, size: 'md', onChange: (event) => {
+            rightSection: classes.rightSection,
+        }, ref,
+        size, onChange: (event) => {
             if (typeof maxLength === 'number' &&
                 event.currentTarget.value.length > maxLength) {
                 return;
@@ -774,15 +862,11 @@ const InputWrapper = forwardRef((_a, ref) => {
         error }, props), { maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` });
     if (withFloatingLabel) {
         return (React__default.createElement(FloatingLabelControl, { shrink: !!value },
-            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
-                    input: classes.input,
-                }, error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
+            React__default.createElement(FloatingLabelControl.Control, null, ({ shrink }) => (React__default.createElement(TextInput, Object.assign({}, commonProps, { error: error && React__default.createElement(ErrorLabel, { label: String(error) }), inputWrapperOrder: ['label', 'input', 'description', 'error'], label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), styles: (theme) => ({
                     input: Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: FontWeight.halfBold }),
                 }) }))))));
     }
-    return (React__default.createElement(TextInput, Object.assign({}, commonProps, { classNames: {
-            input: classes.input,
-        } })));
+    return React__default.createElement(TextInput, Object.assign({}, commonProps));
 });
 const Input = InputWrapper;
 Input.File = FileInput;
@@ -1477,6 +1561,32 @@ const MyanmarSquareIcon = (props) => (React__default.createElement("svg", Object
 const PhilippinesRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
 const PhilippinesSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
 
+const SingaporeRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "white" })),
+        React__default.createElement("rect", { width: "20", height: "10", y: "0", fill: "#EF3340" }),
+        React__default.createElement("rect", { width: "20", height: "10", y: "10", fill: "#FFFFFF" }),
+        React__default.createElement("circle", { cx: "6", cy: "5", r: "3", fill: "white" }),
+        React__default.createElement("circle", { cx: "6.8", cy: "5", r: "2.4", fill: "#EF3340" }),
+        React__default.createElement("g", { fill: "white", transform: "translate(6 5)" },
+            React__default.createElement("polygon", { points: "0,-0.9 0.26,-0.26 0.9,0 0.26,0.26 0,0.9 -0.26,0.26 -0.9,0 -0.26,-0.26", transform: "translate(1.8 -2)" }),
+            React__default.createElement("polygon", { points: "0,-0.9 0.26,-0.26 0.9,0 0.26,0.26 0,0.9 -0.26,0.26 -0.9,0 -0.26,-0.26", transform: "translate(3 -1)" }),
+            React__default.createElement("polygon", { points: "0,-0.9 0.26,-0.26 0.9,0 0.26,0.26 0,0.9 -0.26,0.26 -0.9,0 -0.26,-0.26", transform: "translate(3 0.5)" }),
+            React__default.createElement("polygon", { points: "0,-0.9 0.26,-0.26 0.9,0 0.26,0.26 0,0.9 -0.26,0.26 -0.9,0 -0.26,-0.26", transform: "translate(1.8 1.5)" }),
+            React__default.createElement("polygon", { points: "0,-0.9 0.26,-0.26 0.9,0 0.26,0.26 0,0.9 -0.26,0.26 -0.9,0 -0.26,-0.26", transform: "translate(0.6 0.5)" })))));
+const SingaporeSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "white" }),
+    React__default.createElement("rect", { width: "24", height: "8", rx: "2", fill: "#EF3340" }),
+    React__default.createElement("circle", { cx: "6", cy: "4", r: "3", fill: "white" }),
+    React__default.createElement("circle", { cx: "6.8", cy: "4", r: "2.4", fill: "#EF3340" }),
+    React__default.createElement("g", { fill: "white", transform: "translate(6 4)" },
+        React__default.createElement("polygon", { points: "0,-1 0.3,-0.3 1,0 0.3,0.3 0,1 -0.3,0.3 -1,0 -0.3,-0.3", transform: "translate(1.8 -2)" }),
+        React__default.createElement("polygon", { points: "0,-1 0.3,-0.3 1,0 0.3,0.3 0,1 -0.3,0.3 -1,0 -0.3,-0.3", transform: "translate(3 -1)" }),
+        React__default.createElement("polygon", { points: "0,-1 0.3,-0.3 1,0 0.3,0.3 0,1 -0.3,0.3 -1,0 -0.3,-0.3", transform: "translate(3 0.5)" }),
+        React__default.createElement("polygon", { points: "0,-1 0.3,-0.3 1,0 0.3,0.3 0,1 -0.3,0.3 -1,0 -0.3,-0.3", transform: "translate(1.8 1.5)" }),
+        React__default.createElement("polygon", { points: "0,-1 0.3,-0.3 1,0 0.3,0.3 0,1 -0.3,0.3 -1,0 -0.3,-0.3", transform: "translate(0.6 0.5)" }))));
+
 const TaiwanRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__default.createElement("g", null,
         React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
@@ -1627,6 +1737,10 @@ const Flag = ({ country, language, rounded, height, width, isTesting, className,
                 flag = React__default.createElement(TaiwanSquareIcon, null);
                 flagRounded = React__default.createElement(TaiwanRoundIcon, null);
                 break;
+            case 'SG':
+                flag = React__default.createElement(SingaporeSquareIcon, null);
+                flagRounded = React__default.createElement(SingaporeRoundIcon, null);
+                break;
         }
     }
     return (React__default.createElement("div", { className: `${styles$1.flag} ${className || ''}`, style: {
@@ -1794,4 +1908,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, ErrorLabel as d, Checkbox as e, CentralCarousel as f, ChipButton as g, PasswordInput as h, ErrorBoundary as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };
+export { Avatar as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Carousel as a, Anchor as b, AspectRatio as c, Checkbox as d, ErrorLabel as e, CentralCarousel as f, ChipButton as g, PasswordInput as h, ErrorBoundary as i, StyledSliderWrapper as j, StyledSlider as k, Accordion as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };

package/build/esm/{index-cbed19a5.js → index-73cf81a0.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-3951d926.js';
+import { _ as __rest } from './tslib.es6-0726ca1f.js';
 import React__default, { createContext, useContext, useMemo } from 'react';
 import { useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-7250d9ce.js';
-import { u as useTranslations } from './index-dfa05053.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-1ed05d9f.js';
-import { I as Input } from './index-0b05de86.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-f9563357.js';
+import { u as useTranslations } from './index-ffde4953.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-775f5d95.js';
+import { I as Input } from './index-73316752.js';
 import '@mantine/dates';
-import './index-d7e91e70.js';
-import './index-10e886ab.js';
-import './index-de7197f0.js';
-import './index-5b8fe088.js';
-import { T as Text } from './index-096e6319.js';
-import './index-54b75124.js';
-import './index-94bafefe.js';
-import './index.styles-aec3504c.js';
+import './index-677cf9e3.js';
+import './index-b061f549.js';
+import './index-23aa7283.js';
+import './index-cf966b54.js';
+import { T as Text } from './index-087f90b3.js';
+import './index-3d3ce577.js';
+import './index-2857df98.js';
+import './index.styles-99022525.js';
 import '@mantine/hooks';
-import './utils-1666f74c.js';
-import './index-e97a9574.js';
-import { C as CardWrapperContext } from './context-79c904a5.js';
-import { H as HealthToolFormWrapper } from './index-0a592a5d.js';
-import { I as INPUT_RANGE } from './constants-02b41fc9.js';
+import './utils-5ade66c1.js';
+import './index-e8d0a800.js';
+import { C as CardWrapperContext } from './context-1082fa45.js';
+import { H as HealthToolFormWrapper } from './index-204943a4.js';
+import { I as INPUT_RANGE } from './constants-36a51d30.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const PWGFormContext = createContext({});

package/build/esm/{index-7de71b88.js → index-79783638.js}

@@ -1,13 +1,13 @@
-import { a as __awaiter } from './tslib.es6-3951d926.js';
+import { a as __awaiter } from './tslib.es6-0726ca1f.js';
 import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { Box, useMantineTheme } from '@mantine/core';
-import { I as ImageWrap } from './index-9bce48f0.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-c910d8a5.js';
+import { I as ImageWrap } from './index-58539fd0.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-c768acf4.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-1ed05d9f.js';
-import { y as youtubeVidIdGetter } from './post-ea9f662b.js';
-import { L as Loading } from './index-f0fd3243.js';
+import { D as DEFAULT_IMG } from './constants-775f5d95.js';
+import { y as youtubeVidIdGetter } from './post-e3dc913c.js';
+import { L as Loading } from './index-09624611.js';
 
 const StyledSocialLinkPreview = styled.div `
   .link-info-container {

package/build/esm/{index-258f0325.js → index-7be5c11a.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-3951d926.js';
+import { _ as __rest } from './tslib.es6-0726ca1f.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-096e6319.js';
+import { T as Text } from './index-087f90b3.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'

package/build/esm/{index-bbb2fa59.js → index-81f2903e.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-3951d926.js';
+import { _ as __rest } from './tslib.es6-0726ca1f.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-096e6319.js';
-import { u as useTranslations } from './index-dfa05053.js';
+import { T as Text } from './index-087f90b3.js';
+import { u as useTranslations } from './index-ffde4953.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-d06736db.js → index-89a7c94f.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-3951d926.js';
+import { a as __awaiter } from './tslib.es6-0726ca1f.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-258f0325.js';
-import { T as Text } from './index-096e6319.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-c910d8a5.js';
+import { H as Heading } from './index-7be5c11a.js';
+import { T as Text } from './index-087f90b3.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath } from './utils-c768acf4.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-1ed05d9f.js';
+import { D as DEFAULT_IMG } from './constants-775f5d95.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {