@hhgtech/hhg-components 1.29.500-beta-1 → 1.29.500-beta-3

package/build/esm/healthToolsForm.js

@@ -1,60 +1,60 @@
-export { D as DueDateForm } from './index-cad2d5af.js';
-export { B as BmiForm } from './index-ef6c9b1a.js';
-export { B as BabyPoopForm } from './index-ea18ab10.js';
-export { T as ThrForm } from './index-d96403ed.js';
-export { O as OvulationForm } from './index-99397d6e.js';
-export { B as BabyVaccineForm } from './index-88d1f4bb.js';
-export { P as PWGForm } from './index-cd2229cc.js';
-import './tslib.es6-b66d75db.js';
+export { D as DueDateForm } from './index-513c8380.js';
+export { B as BmiForm } from './index-5551dc36.js';
+export { B as BabyPoopForm } from './index-2fa238e5.js';
+export { T as ThrForm } from './index-2ce5174d.js';
+export { O as OvulationForm } from './index-17690bea.js';
+export { B as BabyVaccineForm } from './index-91b72a9f.js';
+export { P as PWGForm } from './index-0fb023a4.js';
+import './tslib.es6-f5d1f608.js';
 import 'react';
 import '@mantine/core';
 import 'date-fns';
-import './LastPeriod-5c80b823.js';
-import './Locale-b6f4abea.js';
+import './LastPeriod-7181032d.js';
+import './Locale-ade54802.js';
 import '@mantine/form';
 import 'dayjs';
-import './index-98006352.js';
+import './index-59e684e6.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-96dfb9cd.js';
+import './index-2624437b.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './index-d0043174.js';
-import './index-c95bb41b.js';
-import './utils-409a83b1.js';
+import './index-6f32f7dc.js';
+import './index-ca942ebe.js';
+import './utils-3f27c2b4.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-8eb56567.js';
-import './index-a22941c6.js';
-import './index-be0a2a5d.js';
+import './index-d3bd2909.js';
+import './index-67881d80.js';
+import './index-34c5d548.js';
 import '@mantine/notifications';
-import './index-f36317a6.js';
+import './index-6fdf0413.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
-import './shared-d47dca0e.js';
+import './shared-b89ebb93.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-c031d61e.js';
+import './useUniqueId-52f16928.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
-import './index-fac9ecc6.js';
-import './index-85d4d9e5.js';
+import './index-43f1608d.js';
+import './index-fb943dab.js';
 import '@mantine/dates';
-import './index.styles-e50708f1.js';
-import './index-49b79390.js';
-import './translationsContext-7867723c.js';
-import './index-a39e6bf0.js';
-import './index-fbe616df.js';
+import './index.styles-bd952485.js';
+import './index-3027109b.js';
+import './translationsContext-6bf7e307.js';
+import './index-e87ed093.js';
+import './index-1f4d429d.js';
 import 'react-keyed-flatten-children';
-import './context-13568ea4.js';
+import './context-ba936f50.js';
 import 'react-hook-form';
-import './useHealthToolCache-a5e4373e.js';
+import './useHealthToolCache-4b0cc7c4.js';
 import './miscGetDynamicHealthTool.js';
-import './normalizeLink-6608fe9d.js';
-import './core-55b3b3b0.js';
-import './constants-a16e91a9.js';
-import './index-669c227e.js';
+import './normalizeLink-45a8d146.js';
+import './core-53b02967.js';
+import './constants-29e4f67a.js';
+import './index-9611334f.js';
 import './embeddedHeathToolCards_helpers.js';
-import './constants-c76cd5b7.js';
+import './constants-15d0ae67.js';

package/build/esm/hooks.js

