@cleartrip/ct-design-header 1.2.0-SNAPSHOT-snapshot-anim.0 → 1.2.0-SNAPSHOT-styled-header-test.0

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

@@ -9,347 +9,492 @@ var ctDesignDivider = require('@cleartrip/ct-design-divider');
 var ctDesignIcons = require('@cleartrip/ct-design-icons');
 var react = require('react');
 var ctDesignShimmer = require('@cleartrip/ct-design-shimmer');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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',
-        isHoverable: false,
-        isClickable: true,
-        link: OFFERS_URL,
-    },
-    {
-        lefticon: ctDesignIcons.BusinessBag,
-        text: 'Business',
-        rightIcon: ctDesignIcons.ChevronDown,
-        isHoverable: true,
-    },
-    {
-        lefticon: ctDesignIcons.MyTrips,
-        text: 'My Trips',
-        isHoverable: false,
-        isClickable: true,
-        link: MY_TRIPS_URL,
-    },
-    {
-        lefticon: ctDesignIcons.SupportIcon,
-        text: 'Support',
-        isHoverable: false,
-        isClickable: true,
-        link: SUPPORT_URL,
-    },
-];
+var NAVBAR_OPTIONS = [{
+  lefticon: ctDesignIcons.Offers,
+  text: 'Offers',
+  isHoverable: false,
+  isClickable: true,
+  link: OFFERS_URL
+}, {
+  lefticon: ctDesignIcons.BusinessBag,
+  text: 'Business',
+  rightIcon: ctDesignIcons.ChevronDown,
+  isHoverable: true
+}, {
+  lefticon: ctDesignIcons.MyTrips,
+  text: 'My Trips',
+  isHoverable: false,
+  isClickable: true,
+  link: MY_TRIPS_URL
+}, {
+  lefticon: ctDesignIcons.SupportIcon,
+  text: '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',
+  PACKAGES: 'Packages',
+  BUSES: 'Buses'
 };
-var LOB_DATA = [
-    {
-        title: LOBS.FLIGHTS,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
-        link: '/flights',
-    },
-    {
-        title: LOBS.HOTELS,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
-        link: '/hotels',
-    },
-    {
-        title: LOBS.BUSES,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
-        link: '/bus',
-    },
-    {
-        title: LOBS.TRAIN,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
-        link: '/',
-    },
-    {
-        title: LOBS.PACKAGES,
-        image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
-        link: '/#',
-    },
-];
-var bdConfig = [
-    {
-        title: 'AgentBox',
-        subtitle: 'For travel agents',
-        details: 'One-stop travel solution offering the best deals to our travel agency partners',
-    },
-    {
-        title: 'OutOfOffice',
-        subtitle: 'For startups, corporates and SMEs',
-        details: 'Manage corporate business travel, smartly',
-    },
-    {
-        title: 'MICE',
-        subtitle: 'For corporate events',
-        details: 'An end-to-end management solution for all your corporate events',
-    },
-    {
-        title: 'API',
-        subtitle: 'For developers',
-        details: 'Unlock seamless integration and scale with our powerful, reliable APIs',
-    },
-];
+var LOB_DATA = [{
+  title: LOBS.FLIGHTS,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/flight_uhp.png?cache=true',
+  link: '/flights'
+}, {
+  title: LOBS.HOTELS,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
+  link: '/hotels'
+}, {
+  title: LOBS.BUSES,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
+  link: '/bus'
+}, {
+  title: LOBS.TRAIN,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/train_uhp.png?cache=true',
+  link: '/'
+}, {
+  title: LOBS.PACKAGES,
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/holiday_uhp.png?cache=true',
+  link: '/#'
+}];
+var bdConfig = [{
+  title: 'AgentBox',
+  subtitle: 'For travel agents',
+  details: 'One-stop travel solution offering the best deals to our travel agency partners'
+}, {
+  title: 'OutOfOffice',
+  subtitle: 'For startups, corporates and SMEs',
+  details: 'Manage corporate business travel, smartly'
+}, {
+  title: 'MICE',
+  subtitle: 'For corporate events',
+  details: 'An end-to-end management solution for all your corporate events'
+}, {
+  title: 'API',
+  subtitle: 'For developers',
+  details: 'Unlock seamless integration and scale with our powerful, reliable APIs'
+}];
 var BUSINESS_DROPDOWN_HEADING = 'Other business services';
 
 var LobsHeader = function (_a) {
-    var selectedLOB = _a.selectedLOB;
-    return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex p-4 flex-middle flex-center p-sticky', css: {
-            gap: 40,
-            height: 64,
-            background: ' #F3F5FA',
-            top: 64,
-            zIndex: 2,
-        } }, { children: LOB_DATA.map(function (item, index) {
-            return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-middle c-pointer', css: {
-                    gap: 8,
-                    background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
-                    borderRadius: selectedLOB === item.title ? '40px' : '0',
-                    padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0',
-                }, onClick: function () {
-                    window.location.href = item.link;
-                } }, { children: [jsxRuntime.jsx("img", { src: item.image, alt: item.title, width: 32, height: 32 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', style: { fontWeight: selectedLOB === item.title ? 600 : 500 }, isClickable: true }, { children: item.title }))] }), index));
-        }) })));
+  var selectedLOB = _a.selectedLOB;
+  return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+    className: 'flex p-4 flex-middle flex-center p-sticky',
+    css: {
+      gap: 40,
+      height: 64,
+      background: ' #F3F5FA',
+      top: 64,
+      zIndex: 2
+    }
+  }, {
+    children: LOB_DATA.map(function (item, index) {
+      return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        className: 'flex flex-middle c-pointer',
+        css: {
+          gap: 8,
+          background: selectedLOB === item.title ? '#FFFFFF' : 'transparent',
+          borderRadius: selectedLOB === item.title ? '40px' : '0',
+          padding: selectedLOB === item.title ? '8px 16px 8px 8px' : '0'
+        },
+        onClick: function () {
+          window.location.href = item.link;
+        }
+      }, {
+        children: [jsxRuntime.jsx("img", {
+          src: item.image,
+          alt: item.title,
+          width: 32,
+          height: 32
+        }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+          variant: 'P1',
+          style: {
+            fontWeight: selectedLOB === item.title ? 600 : 500
+          },
+          isClickable: true
+        }, {
+          children: item.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;
-    console.log(show, showFlagProxy, 'custom hook');
-    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;
+  console.log(show, showFlagProxy, 'custom hook');
+  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 ? 300 : _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) {
-        console.log('handleOnMouseEnter');
-        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 () {
-        console.log('handleMouseLeave');
-        cancelElementHover.current = true;
-        timeoutRef.current = setTimeout(function () {
-            setIsDropdownVisible(false);
-            setHoveredElemIndex(null);
-        }, closeDelay);
-    }, [closeDelay]);
-    var handleDropdownMouseEnter = react.useCallback(function () {
-        console.log('handleDropdownMouseEnter');
-        if (timeoutRef.current)
-            clearTimeout(timeoutRef.current);
-    }, []);
-    var handleDropdownMouseLeave = react.useCallback(function () {
-        console.log('handleDropdownMouseLeave');
-        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 ? 300 : _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) {
+    console.log('handleOnMouseEnter');
+    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 () {
+    console.log('handleMouseLeave');
+    cancelElementHover.current = true;
+    timeoutRef.current = setTimeout(function () {
+      setIsDropdownVisible(false);
+      setHoveredElemIndex(null);
+    }, closeDelay);
+  }, [closeDelay]);
+  var handleDropdownMouseEnter = react.useCallback(function () {
+    console.log('handleDropdownMouseEnter');
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, []);
+  var handleDropdownMouseLeave = react.useCallback(function () {
+    console.log('handleDropdownMouseLeave');
+    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 () {
-    var containerRef = react.useRef(null);
-    var openDropdown = function () {
+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) {
-            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';
-                }
-            });
+          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';
         }
-    };
-    react.useEffect(function () {
-        openDropdown();
-    }, []);
-    return { containerRef: containerRef, openDropdown: openDropdown };
+      });
+    }
+  };
+  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);
+    }
+  };
+  react.useEffect(function () {
+    if (isOpen) {
+      openDropdown();
+    } else {
+      closeDropdown();
+    }
+  }, [isOpen]);
+  return {
+    containerRef: containerRef
+  };
 };
 
