@hhgtech/hhg-components 1.29.502 → 1.29.504

package/build/esm/{index-c7f0c8c5.js → index-f4ee60eb.js}

@@ -1,24 +1,25 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-30239d68.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-3e6718a6.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-455d6c13.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-8895cfb2.js';
-import { u as useScreenSize, I as ImageWrap } from './index-a8430432.js';
+import { C as CommonGAssets } from './index-47b1eb5f.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-819e815f.js';
+import { u as useScreenSize, I as ImageWrap } from './index-130f05ea.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-ee0e07c2.js';
-import { t as themeColors } from './index-775acaac.js';
+import { T as Text } from './index-56553ab9.js';
+import { t as themeColors } from './index-e9edd913.js';
 import { theme } from './miscTheme.js';
+import { A as ANIMATION_DURATION } from './shared-219e06f1.js';
 import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-55d7a609.js';
+import { a as useUniqueId } from './useUniqueId-dfc4c9f1.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-80a2f314.js';
+import { B as Button } from './index-2857708d.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-1abb3484.js → index-fae2eb1b.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-80a2f314.js';
+import { B as Button } from './index-2857708d.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-94e1adc2.js → index-fb7b423b.js}

@@ -2,13 +2,13 @@ import * as React from 'react';
 import React__default, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-a8430432.js';
-import { T as Text } from './index-ee0e07c2.js';
-import { _ as __rest } from './tslib.es6-30239d68.js';
+import { I as ImageWrap } from './index-130f05ea.js';
+import { T as Text } from './index-56553ab9.js';
+import { _ as __rest } from './tslib.es6-3e6718a6.js';
 import { clsx, Modal } from '@mantine/core';
-import { D as DrawerComponent, u as useDrawerDrag } from './index-0117f220.js';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-2f072cb0.js';
 import { Drawer } from 'vaul';
-import { Z as ZINDEX_SSO } from './index-c80af3fd.js';
+import { Z as ZINDEX_SSO } from './index-af8c61b4.js';
 
 /* eslint-disable prettier/prettier */
 const ShapedArrowDown = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),

package/build/esm/{index-d2863e9f.js → index-fbcc001f.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-c7f0c8c5.js';
+import { F as Flag } from './index-f4ee60eb.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-ee0e07c2.js';
-import { C as CommonGAssets } from './index-455d6c13.js';
-import { _ as __rest } from './tslib.es6-30239d68.js';
-import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-c80af3fd.js';
-import { V as VideoType } from './index-a8dd988b.js';
+import { T as Text } from './index-56553ab9.js';
+import { C as CommonGAssets } from './index-47b1eb5f.js';
+import { _ as __rest } from './tslib.es6-3e6718a6.js';
+import { a as ZINDEX_HEADER, e as VIDEO_DETAIL_TEMP_STORAGE } from './index-af8c61b4.js';
+import { V as VideoType } from './index-77cb3d36.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-b31b4f94.js';
-import { u as useTranslations } from './index-af067d95.js';
+import { a as abbreviateNumber } from './number-5612d429.js';
+import { u as useTranslations } from './index-45337579.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-e963bc4a.js';
-import { S as SocialLinkPreview } from './index-824949a2.js';
+import { M as Modal } from './index-e527e8f8.js';
+import { S as SocialLinkPreview } from './index-0b19aab5.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [

package/build/esm/{index-ff8c9b46.js → index-fd2cfab4.js}

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MarryBabyText } from './index-71236b54.js';
-import { T as Text } from './index-5ffb576e.js';
+import { M as MarryBabyText } from './index-cd372d15.js';
+import { T as Text } from './index-7bfc7e77.js';
 
 const StyledRadioImageGroup = styled.div `
   display: flex;