@hhgtech/hhg-components 1.29.499 → 1.29.500-beta-2

package/build/esm/{index-b002e38a.js → index-421769cb.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-55f4bb34.js';
+import { _ as __rest } from './tslib.es6-bea8d7ce.js';
 import React__default from 'react';
 import { Textarea } from '@mantine/core';
-import { u as useStyles } from './index-aa4fa7ef.js';
-import { u as useTemplateVariant } from './index-6bbe47dd.js';
+import { u as useStyles } from './index-abf57548.js';
+import { u as useTemplateVariant } from './index-5783e827.js';
 
 const TextArea = (_a) => {
     var { styles } = _a, props = __rest(_a, ["styles"]);

package/build/esm/{index-19d452f9.js → index-42c999c1.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-f35b6b3e.js';
+import { u as useScrollbarSize } from './useScrollbarSize-2f99e016.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-3a7b6858.js';
+import { M as MediaQueries } from './utils-3cf2fae9.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-8350d597.js → index-4c9596c1.js}

@@ -1,28 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55f4bb34.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-bea8d7ce.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-91816666.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-331fe510.js';
-import { Flex, rem, Stack, clsx, createStyles, Box } from '@mantine/core';
-import { G as GenderOptionControl } from './index-63d42466.js';
-import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-aa4fa7ef.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-e4912c80.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-ee5ae66c.js';
+import { Grid, Flex, Box, clsx, createStyles, rem, Stack } from '@mantine/core';
+import { G as GenderOptionControl } from './index-9a787391.js';
+import { I as Input, R as Radio, d as ErrorLabel, e as Checkbox } from './index-abf57548.js';
 import '@mantine/dates';
-import './index-5281d35a.js';
-import './index-6824b2e7.js';
-import './index-40c578bb.js';
-import './index-2007b4e0.js';
-import { T as Text } from './index-ad2cfbce.js';
-import './index-81d10993.js';
-import { theme } from './miscTheme.js';
-import './index-6bbe47dd.js';
-import './index.styles-fc2f219f.js';
-import { u as useTranslations } from './index-4bf11885.js';
+import './index-d7537411.js';
+import './index-9533e446.js';
+import './index-7da03926.js';
+import './index-b5fb218c.js';
+import { T as Text } from './index-f485352b.js';
+import './index-596d9f61.js';
+import './index-5783e827.js';
+import './index.styles-a42bb23d.js';
+import { u as useTranslations } from './index-53857337.js';
 import '@mantine/hooks';
-import './utils-3a7b6858.js';
-import './index-f696d20a.js';
-import { H as HealthToolFormWrapper } from './index-ffc5eb39.js';
-import { C as CardWrapperContext } from './context-ad6c904b.js';
-import { L as LOCALE } from './Locale-b4469ff3.js';
+import './utils-3cf2fae9.js';
+import './index-cbd42af5.js';
+import { H as HealthToolFormWrapper } from './index-cddf4448.js';
+import { C as CardWrapperContext } from './context-a191d283.js';
+import { L as LOCALE } from './Locale-685e2f0d.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 
@@ -33,77 +32,88 @@ const DefaultForm = (props) => {
     const { t, locale } = useTranslations();
     const { classes: cardWrapperClasses = {} } = useContext(CardWrapperContext);
     const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = useContext(BmiFormContext);
+    const radioStyle = {
+        body: {
+            alignItems: 'center',
+        },
+    };
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
-                    return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.ageInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: '25',
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.heightInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === LOCALE.Myanmar ? 6 : 170,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.weightInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === LOCALE.Myanmar ? 130 : 60,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-                } })),
-        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
-                        return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
-                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+        React__default.createElement(Grid, { gutter: 4, px: 16 },
+            React__default.createElement(Grid.Col, { span: 12 },
+                React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
+                        return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
                     } })),
-            React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                        return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
-                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
-                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
-                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+            React__default.createElement(Grid.Col, { span: 12 },
+                React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                        return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
+                                rightSection: formWrapperClasses.inputRightSection,
+                            } }));
                     } })),