-var BusinessDropdownContent = function () {
-    var _a = react.useState(0), leftPosition = _a[0], setLeftPosition = _a[1];
-    var containerRef = useDropdownAnimation().containerRef;
-    react.useEffect(function () {
-        var updatePosition = function () {
-            if (containerRef.current) {
-                var screenWidth = window.innerWidth;
-                var containerWidth = containerRef.current.offsetWidth || 0;
-                setLeftPosition((screenWidth - containerWidth) / 2);
+var BusinessDropdownContent = function (_a) {
+  var isOpen = _a.isOpen;
+  var _b = react.useState(0),
+    leftPosition = _b[0],
+    setLeftPosition = _b[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;
+        setLeftPosition((screenWidth - containerWidth) / 2);
+      }
+    };
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    return function () {
+      return window.removeEventListener('resize', updatePosition);
+    };
+  }, []);
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    ref: containerRef,
+    className: 'bg-neutral-100 o-hidden',
+    css: {
+      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,
+      opacity: 0
+    }
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'px-6 py-5',
+      backgroundColor: '#FFF1EC'
+    }, {
+      children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+        variant: 'HM2',
+        style: {
+          lineHeight: '24px'
+        }
+      }, {
+        children: BUSINESS_DROPDOWN_HEADING
+      }))
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex flex-row p-6',
+      css: {
+        columnGap: '48px',
+        width: 'fit-content'
+      }
+    }, {
+      children: bdConfig.map(function (_a) {
+        var title = _a.title,
+          subtitle = _a.subtitle,
+          details = _a.details;
+        return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          css: {
+            width: '200px'
+          },
+          className: 'bd-hover-container c-pointer'
+        }, {
+          children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+            className: 'flex flex-row flex-middle',
+            style: {
+              columnGap: '8px'
             }
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        return function () { return window.removeEventListener('resize', updatePosition); };
-    }, []);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ ref: containerRef, className: 'bg-neutral-100 o-hidden', css: {
-            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,
-            opacity: 0,
-        } }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'px-6 py-5', backgroundColor: '#FFF1EC' }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2', style: { lineHeight: '24px' } }, { children: BUSINESS_DROPDOWN_HEADING })) })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row p-6', css: { columnGap: '48px', width: 'fit-content' } }, { children: bdConfig.map(function (_a) {
-                    var title = _a.title, subtitle = _a.subtitle, details = _a.details;
-                    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ css: { width: '200px' }, className: 'bd-hover-container' }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle', style: { columnGap: '8px' } }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM2', className: 'color-orange-on-hover' }, { children: title })), jsxRuntime.jsx(AnimatedArrow, {})] })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', className: 'mt-1', css: { opacity: 0.75 } }, { children: subtitle })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P3', color: 'subheading', className: 'mt-3' }, { children: details }))] }), title));
-                }) }))] })));
+          }, {
+            children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+              variant: 'HM2',
+              className: 'color-orange-on-hover'
+            }, {
+              children: title
+            })), jsxRuntime.jsx(AnimatedArrow, {})]
+          })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+            variant: 'B3',
+            className: 'mt-1',
+            css: {
+              opacity: 0.75
+            }
+          }, {
+            children: subtitle
+          })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+            variant: 'P3',
+            color: 'subheading',
+            className: 'mt-3'
+          }, {
+            children: details
+          }))]
+        }), title);
+      })
+    }))]
+  }));
 };
 var AnimatedArrow = function () {
-    return (jsxRuntime.jsxs("div", tslib.__assign({ className: 'bd-arrow-container' }, { children: [jsxRuntime.jsx("div", tslib.__assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) })), jsxRuntime.jsx("div", tslib.__assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) })), jsxRuntime.jsx("div", tslib.__assign({ className: 'bd-arrow-wrapper' }, { children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {}) }))] })));
+  return jsxRuntime.jsxs("div", tslib.__assign({
+    className: 'bd-arrow-container'
+  }, {
+    children: [jsxRuntime.jsx("div", tslib.__assign({
+      className: 'bd-arrow-wrapper'
+    }, {
+      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+    })), jsxRuntime.jsx("div", tslib.__assign({
+      className: 'bd-arrow-wrapper'
+    }, {
+      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+    })), jsxRuntime.jsx("div", tslib.__assign({
+      className: 'bd-arrow-wrapper'
+    }, {
+      children: jsxRuntime.jsx(ctDesignIcons.ArrowRight, {})
+    }))]
+  }));
 };
 
