@cleartrip/ct-design-header 1.2.0-SNAPSHOT-rnwStable4Dec25v3.0 → 1.2.0-SNAPSHOT-header-holiday-v2.0

package/dist/ct-design-header.cjs.js

@@ -8,8 +8,7 @@ var ctDesignTypography = require('@cleartrip/ct-design-typography');
 var ctDesignButton = require('@cleartrip/ct-design-button');
 var ctDesignDivider = require('@cleartrip/ct-design-divider');
 var ctDesignIcons = require('@cleartrip/ct-design-icons');
-var styled = require('@emotion/styled');
-var react$1 = require('@emotion/react');
+var styled = require('styled-components');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,531 +17,713 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 var OFFERS_URL = 'all-offers/?categories=flights';
 var MY_TRIPS_URL = '/account/trips';
 var SUPPORT_URL = '/support';
-var NAVBAR_OPTIONS = [
-    {
-        lefticon: ctDesignIcons.Offers,
-        text: 'Offers',
-        ravenActionName: 'offers',
-        isHoverable: false,
-        isClickable: true,
-        link: OFFERS_URL,
-    },
-    {
-        lefticon: ctDesignIcons.BusinessBag,
-        text: 'Business',
-        ravenActionName: 'business',
-        rightIcon: ctDesignIcons.ChevronDown,
-        isHoverable: true,
-    },
-    {
-        lefticon: ctDesignIcons.MyTrips,
-        text: 'My Trips',
-        ravenActionName: 'mytrips',
-        isHoverable: false,
-        isClickable: true,
-        link: MY_TRIPS_URL,
-    },
-    {
-        lefticon: ctDesignIcons.SupportIcon,
-        text: 'Support',
-        ravenActionName: 'support',
-        isHoverable: false,
-        isClickable: true,
-        link: SUPPORT_URL,
-    },
-];
+var NAVBAR_OPTIONS = [{
+  lefticon: ctDesignIcons.Offers,
+  text: 'Offers',
+  ravenActionName: 'offers',
+  isHoverable: false,
+  isClickable: true,
+  link: OFFERS_URL
+}, {
+  lefticon: ctDesignIcons.BusinessBag,
+  text: 'Business',
+  ravenActionName: 'business',
+  rightIcon: ctDesignIcons.ChevronDown,
+  isHoverable: true
+}, {
+  lefticon: ctDesignIcons.MyTrips,
+  text: 'My Trips',
+  ravenActionName: 'mytrips',
+  isHoverable: false,
+  isClickable: true,
+  link: MY_TRIPS_URL
+}, {
+  lefticon: ctDesignIcons.SupportIcon,
+  text: 'Support',
+  ravenActionName: 'support',
+  isHoverable: false,
+  isClickable: true,
+  link: SUPPORT_URL
+}];
 var LOBS = {
-    FLIGHTS: 'Flights',
-    HOTELS: 'Hotels',
-    TRAIN: 'Trains',
-    PACKAGES: 'Packages',
-    BUSES: 'Buses',
+  FLIGHTS: 'Flights',
+  HOTELS: 'Hotels',
+  TRAIN: 'Trains',
+  HOLIDAYS: 'Holidays',
+  BUSES: 'Buses'
 };