-            React__default.createElement(HealthToolFormWrapper.FormRow, { sx: { paddingLeft: 0, paddingRight: 0 } },
-                React__default.createElement(Stack, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock), spacing: 16, sx: {
-                        paddingLeft: 16,
-                        paddingRight: 16,
-                    } },
-                    React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
-                            var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
-                            return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
-                        } }),
-                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))));
+            React__default.createElement(Grid.Col, { span: 12 },
+                React__default.createElement(Grid, { gutter: 8 },
+                    React__default.createElement(Grid.Col, { span: 6 },
+                        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === LOCALE.Myanmar ? 6 : 170,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } })),
+                    React__default.createElement(Grid.Col, { span: 6 },
+                        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === LOCALE.Myanmar ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } }))))),
+        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Grid, { gutter: 4, px: 16 },
+                React__default.createElement(Grid.Col, null,
+                    React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                                React__default.createElement(Flex, { gap: "lg" },
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } })),
+                React__default.createElement(Grid.Col, null,
+                    React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                            return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "p2", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc'))), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                                React__default.createElement(Flex, { gap: "lg" },
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } }))),
+            React__default.createElement(Box, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
+                React__default.createElement(Grid, { gutter: 8, px: 16, py: 12 },
+                    React__default.createElement(Grid.Col, null,
+                        React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                                var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                                return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p2" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                            } })),
+                    React__default.createElement(Grid.Col, null,
+                        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default.createElement(Box, { px: 16, sx: { paddingBottom: 8 } },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit", fullWidth: true }, submitProps), t('bmi.submit'))))));
 };
 
 var useStyles = createStyles((theme) => {
     return {
         newsletterBlock: {
             backgroundColor: theme.colors.neutral[0],
-            padding: `${rem(16)} 0`,
             borderBottomLeftRadius: 'inherit',
             borderBottomRightRadius: 'inherit',
             '.bmi-btn': {
                 marginTop: 0,
             },
         },
+        inputRightSection: {
+            fontSize: rem(13),
+            lineHeight: rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
     };
 });
 
@@ -172,7 +182,7 @@ const InlineForm = (props) => {
                             React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field))));
                     } }),
                 React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