-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 LOGGEDIN_USER_TEXT = 'You are logged in with';
 var HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID = 'header-acc-btn';
@@ -357,173 +502,600 @@ 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;
-    var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer', style: {
-            height: 32,
-            paddingLeft: 8,
-            transition: 'padding-right 0.2s ease-in-out',
-            paddingRight: isHovered ? 4 : 8,
-        }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: handleChipClick }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, { style: {
-                    content: '""',
-                    position: 'absolute',
-                    inset: 0,
-                    borderRadius: 'inherit',
-                    background: backgroundGradient,
-                    zIndex: -2,
-                } }), jsxRuntime.jsx(ctDesignContainer.Container, { style: {
-                    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({ className: 'flex flex-middle p-relative' }, { children: icon })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-middle o-hidden', style: {
-                    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: 'white' }) }))] })));
+  var icon = _a.icon,
+    borderGradient = _a.borderGradient,
+    backgroundGradient = _a.backgroundGradient,
+    handleChipClick = _a.handleChipClick;
+  var _b = react.useState(false),
+    isHovered = _b[0],
+    setIsHovered = _b[1];
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
+    style: {
+      height: 32,
+      paddingLeft: 8,
+      transition: 'padding-right 0.2s ease-in-out',
+      paddingRight: isHovered ? 4 : 8
+    },
+    onMouseEnter: function () {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function () {
+      return setIsHovered(false);
+    },
+    onClick: handleChipClick
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, {
+      style: {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        borderRadius: 'inherit',
+        background: backgroundGradient,
+        zIndex: -2
+      }
+    }), jsxRuntime.jsx(ctDesignContainer.Container, {
+      style: {
+        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({
+      className: 'flex flex-middle p-relative'
+    }, {
+      children: icon
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex flex-middle o-hidden',
+      style: {
+        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: 'white'
+      })
+    }))]
+  }));
 };
 
 var _a;
 var LoyaltyType;
 (function (LoyaltyType) {
-    LoyaltyType["FkVip"] = "FkVip";
-    LoyaltyType["FkPremium"] = "FkPremium";
-    LoyaltyType["InsiderIcon"] = "InsiderIcon";
-    LoyaltyType["InsiderElite"] = "InsiderElite";
+  LoyaltyType["FkVip"] = "FkVip";
+  LoyaltyType["FkPremium"] = "FkPremium";
+  LoyaltyType["InsiderIcon"] = "InsiderIcon";
+  LoyaltyType["InsiderElite"] = "InsiderElite";
 })(LoyaltyType || (LoyaltyType = {}));