-var LOB_DATA = [
-    {
-        title: LOBS.FLIGHTS,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
-        link: '/flights',
-    },
-    {
-        title: LOBS.HOTELS,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
-        link: '/hotels',
-    },
-    {
-        title: LOBS.BUSES,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
-        link: '/bus',
-    },
-    {
-        title: LOBS.PACKAGES,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
-        link: '/holidays',
-    },
-];
-var bdConfig = [
-    {
-        title: 'AgentBox',
-        subtitle: 'For travel agents',
-        details: 'One-stop travel solution offering the best deals to our travel agency partners',
-        link: 'https://agency.cleartrip.com',
-    },
-    {
-        title: 'OutOfOffice',
-        subtitle: 'For startups, corporates and SMEs',
-        details: 'Manage corporate business travel, smartly',
-        link: 'https://ooo.cleartrip.com/',
-        ravenActionName: 'ooo',
-    },
-    {
-        title: 'MICE',
-        subtitle: 'For corporate events',
-        details: 'An end-to-end management solution for all your corporate events',
-        link: 'https://business.cleartrip.com/',
-    },
-    {
-        title: 'API',
-        subtitle: 'For developers',
-        details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
-        link: 'https://business.cleartrip.com/api-customers/more-details',
-    },
-];
+var LOB_DATA = [{
+  title: LOBS.FLIGHTS,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Flights.png?cache=true',
+  link: '/flights'
+}, {
+  title: LOBS.HOTELS,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Hotels.png?cache=true',
+  link: '/hotels'
+}, {
+  title: LOBS.BUSES,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Buses.png?cache=true',
+  link: '/bus'
+}, {
+  title: LOBS.HOLIDAYS,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Packages.png?cache=true',
+  link: '/holidays'
+}];
+var bdConfig = [{
+  title: 'AgentBox',
+  subtitle: 'For travel agents',
+  details: 'One-stop travel solution offering the best deals to our travel agency partners',
+  link: 'https://agency.cleartrip.com'
+}, {
+  title: 'OutOfOffice',
+  subtitle: 'For startups, corporates and SMEs',
+  details: 'Manage corporate business travel, smartly',
+  link: 'https://ooo.cleartrip.com/',
+  ravenActionName: 'ooo'
+}, {
+  title: 'MICE',
+  subtitle: 'For corporate events',
+  details: 'An end-to-end management solution for all your corporate events',
+  link: 'https://business.cleartrip.com/'
+}, {
+  title: 'API',
+  subtitle: 'For developers',
+  details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
+  link: 'https://business.cleartrip.com/api-customers/more-details'
+}];
 var BUSINESS_DROPDOWN_HEADING = 'Other business services';
 exports.RAVEN_PAGE_NAMES = void 0;
 (function (RAVEN_PAGE_NAMES) {
-    RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
-    RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
-    RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
+  RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
+  RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
+  RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
 })(exports.RAVEN_PAGE_NAMES || (exports.RAVEN_PAGE_NAMES = {}));
 var RAVEN_PLATFORMS;
 (function (RAVEN_PLATFORMS) {
-    RAVEN_PLATFORMS["DESKTOP"] = "desktop";
+  RAVEN_PLATFORMS["DESKTOP"] = "desktop";
 })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
 var LOG_IN_TEXT = 'Log in';
 var THEME_CONFIG = {
-    NOVAC: {
-        headerBackground: 'transparent',
-        hoverColor: '#FDBA12',
-        logoFill: '#FFF',
-        fkcompanyColor: '#FFF',
-        typographyColor: '#FFF',
-        loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL,
-    },
-    DEFAULT: {
-        headerBackground: '#FFFFFF',
-        hoverColor: '#FF4F17',
-        logoFill: '#FF4F17',
-        fkcompanyColor: '#1A1A1A',
-        typographyColor: '#1A1A1A',
-        loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY,
-    },
+  NOVAC: {
+    headerBackground: 'transparent',
+    hoverColor: '#FDBA12',
+    logoFill: '#FFF',
+    fkcompanyColor: '#FFF',
+    typographyColor: '#FFF',
+    loginButtonColorVariant: ctDesignButton.ButtonColor.NEUTRAL
+  },
+  DEFAULT: {
+    headerBackground: '#FFFFFF',
+    hoverColor: '#FF4F17',
+    logoFill: '#FF4F17',
+    fkcompanyColor: '#1A1A1A',
+    typographyColor: '#1A1A1A',
+    loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY
+  }
 };
 
 var HeaderContext = react.createContext(undefined);
 var useHeaderContext = function () {
-    var context = react.useContext(HeaderContext);
-    if (!context) {
-        throw new Error('useHeaderContext must be used within a HeaderProvider');
-    }
-    return context;
+  var context = react.useContext(HeaderContext);
+  if (!context) {
+    throw new Error('useHeaderContext must be used within a HeaderProvider');
+  }
+  return context;
 };
 var HeaderProvider = function (_a) {
-    var value = _a.value, children = _a.children;
-    return jsxRuntime.jsx(HeaderContext.Provider, tslib.__assign({ value: value }, { children: children }));
+  var value = _a.value,
+    children = _a.children;
+  return jsxRuntime.jsx(HeaderContext.Provider, tslib.__assign({
+    value: value
+  }, {
+    children: children
+  }));
+};
+
+var stringifyPayload = function (payload) {
+  var keys = Object.keys(payload);
+  var numericValues = [];
+  keys.forEach(function (key) {
+    if (numericValues.includes(key)) {
+      payload[key] = Number(payload[key]);
+    } else {
+      payload[key] = '' + payload[key];
+    }
+  });
+  return payload;
+};
+var isServer = function () {
+  return typeof window === 'undefined' || !window;
+};
+var getQueryParam = function (queryParam) {
+  if (isServer()) {
+    return '';
+  }
+  var urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(queryParam);
+};
+var ravenLoyaltyTypes = function (loyaltyType) {
+  switch (loyaltyType) {
+    case 'FkVip':
+      return 'fk_vip';
+    case 'FkPremium':
+      return 'fk_plus_premium';
+    case 'InsiderIcon':
+      return 'myntra_insidericon';
+    case 'InsiderElite':
+      return 'myntra_insiderelite';
+    default:
+      return '';
+  }
+};
+var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
+  var _a;
+  if (typeof ravenPushCallback !== 'function') {
+    console.error('ravenPushCallback is not provided or is not a function');
+    return;
+  }
+  var commonPayload = {
+    page_name: pageName,
+    platform: RAVEN_PLATFORMS.DESKTOP,
+    login_status: isUserLoggedIn ? 'yes' : 'no',
+    domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.hostname
+  };
+  var newRavenPayload = stringifyPayload(ravenPayload);
+  var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
+  var finalPayload = tslib.__assign(tslib.__assign(tslib.__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
+  try {
+    if (ravenPushCallback.length === 1) {
+      ravenPushCallback({
+        eventName: eventName,
+        eventData: finalPayload
+      });
+    } else {
+      ravenPushCallback(eventName, finalPayload);
+    }
+  } catch (err) {
+    console.error(err);
+    return;
+  }
 };
 
 var LobsHeader = function () {
-    var selectedLOB = useHeaderContext().selectedLOB;
-    return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', background: '#F7FAFF', top: '64px', zIndex: 2, css: {
-            gap: 24,
-        } }, { children: LOB_DATA.map(function (item, index) {
-            var title = item.title, link = item.link, image = item.image;
-            var isSelected = selectedLOB === title;
-            return (jsxRuntime.jsx("a", tslib.__assign({ href: isSelected ? undefined : link, style: { textDecoration: 'none', pointerEvents: isSelected ? 'none' : 'auto' } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', width: '116px', height: '48px', justifyContent: 'center', cursor: 'pointer', css: {
-                        gap: 8,
-                        background: isSelected ? '#FFFFFF' : 'transparent',
-                        border: isSelected ? '1px solid #E6E6E6' : '',
-                        borderRadius: '40px',
-                        padding: '8px 16px 8px 8px',
-                        transition: 'background 0.2s ease',
-                    } }, { children: [jsxRuntime.jsx("img", { src: image, alt: title, width: 32, height: 32 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1, isClickable: true }, { children: title }))] }), index) })));
-        }) })));
+  var _a = useHeaderContext(),
+    selectedLOB = _a.selectedLOB,
+    isUserLoggedIn = _a.isUserLoggedIn,
+    ravenEventName = _a.ravenEventName,
+    ravenPageName = _a.ravenPageName,
+    _b = _a.ravenPayload,
+    ravenPayload = _b === void 0 ? {} : _b,
+    ravenPushCallback = _a.ravenPushCallback;
+  var handleClick = function (title, isSelected) {
+    if (!isSelected) {
+      var payload = {
+        action_name: "".concat(title.toLowerCase(), "_tab_click"),
+        action_type: 'click'
+      };
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+    }
+  };
+  return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '16px',
+    background: '#F7FAFF',
+    top: '64px',
+    zIndex: 2,
+    css: {
+      gap: 24
+    }
+  }, {
+    children: LOB_DATA.map(function (item, index) {
+      var title = item.title,
+        link = item.link,
+        image = item.image;
+      var isSelected = selectedLOB === title;
+      return jsxRuntime.jsx("a", tslib.__assign({
+        href: isSelected ? undefined : link,
+        style: {
+          textDecoration: 'none',
+          pointerEvents: isSelected ? 'none' : 'auto'
+        },
+        onClick: function () {
+          return handleClick(title, isSelected);
+        }
+      }, {
+        children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          display: 'flex',
+          alignItems: 'center',
+          width: '116px',
+          height: '48px',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          css: {
+            gap: 8,
+            background: isSelected ? '#FFFFFF' : 'transparent',
+            border: isSelected ? '1px solid #E6E6E6' : '',
+            borderRadius: '40px',
+            padding: '8px 16px 8px 8px',
+            transition: 'background 0.2s ease'
+          }
+        }, {
+          children: [jsxRuntime.jsx("img", {
+            src: image,
+            alt: title,
+            width: 32,
+            height: 32
+          }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+            variant: isSelected ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
+            isClickable: true
+          }, {
+            children: title
+          }))]
+        }))
+      }), index);
+    })
+  }));
 };
 
 var useDelayedUnmount = function (show, unmountDelay) {
-    var _a = react.useState(show), showComponent = _a[0], setShowComponent = _a[1];
-    var timerRef = react.useRef();
-    react.useEffect(function () {
-        if (!show) {
-            timerRef.current = setTimeout(function () {
-                setShowComponent(false);
-            }, unmountDelay);
-        }
-        else {
-            setShowComponent(show);
-        }
-        return function () {
-            (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
-        };
-    }, [show]);
-    return showComponent;
+  var _a = react.useState(show),
+    showComponent = _a[0],
+    setShowComponent = _a[1];
+  var timerRef = react.useRef();
+  react.useEffect(function () {
+    if (!show) {
+      timerRef.current = setTimeout(function () {
+        setShowComponent(false);
+      }, unmountDelay);
+    } else {
+      setShowComponent(show);
+    }
+    return function () {
+      (timerRef === null || timerRef === void 0 ? void 0 : timerRef.current) && clearTimeout(timerRef.current);
+    };
+  }, [show]);
+  return showComponent;
 };
 var useMountTransition = function (isMounted, unmountDelay) {
-    var _a = react.useState(false), hasTransitionedIn = _a[0], setHasTransitionedIn = _a[1];
-    var timeoutIdRef = react.useRef();
-    react.useEffect(function () {
-        if (isMounted && !hasTransitionedIn) {
-            setTimeout(function () {
-                setHasTransitionedIn(true);
-            }, 0);
-        }
-        else if (!isMounted && hasTransitionedIn) {
-            timeoutIdRef.current = setTimeout(function () { return setHasTransitionedIn(false); }, unmountDelay);
-        }
-        return function () {
-            if (timeoutIdRef && timeoutIdRef.current) {
-                clearTimeout(timeoutIdRef.current);
-            }
-        };
-    }, [unmountDelay, isMounted]);
-    return hasTransitionedIn;
+  var _a = react.useState(false),
+    hasTransitionedIn = _a[0],
+    setHasTransitionedIn = _a[1];
+  var timeoutIdRef = react.useRef();
+  react.useEffect(function () {
+    if (isMounted && !hasTransitionedIn) {
+      setTimeout(function () {
+        setHasTransitionedIn(true);
+      }, 0);
+    } else if (!isMounted && hasTransitionedIn) {
+      timeoutIdRef.current = setTimeout(function () {
+        return setHasTransitionedIn(false);
+      }, unmountDelay);
+    }
+    return function () {
+      if (timeoutIdRef && timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+    };
+  }, [unmountDelay, isMounted]);
+  return hasTransitionedIn;
 };
 
 function HeaderAnimatedMask(_a) {
-    var children = _a.children, onMaskClick = _a.onMaskClick, show = _a.show, marginTop = _a.marginTop, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
-    react.useEffect(function () {
-        if (show) {
-            document.body.style.overflow = 'hidden';
-        }
-        return function () {
-            document.body.style.overflow = 'initial';
-        };
-    }, [show]);
-    var showFlagProxy = useDelayedUnmount(show, 300);
-    var triggerTransition = useMountTransition(show, 100);
-    var triggerOpenTransition = triggerTransition;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, { id: 'mask-container', css: {
-                    position: 'fixed',
-                    backgroundColor: '#000',
-                    opacity: triggerOpenTransition ? 0.4 : 0,
-                    width: '100%',
-                    height: '100vh',
-                    left: 0,
-                    top: marginTop || 0,
-                    zIndex: 9,
-                    transition: 'opacity 300ms ease-in',
-                }, onClick: onMaskClick })), showFlagProxy && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave }, { children: children })))] }));
+  var children = _a.children,
+    onMaskClick = _a.onMaskClick,
+    show = _a.show,
+    marginTop = _a.marginTop,
+    handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
+  react.useEffect(function () {
+    if (show) {
+      document.body.style.overflow = 'hidden';
+    }
+    return function () {
+      document.body.style.overflow = 'initial';
+    };
+  }, [show]);
+  var showFlagProxy = useDelayedUnmount(show, 300);
+  var triggerTransition = useMountTransition(show, 100);
+  var triggerOpenTransition = triggerTransition;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, {
+      id: 'mask-container',
+      css: {
+        position: 'fixed',
+        backgroundColor: '#000',
+        opacity: triggerOpenTransition ? 0.4 : 0,
+        width: '100%',
+        height: '100vh',
+        left: 0,
+        top: marginTop || 0,
+        zIndex: 9,
+        transition: 'opacity 300ms ease-in'
+      },
+      onClick: onMaskClick
+    }), showFlagProxy && jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      onMouseEnter: handleDropdownMouseEnter,
+      onMouseLeave: handleDropdownMouseLeave
+    }, {
+      children: children
+    }))]
+  });
 }
 
 var MIN_CLOSE_DELAY = 150;
 var useHoverDropdown = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.closeDelay, closeDelayArg = _c === void 0 ? 0 : _c, _d = _b.openDelay, openDelay = _d === void 0 ? 500 : _d;