-                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
+                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { py: 16, className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
                 React__default.createElement(Stack, { spacing: 16 },
                     React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
                             var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);

package/build/esm/{index-8952f5d8.js → index-4c96460c.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-547265dd.js';
+import { T as Text } from './index-6ef62074.js';
 import classNames from 'classnames';
-import { I as ImageWrap } from './index-b1828858.js';
-import { T as Text$1 } from './index-ad2cfbce.js';
+import { I as ImageWrap } from './index-73aae057.js';
+import { T as Text$1 } from './index-f485352b.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),

package/build/esm/{index-dff7f065.js → index-50d1b9a1.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-f1596c12.js';
-import { u as useTranslations } from './index-4bf11885.js';
+import { I as Icon } from './index-2809567f.js';
+import { u as useTranslations } from './index-53857337.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-18f98f85.js → index-52e79d84.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-55f4bb34.js';
+import { _ as __rest } from './tslib.es6-bea8d7ce.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-5281d35a.js';
+import { Z as ZINDEX_SSO } from './index-d7537411.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-4bf11885.js → index-53857337.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-3b0371e4.js';
+import { T as TranslationsContext } from './translationsContext-8f354b67.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-81d10993.js → index-596d9f61.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-55f4bb34.js';
+import { _ as __rest } from './tslib.es6-bea8d7ce.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, getStylesRef, useMantineTheme, Button as Button$1 } from '@mantine/core';
-import { A as ANIMATION_DURATION } from './shared-ea6b1fce.js';
-import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-6bbe47dd.js';
+import { A as ANIMATION_DURATION } from './shared-340b76b1.js';
+import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-5783e827.js';
 
 var useStyles = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;

package/build/esm/{index-245d87cd.js → index-5cc78b62.js}

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55f4bb34.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-bea8d7ce.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-aa4fa7ef.js';
+import { R as Radio, a as Carousel } from './index-abf57548.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-5281d35a.js';
-import './index-6824b2e7.js';
-import { C as CommonGAssets } from './index-40c578bb.js';
-import './index-2007b4e0.js';
-import { T as Text } from './index-ad2cfbce.js';
-import { B as Button$1 } from './index-81d10993.js';
-import './index-6bbe47dd.js';
-import './index.styles-fc2f219f.js';
-import './translationsContext-3b0371e4.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-d7537411.js';
+import './index-9533e446.js';
+import { C as CommonGAssets } from './index-7da03926.js';
+import './index-b5fb218c.js';
+import { T as Text } from './index-f485352b.js';
+import { B as Button$1 } from './index-596d9f61.js';
+import './index-5783e827.js';
+import './index.styles-a42bb23d.js';
+import './translationsContext-8f354b67.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-3a7b6858.js';
-import './index-f696d20a.js';
-import { i as isInternalLink } from './index-7c5eee02.js';
+import { M as MediaQueries } from './utils-3cf2fae9.js';
+import './index-cbd42af5.js';
+import { i as isInternalLink } from './index-d5bb9b6d.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-4f2c284f.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-106dfb8b.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-05ad91dd.js';
+import { L as Logo } from './index-d902d3f5.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-24b11763.js';
+import { a as useOutsideClick } from './useOutsideClick-2fa59ce8.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-60a08b5d.js';
-import { u as useScreenSize, I as ImageWrap } from './index-b1828858.js';
-import { u as useTranslations } from './index-4bf11885.js';
+import { B as Button } from './index-e5318724.js';
+import { u as useScreenSize, I as ImageWrap } from './index-73aae057.js';
+import { u as useTranslations } from './index-53857337.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-688b8963.js';
+import { D as Dropdown } from './index-5f3af48f.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-9307bdad.js';
-import { D as Drawer } from './index-f303639b.js';
+import { I as Input } from './index-09a8e8cd.js';
+import { D as Drawer } from './index-7cc369a9.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-b4469ff3.js';
+import { L as LOCALE } from './Locale-685e2f0d.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-8952f5d8.js';
-import { L as Loading } from './index-dff7f065.js';
+import { A as ArrowRightBlue } from './index-4c96460c.js';
+import { L as Loading } from './index-50d1b9a1.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -4867,10 +4867,10 @@ function Item({ render, }) {
 
 const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_DEBOUNCE = 300;
-function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, debounceSearch = DEFAULT_DEBOUNCE, defaultLoading, }) {
-    const [items, setItems] = useState([]);
-    const [total, setTotal] = useState(0);
-    const [page, setPage] = useState(1);
+function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', defaultFilters = {}, debounceSearch = DEFAULT_DEBOUNCE, defaultLoading, defaultItems, defaultTotal, defaultPage, }) {
+    const [items, setItems] = useState(defaultItems || []);
+    const [total, setTotal] = useState(defaultTotal !== null && defaultTotal !== void 0 ? defaultTotal : 0);
+    const [page, setPage] = useState(defaultPage !== null && defaultPage !== void 0 ? defaultPage : 1);
     const [searchSession, setSearchSession] = useState('');
     const [search, setSearch] = useState(defaultSearch);
     const [loading, setLoading] = useState(defaultLoading);
@@ -4992,7 +4992,7 @@ function useList({ fetcher, pageSize = DEFAULT_PAGE_SIZE, defaultSearch = '', de
     };
 }
 
-function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, debounceSearch, defaultLoading, }) {
+function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSize, debounceSearch, defaultLoading, defaultItems, defaultTotal, defaultPage, }) {
     const listState = useList({
         fetcher,
         defaultFilters,
@@ -5000,6 +5000,9 @@ function ListProvider({ fetcher, children, defaultFilters, defaultSearch, pageSi
         pageSize,
         debounceSearch,
         defaultLoading,
+        defaultItems,
+        defaultTotal,
+        defaultPage,
     });
     const value = useMemo(() => (Object.assign({}, listState)), [
         listState.items,
@@ -5399,14 +5402,115 @@ const ProductContent = styled.div `
     flex-direction: column;
     gap: 8px;
   }
+`;
+const ImageCarouselContainer = styled.div `
+  margin-top: 0.75rem;
+  width: 100%;
+
+  ${MediaQueries.mbUp} {
+    margin-top: 12px;
+  }
+`;
+const StyledImageCarousel = styled(Carousel) `
+  .mantine-Carousel-controls {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .mantine-Carousel-control {
+    background-color: #fff;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+
+    &:hover {
+      background-color: #fff;
+    }
+
+    &:active {
+      background-color: #fff;
+    }
+
+    &[data-inactive] {
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  .mantine-Carousel-indicators {
+    gap: 0.375rem;
+    bottom: 0.5rem;
+  }
+
+  .mantine-Carousel-indicator {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: ${theme.colors.gray200};
+    opacity: 1;
+
+    &[data-active] {
+      background-color: ${theme.colors.black};
+    }
+  }
+`;
+const CarouselImageItemWrapper = styled.div `
+  width: 76px;
+  height: 76px;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  border: 1px solid ${theme.colors.gray300};
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+
+  &:hover {
+    border-color: ${theme.colors.primaryBase};
+  }
+`;
+const CarouselImageItemWrapperMobile = styled.div `
+  width: 100%;
+  aspect-ratio: 375/190;
+  border-radius: 0;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+  overflow: hidden;
+`;
+const CarouselImageItem = styled(ImageWrapV2) `
+  background-color: ${theme.colors.neutral50};
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 `;
 
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
+function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile: isMobileProp = false, imageCarousel = [], carouselSlotProps, onCarouselImageClick, }) {
+    const { isMobile: isMobileFromHook } = useScreenSize();
+    // Use isMobile prop first, fallback to breakpoint detection (secondary priority)
+    const isMobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileFromHook;
+    const showCarousel = imageCarousel.length > 0;
+    const showCarouselControls = imageCarousel.length > 4 && !isMobile;
+    const showCarouselIndicators = imageCarousel.length > 1 && isMobile;
+    const { imageCarousel: imageCarouselSlotProps, slide: carouselSlideSlotProps, imageItemWrapper: carouselImageItemWrapperSlotProps, imageItem: carouselImageItemSlotProps, } = carouselSlotProps !== null && carouselSlotProps !== void 0 ? carouselSlotProps : {};
     return (React__default.createElement(GeneralInfoContainer, { className: className },
-        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
-                (typeof generalInfo.name === 'string'
-                    ? generalInfo.name
-                    : 'product') }, bannerProps)))),
+        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(React__default.Fragment, null, showCarousel && isMobile ? (React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 1, align: "start", withControls: false, withIndicators: showCarouselIndicators, dragFree: false, slideSize: "100%", slideGap: 0, draggable: showCarouselIndicators }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+            React__default.createElement(CarouselImageItemWrapperMobile, { onClick: () => onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index) },
+                React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: generalInfo.altText ||
+                    (typeof generalInfo.name === 'string'
+                        ? generalInfo.name
+                        : 'product') }, bannerProps)),
+            showCarousel && (React__default.createElement(ImageCarouselContainer, null,
+                React__default.createElement(StyledImageCarousel, Object.assign({ slidesToShow: 4, align: "start", withControls: showCarouselControls, withIndicators: false, dragFree: true, controlSize: 24, slideSize: 76, slideGap: 10 }, imageCarouselSlotProps), imageCarousel.map((imageUrl, index) => (React__default.createElement(Carousel.Slide, Object.assign({ key: index }, carouselSlideSlotProps),
+                    React__default.createElement(CarouselImageItemWrapper, Object.assign({}, carouselImageItemWrapperSlotProps, { onClick: (event) => {
+                            var _a;
+                            (_a = carouselImageItemWrapperSlotProps === null || carouselImageItemWrapperSlotProps === void 0 ? void 0 : carouselImageItemWrapperSlotProps.onClick) === null || _a === void 0 ? void 0 : _a.call(carouselImageItemWrapperSlotProps, event);
+                            onCarouselImageClick === null || onCarouselImageClick === void 0 ? void 0 : onCarouselImageClick(index);
+                        } }),
+                        React__default.createElement(CarouselImageItem, Object.assign({}, carouselImageItemSlotProps, { src: imageUrl, alt: `${generalInfo.altText || 'product'} - ${index + 1}`, backupSrc: backupSrc, isMobile: isMobile })))))))))))))),
         React__default.createElement(ProductContent, { className: contentClassName },
             React__default.createElement("div", { className: "product-info" },
                 typeof generalInfo.name === 'string' ? (React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000", as: "h1" }, generalInfo.name)) : (generalInfo.name), generalInfo === null || generalInfo === void 0 ? void 0 :

package/build/esm/{index-a156dd1e.js → index-5d9703c0.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55f4bb34.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-bea8d7ce.js';
 import React__default, { useState, useContext, useMemo, useRef, useCallback, useEffect, createContext } from 'react';
 import dayjs from 'dayjs';
-import { T as Tabs } from './index-f696d20a.js';
-import { L as Loading } from './index-e35ea957.js';
-import { a as formatPost, f as formatCommunity, g as formatArticle } from './dataTransform-90ce18cb.js';
+import { T as Tabs } from './index-cbd42af5.js';
+import { L as Loading } from './index-a49aefc9.js';
+import { a as formatPost, f as formatCommunity, g as formatArticle } from './dataTransform-83431e7e.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, b as callApiWithAuth } from './utils-b1d50cce.js';
+import { T as TogetherComponentGlobalContext, c as callApi, e as getApiPath, b as callApiWithAuth } from './utils-636c6efd.js';
 import { Plus } from '@hhgtech/icons/core';
 import { createStyles, Anchor, Accordion, Flex, useMantineTheme } from '@mantine/core';
-import { C as CommonGAssets } from './index-40c578bb.js';
-import { I as ImageWrap } from './index-b1828858.js';
-import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-e9e6af1c.js';
-import { S as SocialType } from './index-6824b2e7.js';
-import { u as useTranslations } from './index-4bf11885.js';
+import { C as CommonGAssets } from './index-7da03926.js';
+import { I as ImageWrap } from './index-73aae057.js';
+import { P as PopupExpert, d as CardAuthor, C as CardAuthor$1 } from './index-77700ece.js';
+import { S as SocialType } from './index-9533e446.js';
+import { u as useTranslations } from './index-53857337.js';
 import { theme } from './miscTheme.js';
 import { CrossLogo, ArrowDown } from '@hhgtech/icons/other';
-import { a as Anchor$1 } from './index-aa4fa7ef.js';
+import { b as Anchor$1 } from './index-abf57548.js';
 import '@mantine/dates';
-import './index-5281d35a.js';
-import './index-2007b4e0.js';
-import { T as Text } from './index-ad2cfbce.js';
-import { B as Button } from './index-81d10993.js';
-import './index-6bbe47dd.js';
-import './index.styles-fc2f219f.js';
+import './index-d7537411.js';
+import './index-b5fb218c.js';
+import { T as Text } from './index-f485352b.js';
+import { B as Button } from './index-596d9f61.js';
+import './index-5783e827.js';
+import './index.styles-a42bb23d.js';
 import '@mantine/hooks';
-import './utils-3a7b6858.js';
+import './utils-3cf2fae9.js';
 import styled from '@emotion/styled';
 import { useTogetherAuthRequiredAction } from './useTogetherAuthRequiredAction.js';
-import { d as decodeMention, b as decodePostUrl } from './post-232c3e19.js';
-import { B as Button$1 } from './index-60a08b5d.js';
-import './translationsContext-3b0371e4.js';
+import { d as decodeMention, b as decodePostUrl } from './post-3fd4c9f7.js';
+import { B as Button$1 } from './index-e5318724.js';
+import './translationsContext-8f354b67.js';
 
 const StyledPostContent = styled.div `
   padding: 0.5rem 1rem 1rem;

package/build/esm/{index-c3e92ebc.js → index-600c4552.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-debc4545.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-5281d35a.js';
-import { N as NodeIntentType } from './index-6824b2e7.js';
+import { c as cookie } from './index-f8544122.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-d7537411.js';
+import { N as NodeIntentType } from './index-9533e446.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';