@@ -1,19 +1,19 @@
-export { u as useTranslations } from './index-49b79390.js';
-export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-ef7d776a.js';
-export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, d as usePhoneValidator, a as usePrevious, b as useRafState } from './usePhoneValidator-2fecc52b.js';
-export { u as useHealthToolsCache } from './useHealthToolCache-a5e4373e.js';
-export { u as useIsInit } from './useIsInit-16065802.js';
-export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-7f9f2425.js';
-export { u as useInitialMount, a as useUniqueId } from './useUniqueId-c031d61e.js';
+export { u as useTranslations } from './index-3027109b.js';
+export { M as MEASURE_ELEMENT_CLASS, u as useScrollbarSize } from './useScrollbarSize-16486965.js';
+export { M as MAPPED_CATEGORY_SLUGS, P as PREGNANCY_SLUG, c as useCategory, u as useFbDataLayer, d as usePhoneValidator, a as usePrevious, b as useRafState } from './usePhoneValidator-8cf46267.js';
+export { u as useHealthToolsCache } from './useHealthToolCache-4b0cc7c4.js';
+export { u as useIsInit } from './useIsInit-516f2978.js';
+export { i as initSharedOutSideClickListener, a as useOutsideClick, u as useSharedOutsideClick } from './useOutsideClick-03064b05.js';
+export { u as useInitialMount, a as useUniqueId } from './useUniqueId-52f16928.js';
 import 'react';
-import './translationsContext-7867723c.js';
+import './translationsContext-6bf7e307.js';
 import 'lodash/debounce';
-import './tslib.es6-b66d75db.js';
+import './tslib.es6-f5d1f608.js';
 import './miscCookieHelper.js';
-import './index-be0a2a5d.js';
-import './Locale-b6f4abea.js';
+import './index-34c5d548.js';
+import './Locale-ade54802.js';
 import './miscGetDynamicHealthTool.js';
-import './normalizeLink-6608fe9d.js';
+import './normalizeLink-45a8d146.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './core-55b3b3b0.js';
+import './core-53b02967.js';

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-export { T as TranslationsContext } from './translationsContext-7867723c.js';
-export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-003b718a.js';
+export { T as TranslationsContext } from './translationsContext-6bf7e307.js';
+export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-2bb551a3.js';
 import 'react';
 import './i18n-values/en-PH.js';
 import './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-7867723c.js';
-export { T as TranslationsContext } from './translationsContext-7867723c.js';
+import { T as TranslationsContext } from './translationsContext-6bf7e307.js';
+export { T as TranslationsContext } from './translationsContext-6bf7e307.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/{index-cd5da166.js → index-006367e6.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.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-f36317a6.js';
+import { Z as ZINDEX_SSO } from './index-6fdf0413.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-e2949056.js → index-00eae6d6.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-409a83b1.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-3f27c2b4.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-b66d75db.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-70b6f892.js';
-import { I as Input } from './index-98006352.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-7fcb2930.js';
+import { I as Input } from './index-59e684e6.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-f36317a6.js';
-import './index-be0a2a5d.js';
-import './index-96dfb9cd.js';
-import './index-a22941c6.js';
-import './index-8eb56567.js';
-import './index-fac9ecc6.js';
-import './index-d0043174.js';
-import './index.styles-e50708f1.js';
-import './translationsContext-7867723c.js';
+import './index-6fdf0413.js';
+import './index-34c5d548.js';
+import './index-2624437b.js';
+import './index-67881d80.js';
+import './index-d3bd2909.js';
+import './index-43f1608d.js';
+import './index-6f32f7dc.js';
+import './index.styles-bd952485.js';
+import './translationsContext-6bf7e307.js';
 import '@mantine/hooks';
-import './index-a39e6bf0.js';
+import './index-e87ed093.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),