-    var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
-    var _e = react.useState(false), isDropdownVisible = _e[0], setIsDropdownVisible = _e[1];
-    var _f = react.useState(null), hoveredElemIndex = _f[0], setHoveredElemIndex = _f[1];
-    var timeoutRef = react.useRef(null);
-    var openTimeoutRef = react.useRef(null);
-    var cancelElementHover = react.useRef(false);
-    var handleOnMouseEnter = react.useCallback(function (index) {
-        if (timeoutRef.current)
-            clearTimeout(timeoutRef.current);
-        if (openTimeoutRef.current)
-            clearTimeout(openTimeoutRef.current);
-        cancelElementHover.current = false;
-        openTimeoutRef.current = setTimeout(function () {
-            setIsDropdownVisible(true);
-            if (!cancelElementHover.current) {
-                setHoveredElemIndex(index);
-            }
-        }, openDelay);
-    }, [openDelay]);
-    var handleOnMouseLeave = react.useCallback(function () {
-        cancelElementHover.current = true;
-        timeoutRef.current = setTimeout(function () {
-            setIsDropdownVisible(false);
-            setHoveredElemIndex(null);
-        }, closeDelay);
-    }, [closeDelay]);
-    var handleDropdownMouseEnter = react.useCallback(function () {
-        if (timeoutRef.current)
-            clearTimeout(timeoutRef.current);
-    }, []);
-    var handleDropdownMouseLeave = react.useCallback(function () {
-        cancelElementHover.current = true;
-        (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(function () {
-            setIsDropdownVisible(false);
-            setHoveredElemIndex(null);
-        }, closeDelay);
-    }, []);
-    react.useEffect(function () {
-        var handleMouseLeaveWindow = function (event) {
-            if (event.clientY <= 0) {
-                setIsDropdownVisible(false);
-                setHoveredElemIndex(null);
-            }
-        };
-        window.addEventListener('mouseleave', handleMouseLeaveWindow);
-        return function () {
-            window.removeEventListener('mouseleave', handleMouseLeaveWindow);
-        };
-    }, []);
-    return {
-        isDropdownVisible: isDropdownVisible,
-        hoveredElemIndex: hoveredElemIndex,
-        handleOnMouseEnter: handleOnMouseEnter,
-        handleOnMouseLeave: handleOnMouseLeave,
-        handleDropdownMouseEnter: handleDropdownMouseEnter,
-        handleDropdownMouseLeave: handleDropdownMouseLeave,
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.closeDelay,
+    closeDelayArg = _c === void 0 ? 0 : _c,
+    _d = _b.openDelay,
+    openDelay = _d === void 0 ? 500 : _d;
+  var closeDelay = Math.max(closeDelayArg, MIN_CLOSE_DELAY);
+  var _e = react.useState(false),
+    isDropdownVisible = _e[0],
+    setIsDropdownVisible = _e[1];
+  var _f = react.useState(null),
+    hoveredElemIndex = _f[0],
+    setHoveredElemIndex = _f[1];
+  var timeoutRef = react.useRef(null);
+  var openTimeoutRef = react.useRef(null);
+  var cancelElementHover = react.useRef(false);
+  var handleOnMouseEnter = react.useCallback(function (index) {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
+    cancelElementHover.current = false;
+    openTimeoutRef.current = setTimeout(function () {
+      setIsDropdownVisible(true);
+      if (!cancelElementHover.current) {
+        setHoveredElemIndex(index);
+      }
+    }, openDelay);
+  }, [openDelay]);
+  var handleOnMouseLeave = react.useCallback(function () {
+    cancelElementHover.current = true;
+    timeoutRef.current = setTimeout(function () {
+      setIsDropdownVisible(false);
+      setHoveredElemIndex(null);
+    }, closeDelay);
+  }, [closeDelay]);
+  var handleDropdownMouseEnter = react.useCallback(function () {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, []);
+  var handleDropdownMouseLeave = react.useCallback(function () {
+    cancelElementHover.current = true;
+    (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) && clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(function () {
+      setIsDropdownVisible(false);
+      setHoveredElemIndex(null);
+    }, closeDelay);
+  }, []);
+  react.useEffect(function () {
+    var handleMouseLeaveWindow = function (event) {
+      if (event.clientY <= 0) {
+        setIsDropdownVisible(false);
+        setHoveredElemIndex(null);
+      }
     };
+    window.addEventListener('mouseleave', handleMouseLeaveWindow);
+    return function () {
+      window.removeEventListener('mouseleave', handleMouseLeaveWindow);
+    };
+  }, []);
+  return {
+    isDropdownVisible: isDropdownVisible,
+    hoveredElemIndex: hoveredElemIndex,
+    handleOnMouseEnter: handleOnMouseEnter,
+    handleOnMouseLeave: handleOnMouseLeave,
+    handleDropdownMouseEnter: handleDropdownMouseEnter,
+    handleDropdownMouseLeave: handleDropdownMouseLeave
+  };
 };
 
 var useDropdownAnimation = function (isOpen) {
-    var containerRef = react.useRef(null);
-    var openDropdown = function () {
-        if (containerRef.current) {
-            var fullHeight_1 = containerRef.current.scrollHeight;
-            containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
-            containerRef.current.style.opacity = '0';
-            requestAnimationFrame(function () {
-                if (containerRef.current) {
-                    containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
-                    containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
-                    containerRef.current.style.opacity = '1';
-                }
-            });
-        }
-    };
-    var closeDropdown = function () {
+  var containerRef = react.useRef(null);
+  var openDropdown = function () {
+    if (containerRef.current) {
+      var fullHeight_1 = containerRef.current.scrollHeight;
+      containerRef.current.style.maxHeight = "".concat(fullHeight_1 / 2, "px");
+      containerRef.current.style.opacity = '0';
+      requestAnimationFrame(function () {
         if (containerRef.current) {
-            var fullHeight = containerRef.current.scrollHeight;
-            containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
-            containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
-            containerRef.current.style.opacity = '0';
-            setTimeout(function () {
-                if (containerRef.current) {
-                    containerRef.current.style.maxHeight = '0px';
-                }
-            }, 300);
-        }
-    };
-    react.useEffect(function () {
-        if (isOpen) {
-            openDropdown();
-        }
-        else {
-            closeDropdown();
+          containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
+          containerRef.current.style.maxHeight = "".concat(fullHeight_1, "px");
+          containerRef.current.style.opacity = '1';
         }
-    }, [isOpen]);
-    return { containerRef: containerRef };
-};
-
-var stringifyPayload = function (payload) {
-    var keys = Object.keys(payload);
-    var numericValues = [];
-    keys.forEach(function (key) {
-        if (numericValues.includes(key)) {
-            payload[key] = Number(payload[key]);
-        }
-        else {
-            payload[key] = '' + payload[key];
-        }
-    });
-    return payload;
-};
-var isServer = function () {
-    return typeof window === 'undefined' || !window;
-};
-var getQueryParam = function (queryParam) {
-    if (isServer()) {
-        return '';
+      });
     }
-    var urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get(queryParam);
-};
-var ravenLoyaltyTypes = function (loyaltyType) {
-    switch (loyaltyType) {
-        case 'FkVip':
-            return 'fk_vip';
-        case 'FkPremium':
-            return 'fk_plus_premium';
-        case 'InsiderIcon':
-            return 'myntra_insidericon';
-        case 'InsiderElite':
-            return 'myntra_insiderelite';
-        default:
-            return '';
-    }
-};
-var ravenSDKTrigger = function (isUserLoggedIn, eventName, ravenPayload, customRavenPayload, ravenPushCallback, pageName) {
-    var _a;
-    if (typeof ravenPushCallback !== 'function') {
-        console.error('ravenPushCallback is not provided or is not a function');
-        return;
-    }
-    var commonPayload = {
-        page_name: pageName,
-        platform: RAVEN_PLATFORMS.DESKTOP,
-        login_status: isUserLoggedIn ? 'yes' : 'no',
-        domain: (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host,
-    };
-    var newRavenPayload = stringifyPayload(ravenPayload);
-    var parsedCustomRavenPayload = stringifyPayload(customRavenPayload);
-    var finalPayload = tslib.__assign(tslib.__assign(tslib.__assign({}, commonPayload), newRavenPayload), parsedCustomRavenPayload);
-    try {
-        if (ravenPushCallback.length === 1) {
-            ravenPushCallback({ eventName: eventName, eventData: finalPayload });
-        }
-        else {
-            ravenPushCallback(eventName, finalPayload);
+  };
+  var closeDropdown = function () {
+    if (containerRef.current) {
+      var fullHeight = containerRef.current.scrollHeight;
+      containerRef.current.style.transition = 'max-height 0.3s ease-in-out, opacity 0.3s ease-in-out';
+      containerRef.current.style.maxHeight = "".concat(fullHeight / 2, "px");
+      containerRef.current.style.opacity = '0';
+      setTimeout(function () {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = '0px';
         }
+      }, 300);
     }
-    catch (err) {
-        console.error(err);
-        return;
+  };
+  react.useEffect(function () {
+    if (isOpen) {
+      openDropdown();
+    } else {
+      closeDropdown();
     }
+  }, [isOpen]);
+  return {
+    containerRef: containerRef
+  };
 };
 
 var accountOptionHoverStyles = {
-    transition: 'background-color 0.2s ease-in-out',
-    '&:hover': {
-        backgroundColor: '#ECF3FF',
-    },
+  transition: 'background-color 0.2s ease-in-out',
+  '&:hover': {
+    backgroundColor: '#ECF3FF'
+  }
 };
 var logoutButtonHoverStyles = {
-    transition: 'background-color 0.2s ease-in-out',
-    '&:hover': {
-        backgroundColor: '#FBEFEF',
-    },
+  transition: 'background-color 0.2s ease-in-out',
+  '&:hover': {
+    backgroundColor: '#FBEFEF'
+  }
 };
-var moveRight = react$1.keyframes(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
-var moveRightAgain = react$1.keyframes(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+var moveRight = styled.keyframes(templateObject_1$1 || (templateObject_1$1 = tslib.__makeTemplateObject(["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
+var moveRightAgain = styled.keyframes(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"], ["\n  from {\n    transform: translateX(-20.01px);\n  }\n  to {\n    transform: translateX(0px);\n  }\n"])));
 var arrowContainerStyles = {
-    display: 'flex',
-    backgroundColor: 'black',
-    transition: 'background-color 200ms ease',
-    'flex-direction': 'row',
-    justifyContent: 'center',
-    width: '20px',
-    height: '20px',
-    overflow: 'hidden',
-    borderRadius: '50%',
+  display: 'flex',
+  backgroundColor: 'black',
+  transition: 'background-color 200ms ease',
+  'flex-direction': 'row',
+  justifyContent: 'center',
+  width: '20px',
+  height: '20px',
+  overflow: 'hidden',
+  borderRadius: '50%'
 };
 var getLoginButtonBgColorStyles = function (saleThemeEnabled) {
-    if (saleThemeEnabled) {
-        return {
-            backgroundColor: 'transparent !important',
-            '&:hover': {
-                backgroundColor: 'rgba(255, 255, 255, 0.25)!important',
-            },
-        };
-    }
-    else {
-        return {
-            backgroundColor: 'transparent !important',
-            '&:hover': {
-                backgroundColor: '#F3F3F3 !important',
-            },
-        };
-    }
+  if (saleThemeEnabled) {
+    return {
+      backgroundColor: 'transparent !important',
+      '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.25)!important'
+      }
+    };
+  } else {
+    return {
+      backgroundColor: 'transparent !important',
+      '&:hover': {
+        backgroundColor: '#F3F3F3 !important'
+      }
+    };
+  }
 };
 var templateObject_1$1, templateObject_2;
 
 var AnimatedArrow = function () {
-    return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'bd-arrow-container-js', css: arrowContainerStyles }, { children: tslib.__spreadArray([], Array(3), true).map(function (_, index) { return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'bd-arrow-wrapper-js', display: 'flex', alignItems: 'center' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) }), index)); }) })));
+  return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+    className: 'bd-arrow-container-js',
+    css: arrowContainerStyles
+  }, {
+    children: tslib.__spreadArray([], Array(3), true).map(function (_, index) {
+      return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+        className: 'bd-arrow-wrapper-js',
+        display: 'flex',
+        alignItems: 'center'
+      }, {
+        children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+      }), index);
+    })
+  }));
 };
