@hhgtech/hhg-components
Version:
Hello Health Group common components
1,101 lines (1,044 loc) • 190 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var SiteWideBanner = require('./SiteWideBanner-ccc9cb23.js');
var index$2 = require('./index-ec32050c.js');
var normalizeLink = require('./normalizeLink-90691beb.js');
var dataTransform = require('./dataTransform-08579af5.js');
var core = require('@hhgtech/icons/core');
var index = require('./index-3424862e.js');
require('./translationsContext-4698cb34.js');
var Locale = require('./Locale-eb0da538.js');
var react = require('@emotion/react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var navigationProfileButton = require('./index-a7e2e6c6.js');
var other = require('@hhgtech/icons/other');
var core$1 = require('@mantine/core');
var index$c = require('./index-862280f6.js');
var throttle = require('lodash/throttle');
require('@mantine/dates');
var index$b = require('./index-0a047edc.js');
var index$6 = require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$4 = require('./index-d4ad3f79.js');
var index$3 = require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
require('@mantine/hooks');
var utils = require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var constants = require('./constants-5c1778c7.js');
var store = require('./store-bc8408a1.js');
var constants$3 = require('./constants-817a109a.js');
var index$5 = require('./index-3f444624.js');
var index$1 = require('./index-2b476eb9.js');
var useCartCareService = require('./useCartCareService-ecbeab28.js');
var constants$1 = require('./constants-961f54ac.js');
var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
var index$7 = require('./index-0cd89d0b.js');
var index$8 = require('./index-e13a0e39.js');
var utils$1 = require('./utils-c34df6dd.js');
var index$9 = require('./index-92dad635.js');
var dayjs = require('dayjs');
var relativeTime = require('dayjs/plugin/relativeTime');
var index$a = require('./index-0b6d8e82.js');
var get = require('lodash/get');
var constants$2 = require('./constants-b53fd629.js');
var isEmpty = require('lodash/isEmpty');
var index$d = require('./index-66e36e3e.js');
var debounce = require('lodash/debounce');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var core$2 = require('./core-8591d263.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var relativeTime__default = /*#__PURE__*/_interopDefault(relativeTime);
var get__default = /*#__PURE__*/_interopDefault(get);
var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
const HamburgerWhite = (props) => (React__namespace.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__namespace.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M4 7H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__namespace.createElement("path", { d: "M4 17H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
const StarPair = (props) => (React__namespace.createElement("svg", Object.assign({ width: "22", height: "28", viewBox: "0 0 22 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
React__namespace.createElement("path", { d: "M6.35278 10.7516C6.42759 10.976 6.63881 11.1279 6.87534 11.1279C7.11187 11.1279 7.322 10.976 7.39791 10.7516C7.68947 9.87691 8.37585 9.19053 9.25054 8.89896C9.47497 8.82415 9.62679 8.61403 9.62679 8.3775C9.62679 8.14097 9.47497 7.93084 9.25054 7.85603C8.37585 7.56446 7.68947 6.87809 7.39791 6.00339C7.24719 5.55453 6.5046 5.55453 6.35388 6.00339C6.06231 6.87809 5.37594 7.56446 4.50125 7.85603C4.27682 7.93084 4.125 8.14097 4.125 8.3775C4.125 8.61403 4.27682 8.82415 4.50125 8.89896C5.37565 9.19043 6.06193 9.87699 6.35278 10.7516Z", fill: "#2743AD" }),
React__namespace.createElement("path", { d: "M20.1723 14.3286L18.5342 13.6789C16.821 12.9995 15.4655 11.6411 14.7897 9.92641L14.1396 8.27697C13.9232 7.72994 13.0262 7.72994 12.8097 8.27697L12.1597 9.92641C11.4839 11.6411 10.1284 12.9995 8.41517 13.6789L6.77705 14.3286C6.5044 14.4367 6.32422 14.7016 6.32422 14.9952C6.32422 15.2888 6.50345 15.5537 6.77705 15.6618L8.41517 16.3115C10.1284 16.991 11.4839 18.3494 12.1597 20.064L12.8097 21.7135C12.9175 21.987 13.1815 22.1668 13.4742 22.1668C13.7669 22.1668 14.031 21.987 14.1387 21.7135L14.7888 20.064C15.4646 18.3494 16.8201 16.991 18.5333 16.3115L20.1714 15.6618C20.444 15.5537 20.6242 15.2888 20.6242 14.9952C20.6242 14.7016 20.4459 14.4367 20.1723 14.3286Z", fill: "#2743AD" })));
const ALLOW_SHOW_SEARCH_ANIMATION = [Locale.LOCALE.Vietnam, Locale.LOCALE.Malaysia];
const TEXT_PLACEHOLDER_INPUT = {
[Locale.LOCALE.Vietnam]: [
'navigation.search.input.placeholder.animation.authenticProducts',
'navigation.search.input.placeholder.animation.findNearestClinic',
'navigation.search.input.placeholder.animation.reputableFacilities',
'navigation.search.input.placeholder.animation.fullRefundWithin10DayCancellation',
'navigation.search.input.placeholder.animation.freeDoctorConsultation',
],
[Locale.LOCALE.Malaysia]: [
'navigation.search.input.placeholder.animation.authenticProducts',
'navigation.search.input.placeholder.animation.findNearestClinic',
'navigation.search.input.placeholder.animation.reputableFacilities',
'navigation.search.input.placeholder.animation.freeConsultation',
'navigation.search.input.placeholder.animation.chatWithDoctorOnPlatform',
],
};
const TIME_ANIMATION_SEARCH_INPUT = 5000;
const TIME_ANIMATION_SEARCH_INPUT_DELAY = TIME_ANIMATION_SEARCH_INPUT - 2000;
const StyleInput = styled__default["default"](index.Input) `
position: relative;
z-index: 0;
.mantine-Input-input {
border-radius: 40px;
background: ${miscTheme.theme.colors.white};
border: 1px solid ${miscTheme.theme.colors.blue200};
&:focus {
border: 1px solid ${miscTheme.theme.colors.primaryBase};
}
}
.close-icon-wrapper {
display: flex;
background-color: ${miscTheme.theme.colors.gray400};
border-radius: 100%;
cursor: pointer;
svg {
pointer-events: none;
}
}
.search-icon-btn {
display: flex;
justify-content: center;
align-items: center;
}
`;
const StyleSearchInputAnimationWrapper = styled__default["default"].div `
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
& > * {
pointer-events: none;
}
&[hidden='true'] {
display: none;
}
&[hidden='false'] {
display: block;
}
`;
const textRevealAnimation = react.keyframes `
0% {
left: 0;
}
100% {
left: 100%;
}
`;
const StyledTextAnimationWrapper = styled__default["default"].div `
position: absolute;
top: 50%;
left: 0;
transform: translate(42px, -50%);
width: calc(
100% - 42px - 42px
); // minus the left and right padding of the input
`;
const StyleSearchInputWrapper = styled__default["default"].div `
position: relative;
`;
const StyledTextAnimation = styled__default["default"].p `
font-size: 13px;
color: ${miscTheme.theme.colors.gray400};
line-height: 20px;
letter-spacing: -0.3px;
font-weight: 500;
position: relative;
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
&::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background-color: ${miscTheme.theme.colors.white};
animation: ${textRevealAnimation} ${TIME_ANIMATION_SEARCH_INPUT_DELAY}ms
linear forwards;
}
`;
const HHG_SEARCH_BACK_KEY = 'hhg_search_history';
const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, isRedirectSearchPage = false, }) => {
const { locale, siteType, isWinCashBackTheme: winCashBackTheme, } = React.useContext(navigationProfileButton.NavigationContext);
const [keyword, setKeyword] = React.useState('');
const [isFocused, setIsFocused] = React.useState(false);
const [eventCategoryTracking, setEventCategoryTracking] = React.useState('Search From Another Page');
const [currentTextIndex, setCurrentTextIndex] = React.useState(0);
const { t } = index$1.useTranslations();
const goToSearchPage = React.useCallback((searchValue = '') => {
let sourceParam = '';
if (projectType === 'together') {
sourceParam = 'community';
}
if (projectType === 'discover') {
if (window.location.pathname.startsWith('/health-tools/')) {
sourceParam = 'health-tools';
}
else {
sourceParam = projectType;
}
}
localStorage.setItem(HHG_SEARCH_BACK_KEY, window.location.href);
const searchParams = new URLSearchParams(window.location.search);
searchParams.set('source', sourceParam);
searchParams.set('s', searchValue);
searchParams.delete('page');
window.location.href = `/search/?${searchParams.toString()}`;
}, [projectType]);
const debouncedTime = React.useMemo(() => {
return ALLOW_SHOW_SEARCH_ANIMATION.includes(locale)
? 0
: index.DEBOUNCED_TIME;
}, [locale]);
const goBack = React.useCallback(() => {
const historyBackUrl = localStorage.getItem(HHG_SEARCH_BACK_KEY);
if (!historyBackUrl) {
goToSearchPage('');
return;
}
localStorage.removeItem(HHG_SEARCH_BACK_KEY);
window.location.href = historyBackUrl;
}, [goToSearchPage]);
React.useEffect(() => {
if (typeof window !== 'undefined') {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const searchValue = params.get('s');
if (projectType === 'discover' &&
window.location.pathname.startsWith('/search/')) {
setEventCategoryTracking('Search Page');
}
setKeyword(searchValue);
}
}, []);
React.useEffect(() => {
if (!keyword && ALLOW_SHOW_SEARCH_ANIMATION.includes(locale)) {
const texts = TEXT_PLACEHOLDER_INPUT[locale];
if (texts && texts.length > 0) {
setCurrentTextIndex(0);
const interval = setInterval(() => {
setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);
}, TIME_ANIMATION_SEARCH_INPUT);
return () => clearInterval(interval);
}
}
else {
setCurrentTextIndex(0);
}
}, [keyword, locale, isFocused]);
const getPlaceholder = React.useMemo(() => {
if (ALLOW_SHOW_SEARCH_ANIMATION.includes(locale) && !isFocused) {
return undefined;
}
if (siteType === 'marryBaby') {
return t('navigation.search.input.placeholder');
}
return t('home.search', {
site: index$2.LOCALE_SPECS[locale || 'en-PH']
? index$2.LOCALE_SPECS[locale || 'en-PH'].SITE_NAME
: '',
});
}, [locale, siteType, t, isFocused]);
return isMobile && !isHomepage ? (React__namespace["default"].createElement(index$3.Button, { variant: "tertiary", style: {
padding: '6px',
}, size: "sm", onClick: goBack },
React__namespace["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__namespace["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__namespace["default"].createElement(StyleSearchInputWrapper, null,
React__namespace["default"].createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": eventCategoryTracking, "data-event-action": "Search", "data-event-label": keyword, placeholder: getPlaceholder, onChange: setKeyword, debouncedTime: debouncedTime, value: keyword, onKeyDown: (e) => e.key === 'Enter' &&
goToSearchPage(e.target.value), onBlur: () => {
setIsFocused(false);
setCurrentTextIndex(0);
}, type: "search", onFocus: (e) => {
e.preventDefault();
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
setIsFocused(true);
}, rightSection: keyword ? (React__namespace["default"].createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
React__namespace["default"].createElement(core.Close, { size: 17, color: miscTheme.theme.colors.white }))) : winCashBackTheme ? (React__namespace["default"].createElement(StarPair, { className: "star-pair-icon" })) : (''), icon: React__namespace["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
if ((isMobile && isHomepage) || isRedirectSearchPage) {
goToSearchPage('');
}
} },
React__namespace["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__namespace["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" }))) }),
!keyword &&
ALLOW_SHOW_SEARCH_ANIMATION.includes(locale) &&
!isFocused && (React__namespace["default"].createElement(StyleSearchInputAnimationWrapper, { id: "search-input-animation-wrapper", "data-search-animation-wrapper": true }, (() => {
const texts = TEXT_PLACEHOLDER_INPUT[locale];
const currentText = texts === null || texts === void 0 ? void 0 : texts[currentTextIndex];
return currentText ? (React__namespace["default"].createElement(StyledTextAnimationWrapper, { key: `${currentText}-${currentTextIndex}` },
React__namespace["default"].createElement(StyledTextAnimation, null, t(currentText)))) : null;
})()))));
};
const getEcomUrl = ({ path, locale, }) => {
var _a;
return `/shop/${(_a = constants.LOCALISED_SLUGS[locale || 'vi-VN']) === null || _a === void 0 ? void 0 : _a[path]}/`;
};
var useStyles = core$1.createStyles(() => {
return {
root: {
textDecoration: 'none',
},
iconText: {
color: '#fff',
},
};
});
const CartBadge = (_a) => {
var { count, styles, className, classNames, locale } = _a, boxProps = tslib_es6.__rest(_a, ["count", "styles", "className", "classNames", "locale"]);
const { classes, cx } = useStyles(undefined, {
name: 'CartBadge',
styles,
classNames,
});
return typeof count !== 'undefined' ? (React__namespace["default"].createElement(core$1.Box, Object.assign({ component: "a", href: getEcomUrl({ path: 'CART', locale }), className: cx(classes.root, className) }, boxProps),
React__namespace["default"].createElement(core$1.Indicator, { withBorder: true, color: 'red', size: 20, disabled: count === 0, label: React__namespace["default"].createElement(index$4.Text, { className: classes.iconText, size: "s5" }, count > 99 ? '99+' : count) },
React__namespace["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__namespace["default"].createElement("path", { d: "M5.308 21.5q-.748 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278V8.308q0-.75.53-1.278.53-.53 1.278-.53H7.5q0-1.873 1.313-3.187Q10.127 2 12 2t3.187 1.313T16.5 6.5h2.192q.749 0 1.278.53.53.53.53 1.278v11.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h13.384a.3.3 0 0 0 .212-.096.3.3 0 0 0 .096-.212V8.308a.3.3 0 0 0-.096-.212.3.3 0 0 0-.212-.096H5.308a.3.3 0 0 0-.212.096.3.3 0 0 0-.096.212v11.384q0 .116.096.212a.3.3 0 0 0 .212.096M9 6.5h6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5m2.985 7q1.695 0 3.047-1.148 1.35-1.148 1.335-2.606a.74.74 0 0 0-.207-.528.7.7 0 0 0-.527-.218.7.7 0 0 0-.471.182 1 1 0 0 0-.295.506 2.8 2.8 0 0 1-1.036 1.665 2.9 2.9 0 0 1-1.846.647 2.93 2.93 0 0 1-1.854-.647A2.73 2.73 0 0 1 9.1 9.688q-.086-.34-.278-.514A.66.66 0 0 0 8.367 9a.72.72 0 0 0-.534.218.72.72 0 0 0-.216.528q0 1.457 1.336 2.606 1.335 1.148 3.032 1.148", fill: "#2D87F3" }))))) : null;
};
const StyledDisplayWrapper = styled__default["default"].div `
&.block-show {
display: block;
}
`;
const DisplayWrapper = ({ forceDisplay, mediaQueryKey, children, className, style, }) => {
// use CSS to display or not
const [lowerBoundValue, upperBoundValue] = React.useMemo(() => utils.getBoundariesFromMediaQueryKey(mediaQueryKey), [mediaQueryKey]);
return (React__namespace["default"].createElement(StyledDisplayWrapper, { lowerBound: forceDisplay ? 0 : lowerBoundValue, upperBound: forceDisplay ? 0 : upperBoundValue, className: className, style: style }, children));
};
var styles$2 = {"menuIconWrapper":"wnUb-dV","menuButton":"cjbOxWe","itemNavButton":"-sx0jrx","scale":"EDlp5Zf"};
const ItemMenu = ({ item, menu }) => {
const { containerRef, onButtonMouseDown, onClose } = navigationProfileButton.useCSSFocusPopupHelper({
allowBgScroll: true,
});
const isInit = useCartCareService.useIsInit();
if (!item.popupType && item.link) {
return (React__namespace["default"].createElement(NewWrapper, { isNew: item.isNew },
React__namespace["default"].createElement("a", { className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__namespace["default"].createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$2.menuButton }, item.name))));
}
return (React__namespace["default"].createElement(NewWrapper, { isNew: item.isNew },
React__namespace["default"].createElement("div", { ref: containerRef, className: `hhgcomp-navigation-itemnav-headeritem ${!isInit ? `menu-handler-${item.id}` : ''}`, tabIndex: 0, key: item.id, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link },
React__namespace["default"].createElement("div", { "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, onMouseDown: onButtonMouseDown, className: styles$2.menuButton },
item.name,
item.popupType && (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, (item === null || item === void 0 ? void 0 : item.icon) ? (React__namespace["default"].createElement("div", { className: "wrapper-menu-icon" },
React__namespace["default"].createElement("div", { className: "origin-icon" }, item.icon),
React__namespace["default"].createElement("div", { className: "close-icon", onClick: onClose },
React__namespace["default"].createElement(core.Close, { size: 16 })))) : (React__namespace["default"].createElement("div", { className: styles$2.menuIconWrapper },
React__namespace["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
React__namespace["default"].createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }))))))),
React__namespace["default"].isValidElement(menu)
? React__namespace["default"].cloneElement(menu, {
onClose,
})
: null)));
};
const NewWrapper = ({ isNew, children, }) => {
const { t } = index$1.useTranslations();
if (isNew) {
return (React__namespace["default"].createElement(index$5.Indicator, { color: "green", label: t('home.navigator.menuItem.new'), size: 20, styles: {
root: {
paddingRight: 10,
},
} }, children));
}
return React__namespace["default"].createElement(React__namespace["default"].Fragment, null, children);
};
const StyledContainerItems$5 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 3.5rem;
${utils.MediaQueries.tdDown} {
grid-template-columns: repeat(1, 1fr);
}
`;
const StyledImageCard$3 = styled__default["default"].div `
height: 152px;
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: hidden;
border-radius: 4px;
padding: 16px;
width: 100%;
.img-container {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
${utils.MediaQueries.tdDown} {
margin-bottom: 0;
padding: 0;
height: 100%;
position: unset;
width: 150px;
}
${utils.MediaQueries.mbDown} {
width: 80px;
}
`;
const StyledImageCardInner = styled__default["default"].div `
background-color: #ffffff;
border-radius: 4px;
width: 100%;
height: 100%;
`;
const StyledBtnView$2 = styled__default["default"].div `
display: flex;
margin-top: 1rem;
align-items: center;
color: ${miscTheme.theme.colors.primaryBase};
font-weight: 400;
font-size: 14px;
text-decoration: none;
${utils.MediaQueries.tdDown} {
display: none;
}
`;
const StyledTitle$5 = styled__default["default"].p `
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: ${miscTheme.theme.colors.gray800};
${utils.MediaQueries.tdDown} {
padding: 0;
}
`;
const StyledDes$2 = styled__default["default"].p `
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: ${miscTheme.theme.colors.gray600};
height: 40px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: auto;
${utils.MediaQueries.tdDown} {
height: unset;
padding: 0;
}
`;
const StyledContentWrapper$2 = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
z-index: 1;
${utils.MediaQueries.tdDown} {
gap: 4px;
}
`, 'hhgcomp-navigation-menucareitem-contentwrapper');
const StyledItem$6 = styled__default["default"].a `
text-decoration: none;
border-radius: 4px;
background: ${miscTheme.theme.colors.white};
position: relative;
overflow: hidden;
padding: 16px;
display: flex;
padding-top: 166px;
* {
pointer-events: none;
}
${utils.MediaQueries.tdUp} {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06),
0px 0px 1px rgba(0, 0, 0, 0.04);
gap: 30px;
flex-direction: column;
a {
display: flex;
width: 100%;
}
}
${utils.MediaQueries.tdDown} {
padding-top: 16px;
a {
display: none;
}
grid-template-columns: 2fr 1fr;
gap: 10px;
display: grid;
max-height: 110px;
display: flex;
flex-direction: row-reverse;
> ${StyledContentWrapper$2.classSelector} {
flex: 1;
}
img {
width: 150px;
}
}
${utils.MediaQueries.mbDown} {
box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04),
0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: row-reverse;
img {
width: 80px;
height: 80px;
}
}
${utils.MediaQueries.tdOnly} {
border: 1px solid ${miscTheme.theme.colors.neutral100};
}
.bg-svg {
width: 100%;
max-width: 245px;
height: 100%;
top: 0;
right: -40px;
position: absolute;
display: inline-block;
}
`;
const Item$4 = ({ item, index = 0 }) => {
var _a;
const { t } = index$1.useTranslations();
const { locale, configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
if (!item)
return null;
const href = `${statics.CARE_URL_FE}/${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.HOSPITAL}/${item.slug}-${item.id}`;
return (React__namespace["default"].createElement(StyledItem$6, { key: item.id, href: href, "data-event-category": "Hamburger Navigation", "data-event-action": `Care Click ${index + 1}`, "data-event-label": href },
React__namespace["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('navCareCardBg.svg'), alt: "", className: "bg-svg", loading: "lazy" }),
React__namespace["default"].createElement(StyledImageCard$3, null,
React__namespace["default"].createElement(StyledImageCardInner, null,
React__namespace["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.logo || '/images/avatar.jpg' }))),
React__namespace["default"].createElement(StyledContentWrapper$2, null,
React__namespace["default"].createElement(StyledTitle$5, null, item.name),
React__namespace["default"].createElement(StyledDes$2, null, item.description),
React__namespace["default"].createElement(StyledBtnView$2, null,
t('home.seeMore'),
React__namespace["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: {
width: '16px',
height: '16px',
marginTop: '3px',
marginLeft: '5px',
}, loading: "lazy" })))));
};
const StyledContainerNoPosts = styled__default["default"].div `
padding: 16px;
border-radius: 8px;
position: relative;
z-index: 1;
overflow: hidden;
a {
text-decoration: none;
}
.bg-svg {
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
${utils.MediaQueries.mbDown} {
display: block;
.bg-svg {
right: -24px;
left: unset;
top: 0;
transform: rotateY(180deg);
}
}
${utils.MediaQueries.mbUp} {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 3fr;
}
`;
const StyledDescription = styled__default["default"].div `
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: ${miscTheme.theme.colors.gray600};
margin-bottom: 15px;
`;
const StyledTitle$4 = styled__default["default"].div `
font-weight: 600;
font-size: 16px;
line-height: 26px;
color: #000000;
margin-bottom: 4px;
`;
const StyledContentLeft = styled__default["default"].div `
background: #fff;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
`;
const StyledLeft = styled__default["default"].div `
display: flex;
justify-content: center;
align-items: center;
position: relative;
${utils.MediaQueries.mbDown} {
justify-content: end;
min-height: 100px;
}
`;
const SpotlightNoData = ({ title, link, description, cta, icon }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__namespace["default"].createElement(StyledContainerNoPosts, { "data-theme": siteType },
React__namespace["default"].createElement(StyledLeft, null,
React__namespace["default"].createElement("img", { src: siteType === 'marryBaby'
? index$6.CommonGAssets.getAssetPath('navMBSpotlightBgNoData.svg')
: index$6.CommonGAssets.getAssetPath('navSpotlightBgNoData.svg'), alt: "", loading: "lazy", className: "bg-svg" }),
React__namespace["default"].createElement(StyledContentLeft, null, icon && React__namespace["default"].createElement("img", { src: icon, width: 64, height: 64, loading: "lazy" }))),
React__namespace["default"].createElement("div", null,
title && React__namespace["default"].createElement(StyledTitle$4, null, title),
description && React__namespace["default"].createElement(StyledDescription, null, description),
cta && (React__namespace["default"].createElement("div", null,
React__namespace["default"].createElement("a", { href: link },
React__namespace["default"].createElement(index$7.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, cta)))))));
};
const StyledItemGridRight = styled__default["default"].div `
margin-top: 10px;
background: #ffffff;
padding: 5px 15px;
position: relative;
${utils.MediaQueries.mbDown} {
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: ${miscTheme.theme.colors.neutral100};
content: '';
}
}
`;
const StyledHeading$1 = styled__default["default"].div `
margin: 15px 0;
display: flex;
`;
const StyledViewMore$1 = styled__default["default"].a `
padding-left: 10px;
display: flex;
align-items: center;
text-decoration: none;
font-weight: 400;
font-size: 14px;
color: ${miscTheme.theme.colors.primaryBase};
&[data-theme='marryBaby'] {
color: ${miscTheme.theme.mbColors.pink};
}
img {
padding-left: 5px;
}
${utils.MediaQueries.mbDown} {
margin-left: auto;
}
`;
const Spotlights = ({ title, viewMore, children, link, dataEventAction = '', }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__namespace["default"].createElement(StyledItemGridRight, null,
React__namespace["default"].createElement(StyledHeading$1, null,
React__namespace["default"].createElement(index$8.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, title),
viewMore && (React__namespace["default"].createElement(StyledViewMore$1, { "data-event-category": "Hamburger Navigation", "data-event-action": dataEventAction, "data-event-label": link, href: link, "data-theme": siteType },
viewMore,
React__namespace["default"].createElement("img", { src: siteType === 'marryBaby'
? index$6.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$6.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))),
children));
};
const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
const { t } = index$1.useTranslations();
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__namespace["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightHospitals') }, spotlights.length !== 0 ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
React__namespace["default"].createElement(StyledContainerItems$5, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__namespace["default"].createElement(Item$4, { key: index, index: index, item: s })))),
React__namespace["default"].createElement("div", { style: {
position: 'absolute',
bottom: '6px',
right: '1rem',
} },
React__namespace["default"].createElement("a", { href: hrefViewMore },
React__namespace["default"].createElement(index$7.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__namespace["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: index$6.CommonGAssets.getAssetPath('community.svg') }))));
};
var styles$1 = {"gridContainer":"q3nL5cp","container":"_2DNf80G","closeWrapper":"Q-glX-n"};
const BtnClosePopup = ({ onClosePopup }) => {
return (React__namespace["default"].createElement("div", { className: `${styles$1.closeWrapper} close-btn`, onClick: onClosePopup },
React__namespace["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__namespace["default"].createElement("path", { d: "M18 6L6 18M18 18L6 6", stroke: "#3E3F58", strokeWidth: "1.3", strokeLinecap: "round" }))));
};
const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, stylesContainer, }) => {
return (React__namespace["default"].createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
React__namespace["default"].createElement(index$9.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
!hideCloseBtn && (React__namespace["default"].createElement("div", { className: styles$1.container },
React__namespace["default"].createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
React__namespace["default"].createElement(index$9.Container, { className: styles$1.gridContainer, style: stylesContainer }, children))));
};
const Phone = (_a) => {
var { size = 24, color = miscTheme.theme.colors.neutral600 } = _a, rest = tslib_es6.__rest(_a, ["size", "color"]);
return (React__namespace["default"].createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
React__namespace["default"].createElement("path", { d: "M6.088 18.75q-.63 0-1.068-.437a1.45 1.45 0 0 1-.438-1.07V2.757q0-.63.438-1.068a1.45 1.45 0 0 1 1.068-.438h7.82q.633 0 1.07.438.437.437.437 1.068v14.488q0 .63-.437 1.069a1.45 1.45 0 0 1-1.07.437zm3.91-1.859a.7.7 0 0 0 .522-.216.7.7 0 0 0 .216-.521.7.7 0 0 0-.216-.522.7.7 0 0 0-.521-.215.7.7 0 0 0-.522.215.7.7 0 0 0-.215.522.7.7 0 0 0 .215.521.7.7 0 0 0 .522.216m-4.166-3.333h8.333V4.792H5.832z", fill: color })));
};
const StyledItemGridLeft = styled__default["default"].div `
padding-right: 1rem;
background: #ffffff;
padding: 5px 15px;
${utils.MediaQueries.mbUp} {
border-right: 1px solid #e4e8ec;
display: flex;
flex-direction: column;
justify-content: space-between;
}
`;
const StyledCategoryList$1 = styled__default["default"].div `
padding: 5px 15px;
`;
const StyledCategoryDivider = styled__default["default"].div `
height: 4px;
background-color: #e4e8ec;
`;
const StyledItem$5 = styled__default["default"].a `
padding: 10px 0;
position: relative;
display: flex;
align-items: center;
&[data-is-mobile-tool='true'] {
align-items: flex-start;
.name,
.phone-icon {
margin-top: 4px;
}
}
text-decoration: none;
color: ${miscTheme.theme.colors.gray800};
* {
pointer-events: none;
}
.name {
font-size: 16px;
font-weight: 400;
}
&[data-theme='marryBaby']:hover,
&[data-theme='marryBaby'][data-active='true'] {
p {
color: ${miscTheme.theme.mbColors.pink};
}
.icon {
background-color: ${miscTheme.theme.mbColors.lightPink};
}
}
&[data-theme='helloSites']:hover,
&[data-theme='helloSites'][data-active='true'] {
p {
color: ${miscTheme.theme.colors.primaryActive};
}
}
a {
}
&[data-theme='marryBaby'] {
.icon {
display: flex;
align-items: center;
justify-content: center;
max-width: 40px;
width: 100%;
height: 40px;
border-radius: 50%;
background-color: ${miscTheme.theme.mbColors.lightGray};
img {
border-radius: 50%;
}
}
}
`;
const StyledHeading = styled__default["default"].div `
margin: 15px 0;
${utils.MediaQueries.mbDown} {
display: none;
}
`;
const StyledIconNav = styled__default["default"].div `
display: flex;
position: absolute;
right: 0;
${utils.MediaQueries.mbUp} {
&.arrow-icon {
display: none;
}
}
`;
const StyledItemAll = styled__default["default"].div `
display: flex;
align-items: center;
color: ${miscTheme.theme.colors.primaryBase};
font-size: ${miscTheme.theme.sizes.fsParagraph4};
font-weight: ${miscTheme.theme.sizes.fwBold};
line-height: 24px;
font-size: 14px;
font-weight: 600;
&[data-theme='marryBaby'] {
color: ${miscTheme.theme.mbColors.pink};
}
`;
const StyledImageWrapper = styled__default["default"].div `
display: flex;
align-items: center;
margin-left: 10px;
`;
const StyledViewMore = styled__default["default"].a `
border: 1px solid ${miscTheme.theme.colors.primaryBase};
&[data-theme='marryBaby'] {
border: 1px solid ${miscTheme.theme.mbColors.pink};
svg path {
stroke: ${miscTheme.theme.mbColors.pink};
}
}
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 5px;
margin-top: 20px;
${utils.MediaQueries.mbDown} {
display: none;
}
`;
const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuItems, headingTitle, activeItem, }) => {
const { siteType } = React.useContext(navigationProfileButton.NavigationContext);
return (React__namespace["default"].createElement(StyledItemGridLeft, null,
React__namespace["default"].createElement("div", null,
React__namespace["default"].createElement(StyledHeading, null,
React__namespace["default"].createElement(index$8.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
menuItems.slice(0, 6).map((item, index) => {
const href = (item === null || item === void 0 ? void 0 : item.link)
? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
? item === null || item === void 0 ? void 0 : item.link
: `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
: '/';
return (React__namespace["default"].createElement(CategoriesItem, { key: index, menuItem: item, href: href, activeItem: activeItem, siteType: siteType, onClick: onClosePopup }));
})),
titleBtnViewMore && (React__namespace["default"].createElement(StyledViewMore, { "data-theme": siteType, style: { textDecoration: 'none' }, href: hrefViewMore, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": hrefViewMore },
React__namespace["default"].createElement(StyledItemAll, { onClick: onClosePopup, "data-theme": siteType, "data-is-heading-category": false },
titleBtnViewMore,
React__namespace["default"].createElement(StyledImageWrapper, null,
React__namespace["default"].createElement("img", { className: "svg", src: siteType === 'marryBaby'
? index$6.CommonGAssets.getAssetPath('chevronRightPink.svg')
: index$6.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
};
const CategoriesItem = ({ href, menuItem, activeItem, siteType, onClick, }) => {
const { name, thumbnail, link, linkTarget, isNew, id, isMobileAppTool,
// Break line
} = menuItem;
const { t } = index$1.useTranslations();
const theme = core$1.useMantineTheme();
return (React__namespace["default"].createElement(StyledItem$5, { className: core$1.clsx('iconMenu', `itemMenu-${id}`), "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": link, "data-is-heading-category": false, "data-active": id && id === activeItem, "data-is-mobile-tool": isMobileAppTool, href: href, target: linkTarget || !SiteWideBanner.isInternalLink(href) ? '_blank' : undefined, "data-theme": siteType, onClick: onClick },
React__namespace["default"].createElement("div", { className: "icon" },
React__namespace["default"].createElement("img", { loading: "lazy", alt: name, src: thumbnail || '/images/avatar.jpg', style: {
width: 32,
height: 32,
maxWidth: 32,
maxHeight: 32,
overflow: 'hidden',
} })),
React__namespace["default"].createElement(NewWrapper, { isNew: isNew },
React__namespace["default"].createElement("div", { style: {
padding: '0 0.4rem',
paddingRight: isNew ? 10 : 0,
} },
React__namespace["default"].createElement("p", { className: "name" }, name),
isMobileAppTool && (React__namespace["default"].createElement(index$4.Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
isMobileAppTool && (React__namespace["default"].createElement(StyledIconNav, null,
React__namespace["default"].createElement(Phone, { className: "phone-icon", size: 16 }))),
React__namespace["default"].createElement(StyledIconNav, { className: "arrow-icon" },
React__namespace["default"].createElement("img", { src: index$6.CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
};
const ExtraCategories = ({ menuItems, siteType, onClick, }) => {
return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
React__namespace["default"].createElement(StyledCategoryDivider, null),
React__namespace["default"].createElement(StyledCategoryList$1, null, menuItems.map((item, index) => {
return (React__namespace["default"].createElement(CategoriesItem, { key: index, menuItem: item, href: item.link, siteType: siteType, onClick: onClick }));
}))));
};
const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
var _a;
const { t } = index$1.useTranslations();
const { locale, configs: { statics }, } = React.useContext(navigationProfileButton.NavigationContext);
return (React__namespace["default"].createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
React__namespace["default"].createElement(Categories, { headingTitle: t('home.navigator.menuItem.specialties'), hrefViewMore: `${statics.CARE_URL_FE}/`, UrlFE: statics.CARE_URL_FE, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allSpecialties'), menuItems: (careSpecialties === null || careSpecialties === void 0 ? void 0 : careSpecialties.map((specialty) => {
if (!specialty)
return {};
return {
name: String(specialty.name) || '',
link: utils$1.getCareSearchUrl({
type: 'DOCTOR',
specialtySlug: specialty.slug,
locale,
}),
thumbnail: (specialty === null || specialty === void 0 ? void 0 : specialty.thumbnail) || '',
};
})) || [] }),
React__namespace["default"].createElement(CareSpotlights, { spotlights: spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_a = constants$1.LOCALIZED_SLUGS[locale]) === null || _a === void 0 ? void 0 : _a.SPECIALTIES}/` })));
};
const StyledContainerItems$4 = styled__default["default"].div `
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
${utils.MediaQueries.tdDown} {
gap: 12px;
grid-template-columns: 1fr;
}
`;
const StyledItem$4 = styled__default["default"].a `
position: relative;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
* {
pointer-events: none;
}
`;
const StyledImageCard$2 = styled__default["default"].div `
border-radius: 5px;
display: block;
overflow: hidden;
padding-top: 140%;
width: 100%;
position: relative;
height: 0;
img {
position: absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
top: 0;
left: 0;
}
${utils.MediaQueries.tdDown} {
width: 72px;
padding-top: 100px;
flex-shrink: 0;
}
`;
const StyledButton = styled__default["default"].a `
${utils.MediaQueries.tdDown} {
position: relative;
bottom: 0;
left: 16px;
right: 0;
padding: 4px 8px;
width: 90px;
height: 24px;
font-size: 11px;
line-height: 16px;
}
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
height: 32px;
padding: 6px 12px;
background: ${(props) => props.bgColor};
border-radius: 10px;
border: none;
transition: all 0.2s ease-in-out;
color: ${(props) => props.textColor};
font-family: 'Inter';
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background: ${(props) => {
const bgColor = props.bgColor.toLowerCase();
if (bgColor === '#ffffff' || bgColor === 'white' || bgColor === '#fff') {
return '#f0f0f0';
}
if (typeof bgColor === 'string') {
const rgb = utils$1.hexToRgb(bgColor, true);
const hsb = utils$1.rgbToHsb(rgb.r, rgb.g, rgb.b);
const newPattern1 = utils$1.hsbToRgb(hsb[0], hsb[1] + 16, hsb[2] - 16);
return `rgb(${newPattern1[0]},${newPattern1[1]},${newPattern1[2]})`;
}
return '';
}};
}
`;
const StyledTitle$3 = styled__default["default"].p `
font-size: 16px;
font-weight: 400;
padding: 4px 15px;
line-height: 1.4;
color: ${miscTheme.theme.colors.gray800};
flex: 1;
${utils.MediaQueries.tdUp} {
display: none;
}
`;
const Item$3 = ({ item, index = 0 }) => {
if (!item)
return null;
const linkProps = {
href: item.link,
'data-event-category': 'Hamburger Navigation',
'data-event-action': `Spotlight Click ${index + 1}`,
'data-event-label': item.link,
};
return (React__namespace["default"].createElement(StyledItem$4, Object.assign({ key: item.id }, linkProps),
React__namespace["default"].createElement(StyledImageCard$2, null,
React__namespace["default"].createElement("img", { loading: "lazy", alt: item.title, src: item.banner || '/images/notFound-min-small.jpg' })),
React__namespace["default"].createElement("div", { style: {
display: 'flex',
flexDirection: 'column',
gap: 8,
} },
React__namespace["default"].createElement(StyledTitle$3, null, item.title),
!!item.buttonDisplay && (React__namespace["default"].createElement(StyledButton, Objec