-var LOYALTY_DATA = (_a = {},
-    _a[LoyaltyType.FkVip] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
-        borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
-        backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)',
-    },
-    _a[LoyaltyType.FkPremium] = {
-        icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
-        borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
-        backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)',
+var LOYALTY_DATA = (_a = {}, _a[LoyaltyType.FkVip] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.FkVip, {}),
+  borderGradient: 'linear-gradient(222.13deg, rgba(243, 179, 39, 0) 2.08%, #F3B327 85.17%)',
+  backgroundGradient: 'linear-gradient(111deg, #360042 0%, #540061 100%)'
+}, _a[LoyaltyType.FkPremium] = {
+  icon: jsxRuntime.jsx(ctDesignIcons.FkPremium, {}),
+  borderGradient: 'linear-gradient(230.68deg, rgba(243, 179, 39, 0) 10.1%, #F3B327 45.74%)',
+  backgroundGradient: 'linear-gradient(180deg, #04176A 0%, #082395 100%)'
+}, _a[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%)'
+}, _a[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%)'
+}, _a);
+
+var ExpandableItem = function (_a) {
+  var icon = _a.icon,
+    handleChipClick = _a.handleChipClick,
+    value = _a.value;
+  var _b = react.useState(false),
+    isHovered = _b[0],
+    setIsHovered = _b[1];
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    className: "flex flex-middle justify-center br-8 c-pointer",
+    style: {
+      height: 32,
+      paddingLeft: 8,
+      paddingRight: isHovered ? 4 : 8,
+      transition: 'padding-right 0.2s ease-in-out',
+      background: isHovered ? '#ffd7ca' : '#ffe6df'
     },
-    _a[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%)',
+    onMouseEnter: function () {
+      return setIsHovered(true);
     },
-    _a[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%)',
+    onMouseLeave: function () {
+      return setIsHovered(false);
     },
-    _a);
-
-var ExpandableItem = function (_a) {
-    var icon = _a.icon, handleChipClick = _a.handleChipClick, value = _a.value;
-    var _b = react.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: "flex flex-middle justify-center br-8 c-pointer", style: {
-            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: handleChipClick }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-middle flex-gap-1' }, { children: [icon, value && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', className: 'value-text', isClickable: true }, { children: value })))] })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-middle o-hidden', style: {
-                    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: handleChipClick
+  }, {
+    children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex flex-middle flex-gap-1'
+    }, {
+      children: [icon, value && jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+        variant: 'B3',
+        className: 'value-text',
+        isClickable: true
+      }, {
+        children: value
+      }))]
+    })), jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex flex-middle o-hidden',
+      style: {
+        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 (props) {
-    var selectedLoyaltyType = props.loyaltyType, _a = props.fkSupercoinBurnBalance, superCoinBalance = _a === void 0 ? 0 : _a, _b = props.walletBalance, walletBalance = _b === void 0 ? 0 : _b, loyaltyLoading = props.loyaltyLoading, superCoinsLoading = props.superCoinsLoading, walletLoading = props.walletLoading, walletChipClick = props.walletChipClick, supercoinsChipClick = props.supercoinsChipClick, loyaltyChipClick = props.loyaltyChipClick;
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex p-4 pt-0 flex-start flex-gap-1', style: { alignSelf: 'stretch' } }, { children: [loyaltyLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (selectedLoyaltyType &&
-                LOYALTY_DATA[selectedLoyaltyType] && (jsxRuntime.jsx(LoyaltyChip, { icon: LOYALTY_DATA[selectedLoyaltyType].icon, borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient, backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient, handleChipClick: loyaltyChipClick }))), superCoinsLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, { width: 20, height: 20 }), value: superCoinBalance, handleChipClick: supercoinsChipClick })), walletLoading ? (jsxRuntime.jsx(ctDesignShimmer.Shimmer, { width: '50px', height: '32px', borderRadius: '8px' })) : (jsxRuntime.jsx(ExpandableItem, { icon: jsxRuntime.jsx(ctDesignIcons.Wallet, { width: 20, height: 20 }), value: walletBalance, handleChipClick: walletChipClick }))] })));
+  var selectedLoyaltyType = props.loyaltyType,
+    _a = props.fkSupercoinBurnBalance,
+    superCoinBalance = _a === void 0 ? 0 : _a,
+    _b = props.walletBalance,
+    walletBalance = _b === void 0 ? 0 : _b,
+    loyaltyLoading = props.loyaltyLoading,
+    superCoinsLoading = props.superCoinsLoading,
+    walletLoading = props.walletLoading,
+    walletChipClick = props.walletChipClick,
+    supercoinsChipClick = props.supercoinsChipClick,
+    loyaltyChipClick = props.loyaltyChipClick;
+  return jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+    className: 'flex p-4 pt-0 flex-start flex-gap-1',
+    style: {
+      alignSelf: 'stretch'
+    }
+  }, {
+    children: [loyaltyLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px'
+    }) : selectedLoyaltyType && LOYALTY_DATA[selectedLoyaltyType] && jsxRuntime.jsx(LoyaltyChip, {
+      icon: LOYALTY_DATA[selectedLoyaltyType].icon,
+      borderGradient: LOYALTY_DATA[selectedLoyaltyType].borderGradient,
+      backgroundGradient: LOYALTY_DATA[selectedLoyaltyType].backgroundGradient,
+      handleChipClick: loyaltyChipClick
+    }), superCoinsLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px'
+    }) : jsxRuntime.jsx(ExpandableItem, {
+      icon: jsxRuntime.jsx(ctDesignIcons.Supercoin, {
+        width: 20,
+        height: 20
+      }),
+      value: superCoinBalance,
+      handleChipClick: supercoinsChipClick
+    }), walletLoading ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
+      width: '50px',
+      height: '32px',
+      borderRadius: '8px'
+    }) : jsxRuntime.jsx(ExpandableItem, {
+      icon: jsxRuntime.jsx(ctDesignIcons.Wallet, {
+        width: 20,
+        height: 20
+      }),
+      value: walletBalance,
+      handleChipClick: walletChipClick
+    })]
+  }));
 };
 