-var BDHoverContainer = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"], ["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"])), moveRight, moveRightAgain);
+var BDHoverContainer = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "BusinessDropdown__BDHoverContainer",
+  componentId: "sc-1tsshe4-0"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"], ["\n  cursor: pointer;\n  width: 200px;\n  &:hover {\n    .bd-arrow-container-js {\n      background-color: rgba(255, 79, 23, 1);\n      transition: color 200ms ease;\n    }\n    .bd-arrow-wrapper-js {\n      animation: ", " 200ms linear;\n      display: flex;\n    }\n    .color-orange-on-hover-js {\n      color: rgba(255, 79, 23, 1);\n      transition: background-color 200ms ease;\n    }\n  }\n  &:not(:hover) .bd-arrow-wrapper-js {\n    animation: ", " 200ms linear backwards;\n  }\n"])), moveRight, moveRightAgain);
 var BusinessDropdownContent = function (_a) {
-    var isOpen = _a.isOpen;
-    var _b = useHeaderContext(), isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName, loyaltyType = _b.loyaltyType, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c;
-    var _d = react.useState(0), leftPosition = _d[0], setLeftPosition = _d[1];
-    var containerRef = useDropdownAnimation(isOpen).containerRef;
-    react.useEffect(function () {
-        var updatePosition = function () {
-            if (containerRef.current) {
-                var screenWidth = window.innerWidth;
-                var containerWidth = containerRef.current.offsetWidth || 0;
-                var newLeft = (screenWidth - containerWidth) / 2;
-                if (newLeft !== leftPosition) {
-                    setLeftPosition(newLeft);
+  var isOpen = _a.isOpen;
+  var _b = useHeaderContext(),
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName,
+    loyaltyType = _b.loyaltyType,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c;
+  var _d = react.useState(0),
+    leftPosition = _d[0],
+    setLeftPosition = _d[1];
+  var containerRef = useDropdownAnimation(isOpen).containerRef;
+  react.useEffect(function () {
+    var updatePosition = function () {
+      if (containerRef.current) {
+        var screenWidth = window.innerWidth;
+        var containerWidth = containerRef.current.offsetWidth || 0;
+        var newLeft = (screenWidth - containerWidth) / 2;
+        if (newLeft !== leftPosition) {
+          setLeftPosition(newLeft);
+        }
+      }
+    };
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    return function () {
+      return window.removeEventListener('resize', updatePosition);
+    };
+  }, [containerRef, leftPosition]);
+  var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
+    var _a;
+    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+    var actionName = ravenActionName ? "".concat(ravenActionName, "_business_click") : title ? "".concat(title.toLowerCase(), "_business_click") : '';
+    var defaultPayload = {
+      action_name: actionName,
+      action_type: 'click',
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+    if (link) {
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = link;
+    }
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    ref: containerRef,
+    backgroundColor: '#fff',
+    top: '76px',
+    position: 'fixed',
+    left: "".concat(leftPosition, "px"),
+    borderRadius: 24,
+    boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)',
+    width: 'fit-content',
+    zIndex: 1002,
+    css: {
+      overflow: 'hidden',
+      opacity: 0
+    }
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      padding: '20px 24px 20px 24px',
+      backgroundColor: '#FFF1EC'
+    }, {
+      children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+        variant: 'HM2'
+      }, {
+        children: BUSINESS_DROPDOWN_HEADING
+      }))
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      flexDirection: 'row',
+      padding: '24px',
+      columnGap: '48px',
+      width: 'fit-content'
+    }, {
+      children: bdConfig.map(function (_a) {
+        var title = _a.title,
+          subtitle = _a.subtitle,
+          details = _a.details,
+          link = _a.link,
+          ravenActionName = _a.ravenActionName;
+        return jsxRuntime.jsxs(BDHoverContainer, tslib.__assign({
+          className: 'bd-hover-container-js',
+          onClick: function () {
+            return handleBusinessDropdownClick(link, title, ravenActionName);
+          }
+        }, {
+          children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '4px'
+          }, {
+            children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              columnGap: '8px'
+            }, {
+              children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+                variant: 'HM2',
+                className: 'color-orange-on-hover-js',
+                css: {
+                  transition: 'color 200ms ease'
                 }
+              }, {
+                children: title
+              })), jsxRuntime.jsx(AnimatedArrow, {})]
+            })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+              variant: 'B3',
+              css: {
+                marginTop: '4px',
+                opacity: 0.75
+              }
+            }, {
+              children: subtitle
+            }))]
+          })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+            variant: 'P3',
+            color: 'subheading',
+            css: {
+              marginTop: '12px'
             }
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        return function () { return window.removeEventListener('resize', updatePosition); };
-    }, [containerRef, leftPosition]);
-    var handleBusinessDropdownClick = react.useCallback(function (link, title, ravenActionName) {
-        var _a;
-        var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-        var actionName = ravenActionName
-            ? "".concat(ravenActionName, "_business_click")
-            : title
-                ? "".concat(title.toLowerCase(), "_business_click")
-                : '';
-        var defaultPayload = {
-            action_name: actionName,
-            action_type: 'click',
-            u_utm_source: utmSource,
-            loyalty_type: ravenLoyaltyTypes(loyaltyType),
-        };
-        if (link) {
-            ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
-            window.location.href = link;
-        }
-    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ ref: containerRef, backgroundColor: '#fff', top: '76px', position: 'fixed', left: "".concat(leftPosition, "px"), borderRadius: 24, boxShadow: '0px 8px 24px 0px rgba(26, 26, 26, 0.10)', width: 'fit-content', zIndex: 1002, css: {
-            overflow: 'hidden',
-            opacity: 0,
-        } }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '20px 24px 20px 24px', backgroundColor: '#FFF1EC' }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2' }, { children: BUSINESS_DROPDOWN_HEADING })) })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', padding: '24px', columnGap: '48px', width: 'fit-content' }, { children: bdConfig.map(function (_a) {
-                    var title = _a.title, subtitle = _a.subtitle, details = _a.details, link = _a.link, ravenActionName = _a.ravenActionName;
-                    return (jsxRuntime.jsxs(BDHoverContainer, tslib.__assign({ className: 'bd-hover-container-js', onClick: function () { return handleBusinessDropdownClick(link, title, ravenActionName); } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', rowGap: '4px' }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', columnGap: '8px' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2', className: 'color-orange-on-hover-js', css: { transition: 'color 200ms ease' } }, { children: title })), jsxRuntime.jsx(AnimatedArrow, {})] })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', css: { marginTop: '4px', opacity: 0.75 } }, { children: subtitle }))] })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P3', color: 'subheading', css: { marginTop: '12px' } }, { children: details }))] }), title));
-                }) }))] })));
+          }, {
+            children: details
+          }))]
+        }), title);
+      })
+    }))]
+  }));
 };
 var templateObject_1;
 
-var ACCOUNT_OPTIONS_POPUP_CONFIG = [
-    {
-        text: 'My Profile',
-        icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, { width: 24, height: 24 }),
-        redirectionLink: '/accounts/profile',
-    },
-    {
-        text: 'My Trips',
-        icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, { width: 24, height: 24 }),
-        redirectionLink: '/accounts/trips',
-    },
-    {
-        text: 'Saved Cards',
-        icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
-        redirectionLink: '/accounts/expressway',
-    },
-    {
-        text: 'Saved Travellers',
-        icon: jsxRuntime.jsx(ctDesignIcons.Travellers, { width: 24, height: 24 }),
-        redirectionLink: '/account/travellers',
-    },
-    {
-        text: 'Hi-Five',
-        icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
-        redirectionLink: '/accounts/hi-five?src=fh',
-    },
-    {
-        text: 'Wallet',
-        icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 24, height: 24 }),
-        redirectionLink: '/accounts/wallet',
-    },
-    {
-        text: 'Settings',
-        icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, { width: 24, height: 24 }),
-        redirectionLink: '/account/settings',
-    },
-    {
-        text: 'Privacy Rights',
-        icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
-        redirectionLink: 'accounts/personal-data-dashboard',
-    },
-];
+var ACCOUNT_OPTIONS_POPUP_CONFIG = [{
+  text: 'My Profile',
+  icon: jsxRuntime.jsx(ctDesignIcons.MyAccount, {
+    width: 24,
+    height: 24
+  }),
+  redirectionLink: '/accounts/profile'
+}, {
+  text: 'My Trips',
+  icon: jsxRuntime.jsx(ctDesignIcons.MyTrips, {
+    width: 24,
+    height: 24
+  }),
+  redirectionLink: '/accounts/trips'
+}, {
+  text: 'Saved Cards',
+  icon: jsxRuntime.jsx(ctDesignIcons.SavedCard, {}),
+  redirectionLink: '/accounts/expressway'
+}, {
+  text: 'Saved Travellers',
+  icon: jsxRuntime.jsx(ctDesignIcons.Travellers, {
+    width: 24,
+    height: 24
+  }),
+  redirectionLink: '/account/travellers'
+}, {
+  text: 'Hi-Five',
+  icon: jsxRuntime.jsx(ctDesignIcons.HiFive, {}),
+  redirectionLink: '/accounts/hi-five?src=fh'
+}, {
+  text: 'Wallet',
+  icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
+    width: 24,
+    height: 24
+  }),
+  redirectionLink: '/accounts/wallet'
+}, {
+  text: 'Settings',
+  icon: jsxRuntime.jsx(ctDesignIcons.SettingsCog, {
+    width: 24,
+    height: 24
+  }),
+  redirectionLink: '/account/settings'
+}, {
+  text: 'Privacy Rights',
+  icon: jsxRuntime.jsx(ctDesignIcons.PrivacyRights, {}),
+  redirectionLink: 'accounts/personal-data-dashboard'
+}];
 var SIGN_OUT_TEXT = 'Logout';
 var MY_ACCOUNT_TEXT = 'My Account';
 var LOGGEDIN_USER_TEXT = 'You are logged in with';