package/build/esm/{index-bb525ff2.js → index-01ef9496.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';

package/build/esm/{index-b41cb0cb.js → index-0971731a.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-409a83b1.js';
+import { M as MediaQueries } from './utils-3f27c2b4.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-73c2049e.js → index-0ae49ce8.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-8eb56567.js';
+import { T as Text } from './index-d3bd2909.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-409a83b1.js';
+import { M as MediaQueries } from './utils-3f27c2b4.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-078d463e.js';
-import { R as Radio$1 } from './index-98006352.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
-import { T as Text$1 } from './index-7f4a3be0.js';
+import { S as ShapedArrowDown } from './index-94e1fbfa.js';
+import { R as Radio$1 } from './index-59e684e6.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-f5d1f608.js';
+import { T as Text$1 } from './index-380c43b8.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-7fac5711.js';
-import { C as Close } from './Close-f6417949.js';
-import { u as useTranslations } from './index-49b79390.js';
+import { H as Heading } from './index-9163e866.js';
+import { C as Close } from './Close-c1792000.js';
+import { u as useTranslations } from './index-3027109b.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};

package/build/esm/{index-edf07f5a.js → index-0c8b94b5.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-f5d1f608.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-49b79390.js';
+import { u as useTranslations } from './index-3027109b.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-2248b725.js';
-import { L as LOCALIZED_SLUGS } from './constants-18ee7aac.js';
-import { B as Button } from './index-fac9ecc6.js';
-import './index-f36317a6.js';
-import { c as callApi, g as getCarePath } from './utils-76c91d9e.js';
+import { P as PATHS } from './paths-baffb1ff.js';
+import { L as LOCALIZED_SLUGS } from './constants-6e61809f.js';
+import { B as Button } from './index-43f1608d.js';
+import './index-6fdf0413.js';
+import { c as callApi, g as getCarePath } from './utils-17556457.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-ea10c66a.js → index-0f977d3f.js}

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

package/build/esm/{index-cd2229cc.js → index-0fb023a4.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.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-a5e4373e.js';
-import { u as useTranslations } from './index-49b79390.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-a16e91a9.js';
-import { I as Input } from './index-98006352.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-4b0cc7c4.js';
+import { u as useTranslations } from './index-3027109b.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-29e4f67a.js';
+import { I as Input } from './index-59e684e6.js';
 import '@mantine/dates';
-import './index-f36317a6.js';
-import './index-be0a2a5d.js';
-import './index-96dfb9cd.js';
-import './index-a22941c6.js';
-import { T as Text } from './index-8eb56567.js';
-import './index-fac9ecc6.js';
-import './index-d0043174.js';
-import './index.styles-e50708f1.js';
+import './index-6fdf0413.js';
+import './index-34c5d548.js';
+import './index-2624437b.js';
+import './index-67881d80.js';
+import { T as Text } from './index-d3bd2909.js';
+import './index-43f1608d.js';
+import './index-6f32f7dc.js';
+import './index.styles-bd952485.js';
 import '@mantine/hooks';
-import './utils-409a83b1.js';
-import './index-a39e6bf0.js';
-import { C as CardWrapperContext } from './context-13568ea4.js';
-import { H as HealthToolFormWrapper } from './index-fbe616df.js';
-import { I as INPUT_RANGE } from './constants-c76cd5b7.js';
+import './utils-3f27c2b4.js';
+import './index-e87ed093.js';
+import { C as CardWrapperContext } from './context-ba936f50.js';
+import { H as HealthToolFormWrapper } from './index-1f4d429d.js';
+import { I as INPUT_RANGE } from './constants-15d0ae67.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const PWGFormContext = createContext({});

package/build/esm/{index-f1c794c6.js → index-174fcd9e.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-7f4a3be0.js';
+import { T as Text } from './index-380c43b8.js';
 import classNames from 'classnames';
-import { I as ImageWrap } from './index-c95bb41b.js';
-import { T as Text$1 } from './index-8eb56567.js';
+import { I as ImageWrap } from './index-ca942ebe.js';
+import { T as Text$1 } from './index-d3bd2909.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-99397d6e.js → index-17690bea.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { L as LastPeriod } from './LastPeriod-5c80b823.js';
-import { I as Input } from './index-98006352.js';
-import { D as DatePicker } from './index-85d4d9e5.js';
-import { T as Text } from './index-8eb56567.js';
-import './index-fac9ecc6.js';
-import './index-d0043174.js';
-import './index.styles-e50708f1.js';
-import { u as useTranslations } from './index-49b79390.js';
+import { L as LastPeriod } from './LastPeriod-7181032d.js';
+import { I as Input } from './index-59e684e6.js';
+import { D as DatePicker } from './index-fb943dab.js';
+import { T as Text } from './index-d3bd2909.js';
+import './index-43f1608d.js';
+import './index-6f32f7dc.js';
+import './index.styles-bd952485.js';
+import { u as useTranslations } from './index-3027109b.js';
 import '@mantine/hooks';
-import './index-a22941c6.js';
-import './utils-409a83b1.js';
-import './index-a39e6bf0.js';
-import { C as CardWrapperContext } from './context-13568ea4.js';
-import { H as HealthToolFormWrapper } from './index-fbe616df.js';
+import './index-67881d80.js';
+import './utils-3f27c2b4.js';
+import './index-e87ed093.js';
+import { C as CardWrapperContext } from './context-ba936f50.js';
+import { H as HealthToolFormWrapper } from './index-1f4d429d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const AvoidPregnancy = (_a) => {

package/build/esm/{index-fbe616df.js → index-1f4d429d.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-8eb56567.js';
-import { B as Button } from './index-fac9ecc6.js';
-import { u as useTranslations } from './index-49b79390.js';
+import { T as Text } from './index-d3bd2909.js';
+import { B as Button } from './index-43f1608d.js';
+import { u as useTranslations } from './index-3027109b.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-35d7dd5d.js → index-21c120cf.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-b66d75db.js';
+import { _ as __rest } from './tslib.es6-f5d1f608.js';
 import React__default, { useMemo } from 'react';
 import { Spoiler as Spoiler$1 } from '@mantine/core';
-import { T as Text } from './index-8eb56567.js';
-import { u as useTranslations } from './index-49b79390.js';
+import { T as Text } from './index-d3bd2909.js';
+import { u as useTranslations } from './index-3027109b.js';
 import { theme } from './miscTheme.js';
 
 const Spoiler = (_a) => {

package/build/esm/{index-f726e7ba.js → index-21c18662.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-d8f6854d.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-f36317a6.js';
-import { N as NodeIntentType } from './index-be0a2a5d.js';
+import { c as cookie } from './index-2a241299.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-6fdf0413.js';
+import { N as NodeIntentType } from './index-34c5d548.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-bd1df7e6.js → index-2700575c.js}

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-f5d1f608.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-98006352.js';
+import { R as Radio, a as Carousel } from './index-59e684e6.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-f36317a6.js';
-import './index-be0a2a5d.js';
-import { C as CommonGAssets } from './index-96dfb9cd.js';
-import './index-a22941c6.js';
-import { T as Text } from './index-8eb56567.js';
-import { B as Button$1 } from './index-fac9ecc6.js';
-import './index-d0043174.js';
-import './index.styles-e50708f1.js';
-import './translationsContext-7867723c.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-6fdf0413.js';
+import './index-34c5d548.js';
+import { C as CommonGAssets } from './index-2624437b.js';
+import './index-67881d80.js';
+import { T as Text } from './index-d3bd2909.js';
+import { B as Button$1 } from './index-43f1608d.js';
+import './index-6f32f7dc.js';
+import './index.styles-bd952485.js';
+import './translationsContext-6bf7e307.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-409a83b1.js';
-import './index-a39e6bf0.js';
-import { i as isInternalLink } from './index-ae86b9be.js';
+import { M as MediaQueries } from './utils-3f27c2b4.js';
+import './index-e87ed093.js';
+import { i as isInternalLink } from './index-7aa79a48.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-e2949056.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-00eae6d6.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-b51b8102.js';
+import { L as Logo } from './index-c343fa42.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-7f9f2425.js';
+import { a as useOutsideClick } from './useOutsideClick-03064b05.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-0a23d5b7.js';
-import { u as useScreenSize, I as ImageWrap } from './index-c95bb41b.js';
-import { u as useTranslations } from './index-49b79390.js';
+import { B as Button } from './index-392561fa.js';
+import { u as useScreenSize, I as ImageWrap } from './index-ca942ebe.js';
+import { u as useTranslations } from './index-3027109b.js';
 import classNames from 'classnames';
-import { D as Dropdown } from './index-28bd4b07.js';
+import { D as Dropdown } from './index-97959dae.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-70b6f892.js';
-import { D as Drawer } from './index-74676b94.js';
+import { I as Input } from './index-7fcb2930.js';
+import { D as Drawer } from './index-c39bcb46.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-b6f4abea.js';
+import { L as LOCALE } from './Locale-ade54802.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-f1c794c6.js';
-import { L as Loading } from './index-8842587f.js';
+import { A as ArrowRightBlue } from './index-174fcd9e.js';
+import { L as Loading } from './index-4d75cfcc.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -5402,14 +5402,119 @@ 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) `
+  height: 100%;
+  flex: 1;
+
+  .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;
+    width: auto;
+
+    &: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 :