+var HoverableContainer = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
+  displayName: "StyledHeader__HoverableContainer",
+  componentId: "sc-aht4pl-0"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: #ecf3ff;\n    color: green;\n  }\n"], ["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: #ecf3ff;\n    color: green;\n  }\n"])));
+var LogoutButton = /*#__PURE__*/styled__default.default(ctDesignContainer.Container).withConfig({
+  displayName: "StyledHeader__LogoutButton",
+  componentId: "sc-aht4pl-1"
+})(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  column-gap: 8px;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: #fbefef;\n  }\n"], ["\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  column-gap: 8px;\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: #fbefef;\n  }\n"])));
+var templateObject_1, templateObject_2;
+
 var AccountDropdownContent = function (props) {
-    var _a = props || {}, handleLogout = _a.handleLogout, userName = _a.userName, userMobileNumber = _a.userMobileNumber, countryCode = _a.countryCode, userDetailsLoading = _a.userDetailsLoading, superCoinBalance = _a.fkSupercoinBurnBalance, walletBalance = _a.walletBalance, loyaltyType = _a.loyaltyType, loyaltyLoading = _a.loyaltyLoading, walletLoading = _a.walletLoading, superCoinsLoading = _a.superCoinsLoading, walletChipClick = _a.walletChipClick, supercoinsChipClick = _a.supercoinsChipClick, loyaltyChipClick = _a.loyaltyChipClick;
-    var containerRef = useDropdownAnimation().containerRef;
-    var _b = react.useMemo(function () {
-        var userGreeting = userName && "Hello ".concat(userName, "!");
-        var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
-        return { userGreeting: userGreeting, phoneNumber: phoneNumber };
-    }, [userName, userMobileNumber, countryCode]), userGreeting = _b.userGreeting, phoneNumber = _b.phoneNumber;
-    var handleRedirectClick = function (redirectLink) {
-        return function () {
-            window.location.href = redirectLink;
-        };
+  var _a = props || {},
+    handleLogout = _a.handleLogout,
+    userName = _a.userName,
+    userMobileNumber = _a.userMobileNumber,
+    countryCode = _a.countryCode,
+    userDetailsLoading = _a.userDetailsLoading,
+    superCoinBalance = _a.fkSupercoinBurnBalance,
+    walletBalance = _a.walletBalance,
+    loyaltyType = _a.loyaltyType,
+    loyaltyLoading = _a.loyaltyLoading,
+    walletLoading = _a.walletLoading,
+    superCoinsLoading = _a.superCoinsLoading,
+    walletChipClick = _a.walletChipClick,
+    supercoinsChipClick = _a.supercoinsChipClick,
+    loyaltyChipClick = _a.loyaltyChipClick,
+    isOpen = _a.isOpen;
+  var containerRef = useDropdownAnimation(isOpen).containerRef;
+  var _b = react.useMemo(function () {
+      var userGreeting = userName && "Hello ".concat(userName, "!");
+      var phoneNumber = countryCode && userMobileNumber ? "".concat(countryCode, " ").concat(userMobileNumber) : '';
+      return {
+        userGreeting: userGreeting,
+        phoneNumber: phoneNumber
+      };
+    }, [userName, userMobileNumber, countryCode]),
+    userGreeting = _b.userGreeting,
+    phoneNumber = _b.phoneNumber;
+  var handleRedirectClick = function (redirectLink) {
+    return function () {
+      window.location.href = redirectLink;
     };
-    react.useEffect(function () {
-        var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
-        var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
-        var positionAccountOptionsDiv = function () {
-            var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
-            if (accountOptionsElem && headerBtnRight) {
-                accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
-            }
-        };
-        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(ctDesignShimmer.Shimmer, { height: variant === 'HM3' ? '18px' : '12px', width: variant === 'HM3' ? '140px' : '200px' })) : (content) }))); };
-        return (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-column flex-gap-1' }, { 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')] })) })));
+  };
+  react.useEffect(function () {
+    var headerAccBtn = document.getElementById(HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID);
+    var accountOptionsElem = document.getElementById(ACCOUNT_OPTIONS_CONTAINER_ID);
+    var positionAccountOptionsDiv = function () {
+      var headerBtnRight = headerAccBtn === null || headerAccBtn === void 0 ? void 0 : headerAccBtn.getBoundingClientRect().right;
+      if (accountOptionsElem && headerBtnRight) {
+        accountOptionsElem.style.left = "".concat(headerBtnRight - ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px");
+      }
     };
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ id: ACCOUNT_OPTIONS_CONTAINER_ID, ref: containerRef, className: 'flex flex-column br-16 o-hidden', css: { zIndex: 1002, opacity: 0, top: '76px', position: 'fixed' }, width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"), background: '#FFF1EC' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'p-4', height: '72px' }, { children: renderUserData() })), jsxRuntime.jsx(RewardsSection, { fkSupercoinBurnBalance: superCoinBalance, walletBalance: walletBalance, loyaltyType: loyaltyType, loyaltyLoading: loyaltyLoading, superCoinsLoading: superCoinsLoading, walletLoading: walletLoading, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick, loyaltyChipClick: loyaltyChipClick }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'p-2 flex flex-column', backgroundColor: 'white', style: {
-                    borderBottomLeftRadius: 12,
-                    borderBottomRightRadius: 12,
-                    rowGap: 8,
-                } }, { 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({ className: "highlight-on-hover default p-2 br-8 c-pointer" }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex c-pointer', css: { columnGap: '8px' }, onClick: handleRedirectClick(redirectionLink) }, { children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', className: 'flex flex-middle c-pointer' }, { children: text }))] }), "account-option-".concat(text)) }), "account-option-".concat(text)));
-                    }), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
-                            borderBottom: '1px dashed #E6E6E6',
-                        } }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: "logout-button-hover default flex p-2 br-8 c-pointer", css: { columnGap: '8px' }, onClick: handleLogout }, { children: [jsxRuntime.jsx(ctDesignIcons.Signout, { height: 24, width: 24 }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', className: 'flex flex-middle c-pointer', color: 'warning' }, { children: SIGN_OUT_TEXT }))] }))] }))] })));
+    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(ctDesignShimmer.Shimmer, {
+          height: variant === 'HM3' ? '18px' : '12px',
+          width: variant === 'HM3' ? '140px' : '200px'
+        }) : content
+      }));
+    };
+    return jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex flex-column flex-gap-1'
+    }, {
+      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,
+    className: 'flex flex-column br-16 o-hidden',
+    css: {
+      zIndex: 1002,
+      opacity: 0,
+      top: '76px',
+      position: 'fixed'
+    },
+    width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
+    background: '#FFF1EC'
+  }, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'p-4',
+      height: '72px'
+    }, {
+      children: renderUserData()
+    })), jsxRuntime.jsx(RewardsSection, {
+      fkSupercoinBurnBalance: superCoinBalance,
+      walletBalance: walletBalance,
+      loyaltyType: loyaltyType,
+      loyaltyLoading: loyaltyLoading,
+      superCoinsLoading: superCoinsLoading,
+      walletLoading: walletLoading,
+      walletChipClick: walletChipClick,
+      supercoinsChipClick: supercoinsChipClick,
+      loyaltyChipClick: loyaltyChipClick
+    }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      className: 'p-2 flex flex-column',
+      backgroundColor: 'white',
+      style: {
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
+        rowGap: 8
+      }
+    }, {
+      children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
+        var text = _a.text,
+          icon = _a.icon,
+          redirectionLink = _a.redirectionLink;
+        return jsxRuntime.jsx(HoverableContainer, tslib.__assign({
+          onClick: handleRedirectClick(redirectionLink)
+        }, {
+          children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+            className: 'flex c-pointer',
+            style: {
+              columnGap: '8px'
+            }
+          }, {
+            children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+              variant: 'P1',
+              className: 'flex flex-middle c-pointer'
+            }, {
+              children: text
+            }))]
+          }))
+        }), "account-option-".concat(text));
+      }), jsxRuntime.jsx(ctDesignDivider.Divider, {
+        style: {
+          borderBottom: '1px dashed #E6E6E6'
+        }
+      }), jsxRuntime.jsxs(LogoutButton, tslib.__assign({
+        onClick: handleLogout
+      }, {
+        children: [jsxRuntime.jsx(ctDesignIcons.Signout, {
+          height: 24,
+          width: 24
+        }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+          variant: 'P1',
+          className: 'flex flex-middle c-pointer',
+          color: 'warning'
+        }, {
+          children: SIGN_OUT_TEXT
+        }))]
+      }))]
+    }))]
+  }));
 };
 
 var UserAccount = function (props) {
-    var handleLogout = props.handleLogout, userDetailsLoading = props.userDetailsLoading, userName = props.userName, userMobileNumber = props.userMobileNumber, countryCode = props.countryCode, fkSupercoinBurnBalance = props.fkSupercoinBurnBalance, walletBalance = props.walletBalance, loyaltyType = props.loyaltyType, walletLoading = props.walletLoading, superCoinsLoading = props.superCoinsLoading, loyaltyLoading = props.loyaltyLoading, loyaltyChipClick = props.loyaltyChipClick, supercoinsChipClick = props.supercoinsChipClick, walletChipClick = props.walletChipClick;
-    var _a = useHoverDropdown({ openDelay: 500, closeDelay: 50 }), isDropdownVisible = _a.isDropdownVisible, handleOnMouseEnter = _a.handleOnMouseEnter, handleOnMouseLeave = _a.handleOnMouseLeave, handleDropdownMouseEnter = _a.handleDropdownMouseEnter, handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer", style: { columnGap: 8 }, onMouseEnter: function () { return handleOnMouseEnter(4); }, onMouseLeave: handleOnMouseLeave, id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID }, { children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, { color: isDropdownVisible ? '#FF4F17' : '#1A1A1A' }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', className: 'c-pointer', color: isDropdownVisible ? 'secondary' : 'primary' }, { children: "My Account" })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, { width: 20, height: 20, fill: isDropdownVisible ? '#FF4F17' : '#1A1A1A' })] }))] })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(AccountDropdownContent, { handleLogout: handleLogout, userDetailsLoading: userDetailsLoading, userName: userName, userMobileNumber: userMobileNumber, countryCode: countryCode, loyaltyType: loyaltyType, walletBalance: walletBalance, fkSupercoinBurnBalance: fkSupercoinBurnBalance, walletLoading: walletLoading, superCoinsLoading: superCoinsLoading, loyaltyLoading: loyaltyLoading, loyaltyChipClick: loyaltyChipClick, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick }) }))] }));
+  var handleLogout = props.handleLogout,
+    userDetailsLoading = props.userDetailsLoading,
+    userName = props.userName,
+    userMobileNumber = props.userMobileNumber,
+    countryCode = props.countryCode,
+    fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
+    walletBalance = props.walletBalance,
+    loyaltyType = props.loyaltyType,
+    walletLoading = props.walletLoading,
+    superCoinsLoading = props.superCoinsLoading,
+    loyaltyLoading = props.loyaltyLoading,
+    loyaltyChipClick = props.loyaltyChipClick,
+    supercoinsChipClick = props.supercoinsChipClick,
+    walletChipClick = props.walletChipClick;
+  var _a = useHoverDropdown({
+      openDelay: 500,
+      closeDelay: 50
+    }),
+    isDropdownVisible = _a.isDropdownVisible,
+    handleOnMouseEnter = _a.handleOnMouseEnter,
+    handleOnMouseLeave = _a.handleOnMouseLeave,
+    handleDropdownMouseEnter = _a.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _a.handleDropdownMouseLeave;
+  return jsxRuntime.jsxs(ctDesignContainer.Container, {
+    children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+      className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
+      style: {
+        columnGap: 8,
+        height: 64
+      },
+      onMouseEnter: function () {
+        return handleOnMouseEnter(4);
+      },
+      onMouseLeave: handleOnMouseLeave,
+      id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
+    }, {
+      children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
+        color: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
+      }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        className: 'flex flex-row flex-middle'
+      }, {
+        children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+          variant: 'B2',
+          className: 'c-pointer',
+          color: isDropdownVisible ? 'secondary' : 'primary'
+        }, {
+          children: "My Account"
+        })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
+          width: 20,
+          height: 20,
+          fill: isDropdownVisible ? '#FF4F17' : '#1A1A1A'
+        })]
+      }))]
+    })), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
+      show: isDropdownVisible,
+      marginTop: '64px',
+      handleDropdownMouseEnter: handleDropdownMouseEnter,
+      handleDropdownMouseLeave: handleDropdownMouseLeave,
+      onMaskClick: handleDropdownMouseLeave
+    }, {
+      children: jsxRuntime.jsx(AccountDropdownContent, {
+        handleLogout: handleLogout,
+        userDetailsLoading: userDetailsLoading,
+        userName: userName,
+        userMobileNumber: userMobileNumber,
+        countryCode: countryCode,
+        loyaltyType: loyaltyType,
+        walletBalance: walletBalance,
+        fkSupercoinBurnBalance: fkSupercoinBurnBalance,
+        walletLoading: walletLoading,
+        superCoinsLoading: superCoinsLoading,
+        loyaltyLoading: loyaltyLoading,
+        loyaltyChipClick: loyaltyChipClick,
+        walletChipClick: walletChipClick,
+        supercoinsChipClick: supercoinsChipClick,
+        isOpen: isDropdownVisible
+      })
+    }))]
+  });
 };
 
 var Header = function (props) {
-    var superCoinsLoading = props.superCoinsLoading, fkSupercoinBurnBalance = props.fkSupercoinBurnBalance, onLoginButtonClick = props.onLoginButtonClick, _a = props.showAllLobs, showAllLobs = _a === void 0 ? false : _a, selectedLOB = props.selectedLOB, isUserLoggedIn = props.isUserLoggedIn, handleLogoutClick = props.handleLogoutClick, walletBalance = props.walletBalance, walletLoading = props.walletLoading, loyaltyLoading = props.loyaltyLoading, loyaltyType = props.loyaltyType, userDetailsLoading = props.userDetailsLoading, userName = props.userName, userMobileNumber = props.userMobileNumber, countryCode = props.countryCode, loyaltyChipClick = props.loyaltyChipClick, supercoinsChipClick = props.supercoinsChipClick, walletChipClick = props.walletChipClick; props.ravenPayload; props.ravenPushCallback;
-    var _c = useHoverDropdown({
-        openDelay: 500,
-    }), isDropdownVisible = _c.isDropdownVisible, hoveredElemIndex = _c.hoveredElemIndex, handleOnMouseEnter = _c.handleOnMouseEnter, handleOnMouseLeave = _c.handleOnMouseLeave, handleDropdownMouseEnter = _c.handleDropdownMouseEnter, handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink', style: {
-                    zIndex: 1000,
-                    height: 64,
-                    borderBottom: '1px solid #E6E6E6',
-                    background: '#F7FAFF',
-                } }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-middle flex-between flex-gap-6', style: {
-                        maxWidth: 1440,
-                        padding: '0px 28px',
-                        flex: '1 0 0',
-                    } }, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-center flex-middle' }, { children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
-                                        width: 12,
-                                        marginLeft: 2,
-                                        marginRight: 2,
-                                        transform: 'rotate(90deg)',
-                                        borderBottom: '1px solid #e0e0e0',
-                                    } }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})] })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle flex-center flex-cg-6' }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle flex-center flex-cg-1' }, { children: NAVBAR_OPTIONS.map(function (option, index) {
-                                        var isHovered = hoveredElemIndex === index;
-                                        return (jsxRuntime.jsxs(ctDesignContainer.Container, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: function () { return handleOnMouseEnter(index); }, onMouseLeave: handleOnMouseLeave, className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative', style: { columnGap: 8, height: 64 }, onClick: function () {
-                                                        if (option.isClickable) {
-                                                            window.location.href = option.link;
-                                                        }
-                                                    } }, { children: [jsxRuntime.jsx(option.lefticon, { color: isHovered ? '#FF4F17' : '#1A1A1A' }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B2', color: isHovered ? 'secondary' : 'primary', isClickable: true }, { children: option.text })), option.rightIcon && (jsxRuntime.jsx(option.rightIcon, { width: 20, height: 20, fill: isHovered ? '#FF4F17' : '#1A1A1A' }))] }))] }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({ show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible, marginTop: '64px', handleDropdownMouseEnter: handleDropdownMouseEnter, handleDropdownMouseLeave: handleDropdownMouseLeave, onMaskClick: handleDropdownMouseLeave }, { children: jsxRuntime.jsx(BusinessDropdownContent, {}) }))] }));
-                                    }) })), isUserLoggedIn && (jsxRuntime.jsx(ctDesignDivider.Divider, { style: {
-                                        width: 12,
-                                        margin: '0 -18px',
-                                        transform: 'rotate(90deg)',
-                                        borderBottom: '1px solid #e0e0e0',
-                                    } })), jsxRuntime.jsx(ctDesignContainer.Container, { children: isUserLoggedIn ? (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: 'flex flex-row flex-middle' }, { children: jsxRuntime.jsx(UserAccount, { handleLogout: handleLogoutClick, superCoinsLoading: superCoinsLoading, fkSupercoinBurnBalance: fkSupercoinBurnBalance, walletBalance: walletBalance, walletLoading: walletLoading, loyaltyLoading: loyaltyLoading, loyaltyType: loyaltyType, userDetailsLoading: userDetailsLoading, userName: userName, userMobileNumber: userMobileNumber, countryCode: countryCode, walletChipClick: walletChipClick, supercoinsChipClick: supercoinsChipClick, loyaltyChipClick: loyaltyChipClick }) }))) : (jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ className: "fw-400 fs-14 login-button", onClick: onLoginButtonClick, style: {
-                                            width: 153,
-                                            height: 40,
-                                            border: '1px solid #1A1A1A',
-                                        }, loading: false }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ componentNode: 'span', variant: 'L2' }, { children: "Login" })) }))) })] }))] })) })), showAllLobs && jsxRuntime.jsx(LobsHeader, { selectedLOB: selectedLOB })] }));
+  var superCoinsLoading = props.superCoinsLoading,
+    fkSupercoinBurnBalance = props.fkSupercoinBurnBalance,
+    onLoginButtonClick = props.onLoginButtonClick,
+    _a = props.showAllLobs,
+    showAllLobs = _a === void 0 ? false : _a,
+    selectedLOB = props.selectedLOB,
+    isUserLoggedIn = props.isUserLoggedIn,
+    handleLogoutClick = props.handleLogoutClick,
+    walletBalance = props.walletBalance,
+    walletLoading = props.walletLoading,
+    loyaltyLoading = props.loyaltyLoading,
+    loyaltyType = props.loyaltyType,
+    userDetailsLoading = props.userDetailsLoading,
+    userName = props.userName,
+    userMobileNumber = props.userMobileNumber,
+    countryCode = props.countryCode,
+    loyaltyChipClick = props.loyaltyChipClick,
+    supercoinsChipClick = props.supercoinsChipClick,
+    walletChipClick = props.walletChipClick;
+    props.ravenPayload;
+    props.ravenPushCallback;
+  var _c = useHoverDropdown({
+      openDelay: 500
+    }),
+    isDropdownVisible = _c.isDropdownVisible,
+    hoveredElemIndex = _c.hoveredElemIndex,
+    handleOnMouseEnter = _c.handleOnMouseEnter,
+    handleOnMouseLeave = _c.handleOnMouseLeave,
+    handleDropdownMouseEnter = _c.handleDropdownMouseEnter,
+    handleDropdownMouseLeave = _c.handleDropdownMouseLeave;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+      className: 'flex t-0 p-sticky w-100p flex-middle flex-center flex-gap-6 flex-no-shrink',
+      style: {
+        zIndex: 1000,
+        height: 64,
+        borderBottom: '1px solid #E6E6E6',
+        background: '#F7FAFF'
+      }
+    }, {
+      children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+        className: 'flex flex-middle flex-between flex-gap-6',
+        style: {
+          maxWidth: 1440,
+          padding: '0px 28px',
+          flex: '1 0 0'
+        }
+      }, {
+        children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          className: 'flex flex-row flex-center flex-middle'
+        }, {
+          children: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {}), jsxRuntime.jsx(ctDesignDivider.Divider, {
+            style: {
+              width: 12,
+              marginLeft: 2,
+              marginRight: 2,
+              transform: 'rotate(90deg)',
+              borderBottom: '1px solid #e0e0e0'
+            }
+          }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {})]
+        })), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+          className: 'flex flex-row flex-middle flex-center flex-cg-6'
+        }, {
+          children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+            className: 'flex flex-row flex-middle flex-center flex-cg-1'
+          }, {
+            children: NAVBAR_OPTIONS.map(function (option, index) {
+              var isHovered = hoveredElemIndex === index;
+              return jsxRuntime.jsxs(ctDesignContainer.Container, {
+                children: [jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+                  onMouseEnter: function () {
+                    return handleOnMouseEnter(index);
+                  },
+                  onMouseLeave: handleOnMouseLeave,
+                  className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
+                  style: {
+                    columnGap: 8,
+                    height: 64
+                  },
+                  onClick: function () {
+                    if (option.isClickable) {
+                      window.location.href = option.link;
+                    }
+                  }
+                }, {
+                  children: [jsxRuntime.jsx(option.lefticon, {
+                    color: isHovered ? '#FF4F17' : '#1A1A1A'
+                  }), jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({
+                    className: 'flex flex-row flex-middle'
+                  }, {
+                    children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+                      variant: 'B2',
+                      color: isHovered ? 'secondary' : 'primary',
+                      isClickable: true
+                    }, {
+                      children: option.text
+                    })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
+                      width: 20,
+                      height: 20,
+                      fill: isHovered ? '#FF4F17' : '#1A1A1A'
+                    })]
+                  }))]
+                }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, tslib.__assign({
+                  show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
+                  marginTop: '64px',
+                  handleDropdownMouseEnter: handleDropdownMouseEnter,
+                  handleDropdownMouseLeave: handleDropdownMouseLeave,
+                  onMaskClick: handleDropdownMouseLeave
+                }, {
+                  children: jsxRuntime.jsx(BusinessDropdownContent, {
+                    isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
+                  })
+                }))]
+              });
+            })
+          })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
+            style: {
+              width: 12,
+              margin: '0 -18px',
+              transform: 'rotate(90deg)',
+              borderBottom: '1px solid #e0e0e0'
+            }
+          }), jsxRuntime.jsx(ctDesignContainer.Container, {
+            children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({
+              className: 'flex flex-row flex-middle'
+            }, {
+              children: jsxRuntime.jsx(UserAccount, {
+                handleLogout: handleLogoutClick,
+                superCoinsLoading: superCoinsLoading,
+                fkSupercoinBurnBalance: fkSupercoinBurnBalance,
+                walletBalance: walletBalance,
+                walletLoading: walletLoading,
+                loyaltyLoading: loyaltyLoading,
+                loyaltyType: loyaltyType,
+                userDetailsLoading: userDetailsLoading,
+                userName: userName,
+                userMobileNumber: userMobileNumber,
+                countryCode: countryCode,
+                walletChipClick: walletChipClick,
+                supercoinsChipClick: supercoinsChipClick,
+                loyaltyChipClick: loyaltyChipClick
+              })
+            })) : jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({
+              className: "fw-400 fs-14 login-button",
+              onClick: onLoginButtonClick,
+              style: {
+                width: 153,
+                height: 40,
+                border: '1px solid #1A1A1A'
+              },
+              loading: false
+            }, {
+              children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({
+                componentNode: 'span',
+                variant: 'L2'
+              }, {
+                children: "Login"
+              }))
+            }))
+          })]
+        }))]
+      }))
+    })), showAllLobs && jsxRuntime.jsx(LobsHeader, {
+      selectedLOB: selectedLOB
+    })]
+  });
 };
 
 exports.Header = Header;