@@ -551,326 +732,816 @@ var ACCOUNT_OPTIONS_CONTAINER_ID = 'account-options';
 var ACCOUNT_OPTIONS_CONTAINER_WIDTH = 328;
 
 var LoyaltyChip = function (_a) {
-    var icon = _a.icon, borderGradient = _a.borderGradient, backgroundGradient = _a.backgroundGradient, handleChipClick = _a.handleChipClick, chevronFillColor = _a.chevronFillColor;
-    var _b = useHeaderContext(), loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, ravenEventName = _b.ravenEventName;
-    var _d = react.useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var handleClick = react.useCallback(function () {
-        var _a;
-        if (handleChipClick) {
-            handleChipClick();
-        }
-        else {
-            var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-            var defaultPayload = {
-                action_name: "loyalty_account_click",
-                action_type: 'click',
-                u_utm_source: utmSource,
-                loyaltyType: ravenLoyaltyTypes(loyaltyType),
-            };
-            ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
-            window.location.href = '/all-offers/loyalty-october';
-        }
-    }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', position: 'relative', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', paddingLeft: '8px', paddingRight: isHovered ? '4px' : '8px', css: {
-            overflow: 'hidden',
-            height: 32,
-            paddingLeft: 8,
-            transition: 'padding-right 0.2s ease-in-out',
-        }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleClick }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, { css: {
-                    content: '""',
-                    position: 'absolute',
-                    inset: 0,
-                    borderRadius: 'inherit',
-                    background: backgroundGradient,
-                    zIndex: -2,
-                } }), jsxRuntime.jsx(ctDesignContainer.Container, { css: {
-                    content: '""',
-                    position: 'absolute',
-                    inset: 0,
-                    borderRadius: 'inherit',
-                    padding: '1px',
-                    background: borderGradient,
-                    WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
-                    WebkitMaskComposite: 'destination-out',
-                    maskComposite: 'exclude',
-                    zIndex: -1,
-                } }), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', position: 'relative' }, { children: icon })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: {
-                    overflow: 'hidden',
-                    maxWidth: isHovered ? 16 : 0,
-                    transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
-                    opacity: isHovered ? 0.5 : 0,
-                } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, { color: chevronFillColor }) }))] })));
+  var icon = _a.icon,
+    borderGradient = _a.borderGradient,
+    backgroundGradient = _a.backgroundGradient,
+    handleChipClick = _a.handleChipClick,
+    chevronFillColor = _a.chevronFillColor;
+  var _b = useHeaderContext(),
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c,
+    ravenEventName = _b.ravenEventName;
+  var _d = react.useState(false),
+    isHovered = _d[0],
+    setIsHovered = _d[1];
+  var handleClick = react.useCallback(function () {
+    var _a;
+    if (handleChipClick) {
+      handleChipClick();
+    } else {
+      var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+      var defaultPayload = {
+        action_name: "loyalty_account_click",
+        action_type: 'click',
+        u_utm_source: utmSource,
+        loyaltyType: ravenLoyaltyTypes(loyaltyType)
+      };
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = '/all-offers/loyalty-october';
+    }
+  }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    paddingLeft: '8px',
+    paddingRight: isHovered ? '4px' : '8px',
+    css: {
+      overflow: 'hidden',
+      height: 32,
+      paddingLeft: 8,
+      transition: 'padding-right 0.2s ease-in-out'
+    },
+    onMouseEnter: function () {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function () {
+      return setIsHovered(false);
+    },
+    onClick: handleClick
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, {
+      css: {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        borderRadius: 'inherit',
+        background: backgroundGradient,
+        zIndex: -2
+      }
+    }), jsxRuntime.jsx(ctDesignContainer.Container, {
+      css: {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        borderRadius: 'inherit',
+        padding: '1px',
+        background: borderGradient,
+        WebkitMask: 'linear-gradient(white, white) content-box, linear-gradient(white, white)',
+        WebkitMaskComposite: 'destination-out',
+        maskComposite: 'exclude',
+        zIndex: -1
+      }
+    }), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative'
+    }, {
+      children: icon
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      alignItems: 'center',
+      css: {
+        overflow: 'hidden',
+        maxWidth: isHovered ? 16 : 0,
+        transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
+        opacity: isHovered ? 0.5 : 0
+      }
+    }, {
+      children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {
+        color: chevronFillColor
+      })
+    }))]
+  }));
 };
 
 exports.LOBS_VALUES = void 0;
 (function (LOBS_VALUES) {
-    LOBS_VALUES["FLIGHTS"] = "Flights";
-    LOBS_VALUES["HOTELS"] = "Hotels";
-    LOBS_VALUES["BUSES"] = "Buses";
-    LOBS_VALUES["TRAINS"] = "Trains";
-    LOBS_VALUES["PACKAGES"] = "Packages";
+  LOBS_VALUES["FLIGHTS"] = "Flights";
+  LOBS_VALUES["HOTELS"] = "Hotels";
+  LOBS_VALUES["BUSES"] = "Buses";
+  LOBS_VALUES["TRAINS"] = "Trains";
+  LOBS_VALUES["HOLIDAYS"] = "Holidays";
 })(exports.LOBS_VALUES || (exports.LOBS_VALUES = {}));
 
 exports.LoyaltyType = void 0;
 (function (LoyaltyType) {
-    LoyaltyType["FkVip"] = "FkVip";
-    LoyaltyType["FkPremium"] = "FkPremium";
-    LoyaltyType["InsiderIcon"] = "InsiderIcon";
-    LoyaltyType["InsiderElite"] = "InsiderElite";
-    LoyaltyType["CtLoyalty"] = "CtLoyalty";
+  LoyaltyType["FkVip"] = "FkVip";
+  LoyaltyType["FkPremium"] = "FkPremium";
+  LoyaltyType["InsiderIcon"] = "InsiderIcon";
+  LoyaltyType["InsiderElite"] = "InsiderElite";
+  LoyaltyType["CtLoyalty"] = "CtLoyalty";
 })(exports.LoyaltyType || (exports.LoyaltyType = {}));
 
 var _a;
-var LOYALTY_DATA = (_a = {},
-    _a[exports.LoyaltyType.FkVip] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.FkBlackIcon, {}),
-        borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
-        backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
-        chevronFillColor: '#FFF',
-    },
-    _a[exports.LoyaltyType.FkPremium] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.FkGold, {}),
-        borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
-        backgroundGradient: '#191717',
-        chevronFillColor: '#FFF',
-    },
-    _a[exports.LoyaltyType.InsiderIcon] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
-        borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
-        backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
-        chevronFillColor: '#FFF',
+var LOYALTY_DATA = (_a = {}, _a[exports.LoyaltyType.FkVip] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.FkBlackIcon, {}),
+  borderGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
+  backgroundGradient: 'linear-gradient(217.07deg, #0B182A 19.65%, #434E57 54.8%, #595952 89.95%)',
+  chevronFillColor: '#FFF'
+}, _a[exports.LoyaltyType.FkPremium] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.FkGold, {}),
+  borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
+  backgroundGradient: '#191717',
+  chevronFillColor: '#FFF'
+}, _a[exports.LoyaltyType.InsiderIcon] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.InsiderIcon, {}),
+  borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
+  backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
+  chevronFillColor: '#FFF'
+}, _a[exports.LoyaltyType.InsiderElite] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
+  borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
+  backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
+  chevronFillColor: '#FFF'
+}, _a[exports.LoyaltyType.CtLoyalty] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.CtLoyalty, {}),
+  borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
+  backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
+  chevronFillColor: '#1A1A1A'
+}, _a);
+
+var ExpandableItem = function (_a) {
+  var icon = _a.icon,
+    handleChipClick = _a.handleChipClick,
+    value = _a.value,
+    type = _a.type;
+  var _b = useHeaderContext(),
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c;
+  var _d = react.useState(false),
+    isHovered = _d[0],
+    setIsHovered = _d[1];
+  var handleDefaultClick = react.useCallback(function () {
+    var _a;
+    if (handleChipClick) {
+      handleChipClick();
+    } else {
+      var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+      var defaultPayload = {
+        action_name: "".concat(type, "_account_click"),
+        action_type: 'click',
+        u_utm_source: utmSource,
+        loyaltyType: ravenLoyaltyTypes(loyaltyType)
+      };
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+      var redirectUrls = {
+        supercoin: '/all-offers/supercoins/',
+        wallet: '/accounts/wallet'
+      };
+      if (redirectUrls[type]) {
+        window.location.href = redirectUrls[type];
+      }
+    }
+  }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    css: {
+      height: 32,
+      paddingLeft: 8,
+      paddingRight: isHovered ? 4 : 8,
+      transition: 'padding-right 0.2s ease-in-out',
+      background: isHovered ? '#ffd7ca' : '#ffe6df'
     },
-    _a[exports.LoyaltyType.InsiderElite] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.InsiderElite, {}),
-        borderGradient: 'linear-gradient(230.68deg, rgba(208, 175, 101, 0) 10.1%, #D0AF65 45.74%)',
-        backgroundGradient: 'linear-gradient(111deg, #2E3042 0%, #1A1C23 100%)',
-        chevronFillColor: '#FFF',
+    onMouseEnter: function () {
+      return setIsHovered(true);
     },
-    _a[exports.LoyaltyType.CtLoyalty] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.CtLoyalty, {}),
-        borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
-        backgroundGradient: 'linear-gradient(110.82deg, #FFF9EC 0%, #FEE3A8 100%)',
-        chevronFillColor: '#1A1A1A',
+    onMouseLeave: function () {
+      return setIsHovered(false);
     },
