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

package/build/esm/{index-f8e0219d.js → index-7eb25449.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-a8899474.js';
 import React__default, { useMemo, useEffect, useContext, useState, useRef, useCallback } from 'react';
-import { i as isInternalLink, L as LanguageSwitcher } from './index-638cd733.js';
-import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-c673db76.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-4b5bf175.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-9db75e68.js';
-import { Download } from '@hhgtech/icons/core';
+import { i as isInternalLink, L as LanguageSwitcher } from './index-819907ad.js';
+import { a as CARE_LOCALES, b as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, S as STATIC_PAGES, L as LOCALE_SPECS } from './index-057f2d1e.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, n as normalizeLink, e as normalizeLinkSlash, d as getCareApiDomain } from './normalizeLink-5aca6bda.js';
+import { a as formatCommunity, b as formatPost } from './dataTransform-04bb1b6b.js';
+import { Close, Download } from '@hhgtech/icons/core';
 import { createStyles, Box, Indicator, useMantineTheme } from '@mantine/core';
-import { L as Logo } from './index-31369166.js';
-import { u as useTranslations } from './index-c244d627.js';
+import { L as Logo } from './index-9927839b.js';
+import { u as useTranslations } from './index-8ca04504.js';
 import throttle from 'lodash/throttle';
-import { I as Input } from './index-de634c83.js';
+import { I as Input } from './index-a595566d.js';
 import '@mantine/dates';
-import './index-d5632995.js';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
-import './useMantineLocale-fbe0d85f.js';
-import { T as Text } from './index-1898da73.js';
-import { B as Button$1 } from './index-1238c5b2.js';
-import './index.styles-c8f0bcdf.js';
-import './translationsContext-842b9deb.js';
+import './index-afea9eed.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
+import './useMantineLocale-897de7b5.js';
+import { T as Text } from './index-6d78a8a7.js';
+import { B as Button$1 } from './index-0756189f.js';
+import './index.styles-eab929da.js';
+import './translationsContext-b0754e46.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-45fdcf7b.js';
-import './other-b2d9a044.js';
-import './index-72976151.js';
-import { L as LOCALISED_SLUGS } from './constants-dfbb02bb.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-bc4ce115.js';
+import './other-6a7e1e43.js';
+import './index-78b6be16.js';
+import { L as LOCALISED_SLUGS } from './constants-9bf6d063.js';
 import styled from '@emotion/styled';
-import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-6231daa6.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-7c55f360.js';
-import { B as Button } from './index-59e6c9c3.js';
-import { i as domainLocalesMarryBaby } from './utils-a30adc88.js';
+import { u as useCSSFocusPopupHelper, N as NavigationProfileButton } from './index-4586a7e6.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-f24285e6.js';
+import { B as Button } from './index-f993926f.js';
+import { i as domainLocalesMarryBaby } from './utils-d7a79b14.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as LOCALIZED_SLUGS } from './constants-4c555a78.js';
+import { L as LOCALIZED_SLUGS } from './constants-78902e5d.js';
 import { theme } from './miscTheme.js';
-import { H as Heading } from './index-43894578.js';
-import { I as Indicator$1 } from './index-63354509.js';
-import { u as useIsInit } from './useIsInit-5732296a.js';
+import { H as Heading } from './index-55d2ff10.js';
+import { I as Indicator$1 } from './index-85fddfd7.js';
+import { u as useIsInit } from './useIsInit-65199c88.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-85fe2034.js';
+import { U as UserAvatar } from './index-38d50b59.js';
 import { ArrowRight } from '@hhgtech/icons/other';
 import formatString from 'string-format';
-import { C as Container } from './index-5ae6e655.js';
-import { L as LOCALE } from './Locale-ca77b0a8.js';
+import { C as Container } from './index-c512146f.js';
+import { L as LOCALE } from './Locale-e3bf3674.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-4744f6f3.js';
+import { g as getDataWithCache } from './core-56a5f8a1.js';
 
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
@@ -75,14 +75,6 @@ const CartBadge = (_a) => {
 };
 
 const StyledDisplayWrapper = styled.div `
-  ${(props) => `
-    ${props.lowerBound !== 0
-    ? `@media (max-width: ${props.lowerBound - 1}px) { display: none; }`
-    : ''}
-    ${props.upperBound !== 0
-    ? `@media (min-width: ${props.upperBound}px) { display: none; }`
-    : ''}
-  `}
   &.block-show {
     display: block;
   }
@@ -1677,9 +1669,9 @@ const StyledRightGroup = styled.div `
   align-items: center;
   height: 100%;
   flex-shrink: 0;
-  /* gap: 16px; */
   ${MediaQueries.tdDown} {
     flex-shrink: 0.6;
+    gap: 10px;
   }
   .hhgcomp-navigation-itemnav-headeritem {
     gap: 2px;
@@ -2061,7 +2053,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                import('./doctor-fa923c90.js').then((data) => {
+                import('./doctor-69b1c79d.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2129,6 +2121,17 @@ const StyleInput = styled(Input) `
     }
   }
 
+  .close-icon-wrapper {
+    display: flex;
+    background-color: ${theme.colors.gray400};
+    border-radius: 100%;
+    cursor: pointer;
+
+    svg {
+      pointer-events: none;
+    }
+  }
+
   .search-icon-btn {
     display: flex;
     justify-content: center;
@@ -2159,7 +2162,7 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
         React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
                 verticalAlign: 'bottom',
             } },
-            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", placeholder: siteType === 'marryBaby'
+            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default.createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": "Search Page", "data-event-action": "Search", "data-event-label": keyword, placeholder: siteType === 'marryBaby'
             ? t('navigation.search.input.placeholder')
             : t('home.search', {
                 site: LOCALE_SPECS[locale || 'en-PH']
@@ -2171,7 +2174,8 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
             if (isMobile && isHomepage) {
                 goToSearchPage('');
             }
-        }, icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+        }, rightSection: keyword ? (React__default.createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
+            React__default.createElement(Close, { size: 17, color: theme.colors.white }))) : (''), icon: React__default.createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
                 if (isMobile && isHomepage) {
                     goToSearchPage('');
                 }
@@ -2269,7 +2273,9 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                 !isMobile && (React__default.createElement(React__default.Fragment, null, siteType === 'marryBaby' ? (React__default.createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             React__default.createElement(StyledRightGroup, { "data-site-type": siteType },
                 !isMobile && siteType !== 'marryBaby' && (React__default.createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
-                (isMobile || siteType === 'marryBaby') && enableSearchBar && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
+                (isMobile || siteType === 'marryBaby') &&
+                    enableSearchBar &&
+                    !isHomepage && (React__default.createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
                 React__default.createElement(StyledProfileNavGroup, null,
                     !isMobile && (React__default.createElement(React__default.Fragment, null,
                         ecomNavItem ? (React__default.createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : null,

package/build/esm/{index-638cd733.js → index-819907ad.js}

@@ -1,9 +1,9 @@
 import React__default, { useState } from 'react';
-import { F as Flag } from './index-de634c83.js';
+import { F as Flag } from './index-a595566d.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-1898da73.js';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
+import { T as Text } from './index-6d78a8a7.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',

package/build/esm/{index-63354509.js → index-85fddfd7.js}

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

package/build/esm/{index-c244d627.js → index-8ca04504.js}

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

package/build/esm/{index-c027fd0f.js → index-8f2e9737.js}

@@ -1,20 +1,20 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme, Flex, rem, Box, createStyles } from '@mantine/core';
-import { t as themeColors } from './index-de634c83.js';
+import { t as themeColors } from './index-a595566d.js';
 import '@mantine/dates';
-import './index-c673db76.js';
-import './index-d5632995.js';
-import './index-f2dcdbdd.js';
-import './useMantineLocale-fbe0d85f.js';
-import { T as Text } from './index-1898da73.js';
-import './index-1238c5b2.js';
-import './index.styles-c8f0bcdf.js';
-import { u as useTranslations } from './index-c244d627.js';
+import './index-057f2d1e.js';
+import './index-afea9eed.js';
+import './index-1127f8ba.js';
+import './useMantineLocale-897de7b5.js';
+import { T as Text } from './index-6d78a8a7.js';
+import './index-0756189f.js';
+import './index.styles-eab929da.js';
+import { u as useTranslations } from './index-8ca04504.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-45fdcf7b.js';
-import './other-b2d9a044.js';
-import './index-72976151.js';
+import { M as MediaQueries } from './utils-bc4ce115.js';
+import './other-6a7e1e43.js';
+import './index-78b6be16.js';
 import styled from '@emotion/styled';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-980ec7b9.js → index-8f716c39.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { a as useStyles } from './index.styles-c8f0bcdf.js';
+import { u as useStyles } from './index.styles-eab929da.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-12fa6251.js → index-9711efd0.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.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-1898da73.js';
-import { B as Button } from './index-1238c5b2.js';
-import { u as useTranslations } from './index-c244d627.js';
+import { T as Text } from './index-6d78a8a7.js';
+import { B as Button } from './index-0756189f.js';
+import { u as useTranslations } from './index-8ca04504.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-5f0e8146.js → index-98c3fc54.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-a064e7e2.js';
-import { u as useTranslations } from './index-c244d627.js';
+import { I as Icon } from './index-c196772c.js';
+import { u as useTranslations } from './index-8ca04504.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-31369166.js → index-9927839b.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-ca77b0a8.js';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
+import { L as LOCALE } from './Locale-e3bf3674.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-45fdcf7b.js';
-import { L as LogoIcon } from './logoIcon-ba7fdeb5.js';
-import './index-d5632995.js';
-import { I as ImageWrap } from './index-e09202bf.js';
+import { M as MediaQueries } from './utils-bc4ce115.js';
+import { L as LogoIcon } from './logoIcon-5aa1e54b.js';
+import './index-afea9eed.js';
+import { I as ImageWrap } from './useScreenSize-72a6e414.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/{index-1d13b259.js → index-a2d9e627.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest } from './tslib.es6-a8899474.js';
 import React__default, { useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-45fdcf7b.js';
+import { M as MediaQueries } from './utils-bc4ce115.js';
 import { theme } from './miscTheme.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-64ceb47f.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-d63e0760.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-de634c83.js → index-a595566d.js}

@@ -1,24 +1,23 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-1ac4ffe8.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-a8899474.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 { em, Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, Popover as Popover$1, rem, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-f2dcdbdd.js';
-import { u as useScreenSize } from './index.styles-c8f0bcdf.js';
+import { C as CommonGAssets } from './index-1127f8ba.js';
+import { I as ImageWrap, u as useScreenSize } from './useScreenSize-72a6e414.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-1898da73.js';
-import './index-d5632995.js';
+import { T as Text } from './index-6d78a8a7.js';
+import './index-afea9eed.js';
 import { theme } from './miscTheme.js';
-import { B as Breakpoints } from './utils-45fdcf7b.js';
-import { G as GlobalHeadingStyle } from './useMantineLocale-fbe0d85f.js';
-import { I as ISO_FORMAT } from './index-c673db76.js';
-import { A as ANIMATION_DURATION, B as Button } from './index-1238c5b2.js';
-import { L as LOCALE } from './Locale-ca77b0a8.js';
-import { I as ImageWrap } from './index-e09202bf.js';
+import { B as Breakpoints } from './utils-bc4ce115.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-897de7b5.js';
+import { I as ISO_FORMAT } from './index-057f2d1e.js';
+import { A as ANIMATION_DURATION, B as Button } from './index-0756189f.js';
+import { L as LOCALE } from './Locale-e3bf3674.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-1ae14697.js';
+import { a as useUniqueId } from './useUniqueId-f3f12863.js';
 import { siteOptions } from './constantsSite.js';
 import { Check, Plus } from '@hhgtech/icons/core';