-    _a);
-
-var ExpandableItem = function (_a) {
-    var icon = _a.icon, handleChipClick = _a.handleChipClick, value = _a.value, type = _a.type;
-    var _b = useHeaderContext(), loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c;
-    var _d = react.useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var handleDefaultClick = react.useCallback(function () {
-        var _a;
-        if (handleChipClick) {
-            handleChipClick();
-        }
-        else {
-            var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-            var defaultPayload = {
-                action_name: "".concat(type, "_account_click"),
-                action_type: 'click',
-                u_utm_source: utmSource,
-                loyaltyType: ravenLoyaltyTypes(loyaltyType),
-            };
-            ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
-            var redirectUrls = {
-                supercoin: '/all-offers/supercoins/',
-                wallet: '/accounts/wallet',
-            };
-            if (redirectUrls[type]) {
-                window.location.href = redirectUrls[type];
-            }
-        }
-    }, [
-        handleChipClick,
-        type,
-        loyaltyType,
-        isUserLoggedIn,
-        ravenEventName,
-        ravenPayload,
-        ravenPushCallback,
-        ravenPageName,
-    ]);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', cursor: 'pointer', css: {
-            height: 32,
-            paddingLeft: 8,
-            paddingRight: isHovered ? 4 : 8,
-            transition: 'padding-right 0.2s ease-in-out',
-            background: isHovered ? '#ffd7ca' : '#ffe6df',
-        }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleDefaultClick }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: { gap: '4px' } }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', isClickable: true }, { children: value }))] })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', css: {
-                    overflow: 'hidden',
-                    maxWidth: isHovered ? 16 : 0,
-                    transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
-                    opacity: isHovered ? 1 : 0,
-                } }, { children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {}) }))] })));
+    onClick: handleDefaultClick
+  }, {
+    children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      alignItems: 'center',
+      css: {
+        gap: '4px'
+      }
+    }, {
+      children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+        variant: 'B3',
+        isClickable: true
+      }, {
+        children: value
+      }))]
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      alignItems: 'center',
+      css: {
+        overflow: 'hidden',
+        maxWidth: isHovered ? 16 : 0,
+        transition: 'max-width 0.2s ease-in-out, opacity 0.2s ease-in-out',
+        opacity: isHovered ? 1 : 0
+      }
+    }, {
+      children: jsxRuntime.jsx(ctDesignIcons.HeaderChevronRight, {})
+    }))]
+  }));
 };
 var RewardsSection = function () {
-    var _a;
-    var _b = useHeaderContext(), selectedLoyaltyType = _b.loyaltyType, _c = _b.fkSupercoinBurnBalance, superCoinBalance = _c === void 0 ? 0 : _c, _d = _b.walletBalance, walletBalance = _d === void 0 ? 0 : _d, loyaltyLoading = _b.loyaltyLoading, superCoinsLoading = _b.superCoinsLoading, walletLoading = _b.walletLoading, walletChipClick = _b.walletChipClick, supercoinsChipClick = _b.supercoinsChipClick, loyaltyChipClick = _b.loyaltyChipClick, hideWalletChip = _b.hideWalletChip, hideSupercoinsChip = _b.hideSupercoinsChip, hideLoyaltyChip = _b.hideLoyaltyChip;
-    var shouldShowLoyalty = loyaltyLoading || (selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip);
-    var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
-    var shouldShowWallet = walletLoading || !hideWalletChip;
-    if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
-        return null;
+  var _a;
+  var _b = useHeaderContext(),
+    selectedLoyaltyType = _b.loyaltyType,
+    _c = _b.fkSupercoinBurnBalance,
+    superCoinBalance = _c === void 0 ? 0 : _c,
+    _d = _b.walletBalance,
+    walletBalance = _d === void 0 ? 0 : _d,
+    loyaltyLoading = _b.loyaltyLoading,
+    superCoinsLoading = _b.superCoinsLoading,
+    walletLoading = _b.walletLoading,
+    walletChipClick = _b.walletChipClick,
+    supercoinsChipClick = _b.supercoinsChipClick,
+    loyaltyChipClick = _b.loyaltyChipClick,
+    hideWalletChip = _b.hideWalletChip,
+    hideSupercoinsChip = _b.hideSupercoinsChip,
+    hideLoyaltyChip = _b.hideLoyaltyChip;
+  var shouldShowLoyalty = loyaltyLoading || selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip;
+  var shouldShowSupercoin = superCoinsLoading || !hideSupercoinsChip;
+  var shouldShowWallet = walletLoading || !hideWalletChip;
+  if (!shouldShowLoyalty && !shouldShowSupercoin && !shouldShowWallet) {
+    return null;
+  }
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    display: 'flex',
+    padding: '0 16px 16px 16px',
+    justifyContent: 'flex-start',
+    css: {
+      alignSelf: 'stretch',
+      gap: '4px'
     }
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '0 16px 16px 16px', justifyContent: 'flex-start', css: { alignSelf: 'stretch', gap: '4px' } }, { children: [loyaltyLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (selectedLoyaltyType &&
-                LOYALTY_DATA[selectedLoyaltyType] &&
-                !hideLoyaltyChip && (jsxRuntime.jsx(LoyaltyChip, { icon: LOYALTY_DATA[selectedLoyaltyType].icon, borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient, backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient, chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF', handleChipClick: loyaltyChipClick }))), superCoinsLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideSupercoinsChip && (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, { width: 20, height: 20 }), value: superCoinBalance, handleChipClick: supercoinsChipClick, type: 'supercoin' }))), walletLoading ? (jsxRuntime.jsx(ctDesignContainer.Container, { width: '50px', height: '32px', borderRadius: '8px', backgroundColor: '#efefef' })) : (!hideWalletChip && (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 20, height: 20 }), value: walletBalance, handleChipClick: walletChipClick, type: 'wallet' })))] })));
+  }, {
+    children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px',
+      backgroundColor: '#efefef'
+    }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && !hideLoyaltyChip && jsxRuntime.jsx(LoyaltyChip, {
+      icon: LOYALTY_DATA[selectedLoyaltyType].icon,
+      borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
+      backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
+      chevronFillColor: ((_a = LOYALTY_DATA[selectedLoyaltyType]) === null || _a === void 0 ? void 0 : _a.chevronFillColor) || '#FFF',
+      handleChipClick: loyaltyChipClick
+    }), superCoinsLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px',
+      backgroundColor: '#efefef'
+    }) : !hideSupercoinsChip && jsxRuntime.jsx(ExpandableItem, {
+      icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
+        width: 20,
+        height: 20
+      }),
+      value: superCoinBalance,
+      handleChipClick: supercoinsChipClick,
+      type: 'supercoin'
+    }), walletLoading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px',
+      backgroundColor: '#efefef'
+    }) : !hideWalletChip && jsxRuntime.jsx(ExpandableItem, {
+      icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
+        width: 20,
+        height: 20
+      }),
+      value: walletBalance,
+      handleChipClick: walletChipClick,
+      type: 'wallet'
+    })]
+  }));
 };
 
 var AccountDropdownContent = function (_a) {
-    var isOpen = _a.isOpen;
-    var _b = useHeaderContext(), handleLogoutClick = _b.handleLogoutClick, userName = _b.userName, userMobileNumber = _b.userMobileNumber, countryCode = _b.countryCode, userDetailsLoading = _b.userDetailsLoading, loyaltyType = _b.loyaltyType, isUserLoggedIn = _b.isUserLoggedIn, ravenEventName = _b.ravenEventName, ravenPageName = _b.ravenPageName, _c = _b.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, ravenPushCallback = _b.ravenPushCallback;
-    var containerRef = useDropdownAnimation(isOpen).containerRef;
-    var _d = react.useMemo(function () { return ({
+  var isOpen = _a.isOpen;
+  var _b = useHeaderContext(),
+    handleLogoutClick = _b.handleLogoutClick,
+    userName = _b.userName,
+    userMobileNumber = _b.userMobileNumber,
+    countryCode = _b.countryCode,
+    userDetailsLoading = _b.userDetailsLoading,
+    loyaltyType = _b.loyaltyType,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    ravenEventName = _b.ravenEventName,
+    ravenPageName = _b.ravenPageName,
+    _c = _b.ravenPayload,
+    ravenPayload = _c === void 0 ? {} : _c,
+    ravenPushCallback = _b.ravenPushCallback;
+  var containerRef = useDropdownAnimation(isOpen).containerRef;
+  var _d = react.useMemo(function () {
+      return {
         userGreeting: userName ? "Hello ".concat(userName, "!") : '',
-        phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '',
-    }); }, [userName, userMobileNumber, countryCode]), userGreeting = _d.userGreeting, phoneNumber = _d.phoneNumber;
-    var generateRavenPayload = function (actionName) {
-        var _a;
-        return ({
-            action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
-            action_type: 'click',
-            u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
-            loyalty_type: ravenLoyaltyTypes(loyaltyType),
-        });
+        phoneNumber: countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : ''
+      };
+    }, [userName, userMobileNumber, countryCode]),
+    userGreeting = _d.userGreeting,
+    phoneNumber = _d.phoneNumber;
+  var generateRavenPayload = function (actionName) {
+    var _a;
+    return {
+      action_name: actionName.toLowerCase().replace(/[\s-]/g, '') + '_account_click',
+      action_type: 'click',
+      u_utm_source: (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic',
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
     };
-    var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
-        ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
-        window.location.href = redirectLink;
-    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-    react.useCallback(function () {
-        ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
-        handleLogoutClick();
-    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
-    var positionAccountOptionsDiv = react.useCallback(function () {
-        var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
-        var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
-        if (headerAccBtn && accountOptionsElem) {
-            var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
-            accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
-        }
-    }, []);
-    react.useEffect(function () {
-        positionAccountOptionsDiv();
-    }, [positionAccountOptionsDiv]);
-    var renderUserData = function () {
-        var renderContent = function (loading, content, variant, color) { return (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: variant, color: color }, { children: loading ? (jsxRuntime.jsx(ctDesignContainer.Container, { height: variant === 'HM3' ? '18px' : '12px', width: variant === 'HM3' ? '140px' : '200px', backgroundColor: '#efefef', borderRadius: '8px' })) : (content) }))); };
-        return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', css: { gap: '4px' } }, { children: userGreeting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')] })) })));
+  };
+  var handleAccountOptionsClick = react.useCallback(function (text, redirectLink) {
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
+    window.location.href = redirectLink;
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  react.useCallback(function () {
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
+    handleLogoutClick();
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
+  var positionAccountOptionsDiv = react.useCallback(function () {
+    var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
+    var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
+    if (headerAccBtn && accountOptionsElem) {
+      var headerBtnRight = headerAccBtn.getBoundingClientRect().right;
+      accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
+    }
+  }, []);
+  react.useEffect(function () {
+    positionAccountOptionsDiv();
+  }, [positionAccountOptionsDiv]);
+  var renderUserData = function () {
+    var renderContent = function (loading, content, variant, color) {
+      return jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+        variant: variant,
+        color: color
+      }, {
+        children: loading ? jsxRuntime.jsx(ctDesignContainer.Container, {
+          height: variant === 'HM3' ? '18px' : '12px',
+          width: variant === 'HM3' ? '140px' : '200px',
+          backgroundColor: '#efefef',
+          borderRadius: '8px'
+        }) : content
+      }));
     };
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ id: ACCOUNT_OPTIONS_CONTAINER_ID, ref: containerRef, display: 'flex', flexDirection: 'column', borderRadius: '16px', zIndex: 1002, top: '76px', position: 'fixed', css: { opacity: 0, overflow: 'hidden' }, width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"), background: '#FFF1EC' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '16px', height: '76px' }, { children: renderUserData() })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'column', padding: '8px', backgroundColor: 'white', rowGap: '8px', css: {
-                    borderBottomLeftRadius: 12,
-                    borderBottomRightRadius: 12,
-                } }, { children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
-                        var text = _a.text, icon = _a.icon, redirectionLink = _a.redirectionLink;
-                        return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ padding: '8px', borderRadius: '8px', cursor: 'pointer', onClick: function () { return handleAccountOptionsClick(text, redirectionLink); }, css: accountOptionHoverStyles }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', cursor: 'pointer', css: { columnGap: '8px' } }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' } }, { children: text }))] })) }), "account-option-".concat(text)));
-                    }), jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
-                            borderBottom: '1px dashed #E6E6E6',
-                        } }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '8px', borderRadius: '8px', cursor: 'pointer', columnGap: '8px', onClick: handleLogoutClick, css: logoutButtonHoverStyles }, { children: [jsxRuntime.jsx(ctDesignIcons.Signout, { height: 24, width: 24 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', css: { display: 'flex', alignItems: 'center', cursor: 'pointer' }, color: 'warning' }, { children: SIGN_OUT_TEXT }))] }))] }))] })));
+    return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      flexDirection: 'column',
+      css: {
+        gap: '4px'
+      }
+    }, {
+      children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [renderContent(userDetailsLoading, LOGGEDIN_USER_TEXT, 'P3', 'subheading'), renderContent(userDetailsLoading, phoneNumber, 'HM3', 'primary')]
+      })
+    }));
+  };
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    id: ACCOUNT_OPTIONS_CONTAINER_ID,
+    ref: containerRef,
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '16px',
+    zIndex: 1002,
+    top: '76px',
+    position: 'fixed',
+    css: {
+      opacity: 0,
+      overflow: 'hidden'
+    },
+    width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
+    background: '#FFF1EC'
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      padding: '16px',
+      height: '76px'
+    }, {
+      children: renderUserData()
+    })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '8px',
+      backgroundColor: 'white',
+      rowGap: '8px',
+      css: {
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12
+      }
+    }, {
+      children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
+        var text = _a.text,
+          icon = _a.icon,
+          redirectionLink = _a.redirectionLink;
+        return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+          padding: '8px',
+          borderRadius: '8px',
+          cursor: 'pointer',
+          onClick: function () {
+            return handleAccountOptionsClick(text, redirectionLink);
+          },
+          css: accountOptionHoverStyles
+        }, {
+          children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+            display: 'flex',
+            cursor: 'pointer',
+            css: {
+              columnGap: '8px'
+            }
+          }, {
+            children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+              variant: 'P1',
+              css: {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer'
+              }
+            }, {
+              children: text
+            }))]
+          }))
+        }), "account-option-".concat(text));
+      }), jsxRuntime.jsx(ctDesignDivider.Divider, {
+        css: {
+          borderBottom: '1px dashed #E6E6E6'
+        }
+      }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        display: 'flex',
+        padding: '8px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        columnGap: '8px',
+        onClick: handleLogoutClick,
+        css: logoutButtonHoverStyles
+      }, {
+        children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
+          height: 24,
+          width: 24
+        }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+          variant: 'P1',
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer'
+          },
+          color: 'warning'
+        }, {
+          children: SIGN_OUT_TEXT
+        }))]
+      }))]
+    }))]
+  }));
 };
 
 var UserAccount = function () {
-    var _a = useHeaderContext(), isNovacThemeEnabled = _a.isNovacThemeEnabled, ravenEventName = _a.ravenEventName, _b = _a.ravenPayload, ravenPayload = _b === void 0 ? {} : _b, ravenPushCallback = _a.ravenPushCallback, isUserLoggedIn = _a.isUserLoggedIn, loyaltyType = _a.loyaltyType, ravenPageName = _a.ravenPageName;
-    var _c = useHoverDropdown({ openDelay: 0 }), isDropdownVisible = _c.isDropdownVisible, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
-    var _d = react.useState(false), scrolled = _d[0], setScrolled = _d[1];
-    react.useEffect(function () {
-        var handleScroll = function () {
-            setScrolled(window.scrollY >= 50);
-        };
-        window.addEventListener('scroll', handleScroll);
-        return function () { return window.removeEventListener('scroll', handleScroll); };
-    }, []);
-    var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
-    var hoverColor = theme.hoverColor, typographyColor = theme.typographyColor;
-    var triggerRavenEventOnHover = react.useCallback(function () {
-        var _a;
-        var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-        var defaultPayload = {
-            action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
-            action_type: 'hover',
-            u_utm_source: utmSource,
-            loyalty_type: ravenLoyaltyTypes(loyaltyType),
-        };
-        ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
-    }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', padding: '8px 12px', alignItems: 'center', borderRadius: '12px', height: '100%', cursor: 'pointer', css: { columnGap: 8, height: 64 }, onMouseEnter: function () {
-                    handleOnMouseEnter(0);
-                    triggerRavenEventOnHover();
-                }, onMouseLeave: handleOnMouseLeave, id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID }, { children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, { color: isDropdownVisible ? hoverColor : typographyColor }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', css: { cursor: 'pointer' }, colorCode: isDropdownVisible ? hoverColor : typographyColor }, { children: MY_ACCOUNT_TEXT })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, { width: 20, height: 20, fill: isDropdownVisible ? hoverColor : typographyColor })] }))] })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(AccountDropdownContent, { isOpen: isDropdownVisible }) }))] }));
+  var _a = useHeaderContext(),
+    isNovacThemeEnabled = _a.isNovacThemeEnabled,
+    ravenEventName = _a.ravenEventName,
+    _b = _a.ravenPayload,
+    ravenPayload = _b === void 0 ? {} : _b,
+    ravenPushCallback = _a.ravenPushCallback,
+    isUserLoggedIn = _a.isUserLoggedIn,
+    loyaltyType = _a.loyaltyType,
+    ravenPageName = _a.ravenPageName;
+  var _c = useHoverDropdown({
+      openDelay: 0
+    }),
+    isDropdownVisible = _c.isDropdownVisible,
+    handleOnMouseEnter = _c.handleOnMouseEnter,
+    handleOnMouseLeave = _c.handleOnMouseLeave,
+    handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
+  var _d = react.useState(false),
+    scrolled = _d[0],
+    setScrolled = _d[1];
+  react.useEffect(function () {
+    var handleScroll = function () {
+      setScrolled(window.scrollY >= 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+  var hoverColor = theme.hoverColor,
+    typographyColor = theme.typographyColor;
+  var triggerRavenEventOnHover = react.useCallback(function () {
+    var _a;
+    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+    var defaultPayload = {
+      action_name: "".concat(MY_ACCOUNT_TEXT.toLowerCase().replace(/[\s-]/g, ''), "_header_hover"),
+      action_type: 'hover',
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, defaultPayload, ravenPayload, ravenPushCallback, ravenPageName);
+  }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
+  return jsxRuntime.jsxs(ctDesignContainer.Container, {
+    children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      padding: '8px 12px',
+      alignItems: 'center',
+      borderRadius: '12px',
+      height: '100%',
+      cursor: 'pointer',
+      css: {
+        columnGap: 8,
+        height: 64
+      },
+      onMouseEnter: function () {
+        handleOnMouseEnter(0);
+        triggerRavenEventOnHover();
+      },
+      onMouseLeave: handleOnMouseLeave,
+      id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
+    }, {
+      children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
+        color: isDropdownVisible ? hoverColor : typographyColor
+      }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
+      }, {
+        children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+          variant: 'B2',
+          css: {
+            cursor: 'pointer'
+          },
+          colorCode: isDropdownVisible ? hoverColor : typographyColor
+        }, {
+          children: MY_ACCOUNT_TEXT
+        })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
+          width: 20,
+          height: 20,
+          fill: isDropdownVisible ? hoverColor : typographyColor
+        })]
+      }))]
+    })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
+      show: isDropdownVisible,
+      marginTop: '64px',
+      handleDropdownMouseEnter: handleDropdownMouseEnter,
+      handleDropdownMouseLeave: handleDropdownMouseLeave,
+      onMaskClick: handleDropdownMouseLeave
+    }, {
+      children: jsxRuntime.jsx(AccountDropdownContent, {
+        isOpen: isDropdownVisible
+      })
+    }))]
+  });
 };
 
 var Header = function (props) {
-    return (jsxRuntime.jsx(HeaderProvider, tslib.__assign({ value: props }, { children: jsxRuntime.jsx(HeaderContent, {}) })));
+  return jsxRuntime.jsx(HeaderProvider, tslib.__assign({
+    value: props
+  }, {
+    children: jsxRuntime.jsx(HeaderContent, {})
+  }));
 };
 var HeaderContent = function () {
-    var _a;
-    var _b = useHeaderContext(), onLoginButtonClick = _b.onLoginButtonClick, _c = _b.showAllLobs, showAllLobs = _c === void 0 ? false : _c, isUserLoggedIn = _b.isUserLoggedIn, loyaltyType = _b.loyaltyType, _d = _b.isNovacThemeEnabled, isNovacThemeEnabled = _d === void 0 ? false : _d, _e = _b.ravenPayload, ravenPayload = _e === void 0 ? {} : _e, ravenPushCallback = _b.ravenPushCallback, ravenPageName = _b.ravenPageName, ravenEventName = _b.ravenEventName;
-    var _f = react.useState(false), scrolled = _f[0], setScrolled = _f[1];
-    react.useEffect(function () {
-        var handleScroll = function () {
-            setScrolled(window.scrollY >= 50);
-        };
-        window.addEventListener('scroll', handleScroll);
-        return function () { return window.removeEventListener('scroll', handleScroll); };
-    }, []);
-    var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
-    var headerBackground = headerTheme.headerBackground, logoFill = headerTheme.logoFill, loginButtonColorVariant = headerTheme.loginButtonColorVariant, hoverColor = headerTheme.hoverColor, fkcompanyColor = headerTheme.fkcompanyColor, typographyColor = headerTheme.typographyColor;
-    var _g = useHoverDropdown({
-        openDelay: 0,
-    }), isDropdownVisible = _g.isDropdownVisible, hoveredElemIndex = _g.hoveredElemIndex, handleOnMouseEnter = _g.handleOnMouseEnter, handleOnMouseLeave = _g.handleOnMouseLeave, handleDropdownMouseEnter = _g.handleDropdownMouseEnter, handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
-    var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
-    var createPayload = react.useCallback(function (actionName, actionType) { return ({
-        action_name: actionName,
-        action_type: actionType,
-        u_utm_source: utmSource,
-        loyalty_type: ravenLoyaltyTypes(loyaltyType),
-    }); }, [utmSource, loyaltyType]);
-    var handleNavbarOptionsClick = react.useCallback(function (option) {
-        if (option.isClickable && option.link) {
-            var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
-            var payload = createPayload(actionName, 'click');
-            ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
-            window.location.href = option.link;
+  var _a;
+  var _b = useHeaderContext(),
+    onLoginButtonClick = _b.onLoginButtonClick,
+    _c = _b.showAllLobs,
+    showAllLobs = _c === void 0 ? false : _c,
+    isUserLoggedIn = _b.isUserLoggedIn,
+    loyaltyType = _b.loyaltyType,
+    _d = _b.isNovacThemeEnabled,
+    isNovacThemeEnabled = _d === void 0 ? false : _d,
+    _e = _b.ravenPayload,
+    ravenPayload = _e === void 0 ? {} : _e,
+    ravenPushCallback = _b.ravenPushCallback,
+    ravenPageName = _b.ravenPageName,
+    ravenEventName = _b.ravenEventName;
+  var _f = react.useState(false),
+    scrolled = _f[0],
+    setScrolled = _f[1];
+  react.useEffect(function () {
+    var handleScroll = function () {
+      setScrolled(window.scrollY >= 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  var headerTheme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+  var headerBackground = headerTheme.headerBackground,
+    logoFill = headerTheme.logoFill,
+    loginButtonColorVariant = headerTheme.loginButtonColorVariant,
+    hoverColor = headerTheme.hoverColor,
+    fkcompanyColor = headerTheme.fkcompanyColor,
+    typographyColor = headerTheme.typographyColor;
+  var _g = useHoverDropdown({
+      openDelay: 0
+    }),
+    isDropdownVisible = _g.isDropdownVisible,
+    hoveredElemIndex = _g.hoveredElemIndex,
+    handleOnMouseEnter = _g.handleOnMouseEnter,
+    handleOnMouseLeave = _g.handleOnMouseLeave,
+    handleDropdownMouseEnter = _g.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _g.handleDropdownMouseLeave;
+  var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
+  var createPayload = react.useCallback(function (actionName, actionType) {
+    return {
+      action_name: actionName,
+      action_type: actionType,
+      u_utm_source: utmSource,
+      loyalty_type: ravenLoyaltyTypes(loyaltyType)
+    };
+  }, [utmSource, loyaltyType]);
+  var handleNavbarOptionsClick = react.useCallback(function (option) {
+    if (option.isClickable && option.link) {
+      var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_click");
+      var payload = createPayload(actionName, 'click');
+      ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+      window.location.href = option.link;
+    }
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  var handleHomeClick = react.useCallback(function () {
+    var payload = createPayload('home_header_click', 'click');
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+    window.location.href = '/';
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  var triggerRavenEventOnHover = react.useCallback(function (option) {
+    var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
+    var payload = createPayload(actionName, 'hover');
+    ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
+  }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      display: 'flex',
+      top: 0,
+      position: 'sticky',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 1000,
+      height: '64px',
+      background: headerBackground,
+      css: {
+        gap: '24px',
+        flexShrink: 0,
+        borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
+        transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out'
+      }
+    }, {
+      children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 28px',
+        flex: 1,
+        css: {
+          gap: '24px',
+          maxWidth: 1440
         }
-    }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-    var handleHomeClick = react.useCallback(function () {
-        var payload = createPayload('home_header_click', 'click');
-        ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
-        window.location.href = '/';
-    }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-    var triggerRavenEventOnHover = react.useCallback(function (option) {
-        var actionName = "".concat(option.text.toLowerCase().replace(/\s/g, ''), "_header_hover");
-        var payload = createPayload(actionName, 'hover');
-        ravenSDKTrigger(isUserLoggedIn, ravenEventName, payload, ravenPayload, ravenPushCallback, ravenPageName);
-    }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', top: 0, position: 'sticky', width: '100%', alignItems: 'center', justifyContent: 'center', zIndex: 1000, height: '64px', background: headerBackground, css: {
-                    gap: '24px',
-                    flexShrink: 0,
-                    borderBottom: headerBackground === 'transparent' ? '' : '1px solid #E6E6E6',
-                    transition: 'background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out',
-                } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 28px', flex: 1, css: {
-                        gap: '24px',
-                        maxWidth: 1440,
-                    } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', onClick: handleHomeClick }, { children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, { fillColor: logoFill }), jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
-                                        width: 12,
-                                        marginLeft: 2,
-                                        marginRight: 2,
-                                        transform: 'rotate(90deg)',
-                                        borderBottom: '1px solid #e0e0e0',
-                                    } }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, { color: fkcompanyColor })] })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', columnGap: '24px' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', columnGap: '4px' }, { children: NAVBAR_OPTIONS.map(function (option, index) {
-                                        var text = option.text, LeftIcon = option.lefticon, RightIcon = option.rightIcon, isHoverable = option.isHoverable;
-                                        var isHovered = hoveredElemIndex === index;
-                                        return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: function () {
-                                                        handleOnMouseEnter(index);
-                                                        if (option.isHoverable) {
-                                                            triggerRavenEventOnHover(option);
-                                                        }
-                                                    }, onMouseLeave: handleOnMouseLeave, display: 'flex', flexDirection: 'row', alignItems: 'center', padding: '8px 12px 8px 12px', cursor: 'pointer', position: 'relative', columnGap: 8, height: '64px', onClick: function () { return handleNavbarOptionsClick(option); } }, { children: [jsxRuntime.jsx(LeftIcon, { color: isHovered ? hoverColor : typographyColor }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', colorCode: isHovered ? hoverColor : typographyColor, isClickable: true }, { children: text })), RightIcon && (jsxRuntime.jsx(RightIcon, { width: 20, height: 20, fill: isHovered ? hoverColor : typographyColor }))] }))] }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: hoveredElemIndex === index && isHoverable && isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(BusinessDropdownContent, { isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible }) }))] }));
-                                    }) })), isUserLoggedIn && (jsxRuntime.jsx(ctDesignDivider.Divider, { css: {
-                                        width: 12,
-                                        margin: '0 -18px',
-                                        transform: 'rotate(90deg)',
-                                        borderBottom: '1px solid #e0e0e0',
-                                    } })), jsxRuntime.jsx(ctDesignContainer.Container, { children: isUserLoggedIn ? (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, { children: jsxRuntime.jsx(UserAccount, {}) }))) : (jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ onClick: onLoginButtonClick, css: tslib.__assign({ width: 153, height: 40 }, getLoginButtonBgColorStyles(headerBackground === 'transparent')), loading: false, color: loginButtonColorVariant, variant: ctDesignButton.ButtonVariant.OUTLINE }, { children: LOG_IN_TEXT }))) })] }))] })) })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})] }));
+      }, {
+        children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          onClick: handleHomeClick
+        }, {
+          children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
+            fillColor: logoFill
+          }), jsxRuntime.jsx(ctDesignDivider.Divider, {
+            css: {
+              width: 12,
+              marginLeft: 2,
+              marginRight: 2,
+              transform: 'rotate(90deg)',
+              borderBottom: '1px solid #e0e0e0'
+            }
+          }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
+            color: fkcompanyColor
+          })]
+        })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          columnGap: '24px'
+        }, {
+          children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            columnGap: '4px'
+          }, {
+            children: NAVBAR_OPTIONS.map(function (option, index) {
+              var text = option.text,
+                LeftIcon = option.lefticon,
+                RightIcon = option.rightIcon,
+                isHoverable = option.isHoverable;
+              var isHovered = hoveredElemIndex === index;
+              return jsxRuntime.jsxs(ctDesignContainer.Container, {
+                children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+                  onMouseEnter: function () {
+                    handleOnMouseEnter(index);
+                    if (option.isHoverable) {
+                      triggerRavenEventOnHover(option);
+                    }
+                  },
+                  onMouseLeave: handleOnMouseLeave,
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: '8px 12px 8px 12px',
+                  cursor: 'pointer',
+                  position: 'relative',
+                  columnGap: 8,
+                  height: '64px',
+                  onClick: function () {
+                    return handleNavbarOptionsClick(option);
+                  }
+                }, {
+                  children: [jsxRuntime.jsx(LeftIcon, {
+                    color: isHovered ? hoverColor : typographyColor
+                  }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                  }, {
+                    children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+                      variant: 'B2',
+                      colorCode: isHovered ? hoverColor : typographyColor,
+                      isClickable: true
+                    }, {
+                      children: text
+                    })), RightIcon && jsxRuntime.jsx(RightIcon, {
+                      width: 20,
+                      height: 20,
+                      fill: isHovered ? hoverColor : typographyColor
+                    })]
+                  }))]
+                }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
+                  show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
+                  marginTop: '64px',
+                  handleDropdownMouseEnter: handleDropdownMouseEnter,
+                  handleDropdownMouseLeave: handleDropdownMouseLeave,
+                  onMaskClick: handleDropdownMouseLeave
+                }, {
+                  children: jsxRuntime.jsx(BusinessDropdownContent, {
+                    isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
+                  })
+                }))]
+              });
+            })
+          })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
+            css: {
+              width: 12,
+              margin: '0 -18px',
+              transform: 'rotate(90deg)',
+              borderBottom: '1px solid #e0e0e0'
+            }
+          }), jsxRuntime.jsx(ctDesignContainer.Container, {
+            children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center'
+            }, {
+              children: jsxRuntime.jsx(UserAccount, {})
+            })) : jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({
+              onClick: onLoginButtonClick,
+              css: tslib.__assign({
+                width: 153,
+                height: 40
+              }, getLoginButtonBgColorStyles(headerBackground === 'transparent')),
+              loading: false,
+              color: loginButtonColorVariant,
+              variant: ctDesignButton.ButtonVariant.OUTLINE
+            }, {
+              children: LOG_IN_TEXT
+            }))
+          })]
+        }))]
+      }))
+    })), showAllLobs && jsxRuntime.jsx(LobsHeader, {})]
+  });
 };
 
 exports.Header = Header;