@cleartrip/ct-design-header 1.2.0-SNAPSHOT-header-v0.5-login-test.0 → 1.2.0-SNAPSHOT-header-0.1.0

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

@@ -2,8 +2,8 @@ import { __assign, __spreadArray } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
-import { Typography } from '@cleartrip/ct-design-typography';
-import { Button } from '@cleartrip/ct-design-button';
+import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { ButtonColor, Button } from '@cleartrip/ct-design-button';
 import { Divider } from '@cleartrip/ct-design-divider';
 import { Offers, BusinessBag, ChevronDown, MyTrips, SupportIcon, ArrowRight, MyAccount, SavedCard, Travellers, HiFive, Wallet, SettingsCog, PrivacyRights, HeaderChevronRight, FkVip, FkPremium, InsiderIcon, InsiderElite, CtLoyalty, Supercoin, Signout, CTLogo, Fkcompany } from '@cleartrip/ct-design-icons';
 import { Shimmer } from '@cleartrip/ct-design-shimmer';
@@ -48,23 +48,23 @@ var LOBS = {
 };
 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',
+  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_48,h_48,dpr_2/offermgmt-prod/offermgmt/images/banner/hotel_uhp.png?cache=true',
+  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_40,h_40,dpr_2/offermgmt-prod/offermgmt/images/banner/bus_uhp.png?cache=true',
+  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.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',
+  image: 'https://rukmini-ct.flixcart.com/f_auto,w_32,h_32,dpr_4/offermgmt-prod/offermgmt/images/banner/Navbar_Trains.png?cache=true',
   link: '/pages/trains/appOnly'
 }, {
   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',
+  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 = [{
@@ -93,13 +93,32 @@ var BUSINESS_DROPDOWN_HEADING = 'Other business services';
 var RAVEN_PAGE_NAMES;
 (function (RAVEN_PAGE_NAMES) {
   RAVEN_PAGE_NAMES["UNIFIED_HOME"] = "unified_homepage";
-  RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotels_homepage";
-  RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_homepage";
+  RAVEN_PAGE_NAMES["HOTELS_HOME"] = "hotel_home";
+  RAVEN_PAGE_NAMES["FLIGHTS_HOME"] = "flights_home";
 })(RAVEN_PAGE_NAMES || (RAVEN_PAGE_NAMES = {}));
 var RAVEN_PLATFORMS;
 (function (RAVEN_PLATFORMS) {
   RAVEN_PLATFORMS["DESKTOP"] = "desktop";
 })(RAVEN_PLATFORMS || (RAVEN_PLATFORMS = {}));
+var LOG_IN_TEXT = 'Log in';
+var THEME_CONFIG = {
+  NOVAC: {
+    headerBackground: 'transparent',
+    hoverColor: '#FFB8A5',
+    logoFill: '#FFF',
+    fkcompanyColor: '#FFF',
+    typographyColor: '#FFF',
+    loginButtonColorVariant: ButtonColor.NEUTRAL
+  },
+  DEFAULT: {
+    headerBackground: '#F7FAFF',
+    hoverColor: '#FF4F17',
+    logoFill: '#FF4F17',
+    fkcompanyColor: '#1A1A1A',
+    typographyColor: '#1A1A1A',
+    loginButtonColorVariant: ButtonColor.PRIMARY
+  }
+};
 
 var HeaderContext = createContext(undefined);
 var useHeaderContext = function () {
@@ -122,41 +141,46 @@ var HeaderProvider = function (_a) {
 var LobsHeader = function () {
   var selectedLOB = useHeaderContext().selectedLOB;
   return jsx(Container, __assign({
-    className: 'flex p-4 flex-middle flex-center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '16px',
+    height: '64',
+    background: '#F3F5FA',
+    top: '64px',
+    zIndex: 2,
     css: {
-      gap: 40,
-      height: 64,
-      background: ' #F3F5FA',
-      top: 64,
-      zIndex: 2
+      gap: 40
     }
   }, {
     children: LOB_DATA.map(function (item, index) {
+      var title = item.title,
+        link = item.link,
+        image = item.image;
       return jsxs(Container, __assign({
-        className: 'flex flex-middle c-pointer',
+        display: 'flex',
+        alignItems: 'center',
+        cursor: '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'
+          background: selectedLOB === title ? '#FFFFFF' : 'transparent',
+          borderRadius: selectedLOB === title ? '40px' : '0',
+          padding: selectedLOB === title ? '8px 16px 8px 8px' : '0'
         },
         onClick: function () {
-          window.location.href = item.link;
+          window.location.href = link;
         }
       }, {
         children: [jsx("img", {
-          src: item.image,
-          alt: item.title,
+          src: image,
+          alt: title,
           width: 32,
           height: 32
         }), jsx(Typography, __assign({
-          variant: 'P1',
-          style: {
-            fontWeight: selectedLOB === item.title ? 600 : 500
-          },
+          variant: selectedLOB === title ? TypographyVariant.HM3 : TypographyVariant.B1,
           isClickable: true
         }, {
-          children: item.title
+          children: title
         }))]
       }), index);
     })
@@ -471,36 +495,34 @@ var BusinessDropdownContent = function (_a) {
   }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
   return jsxs(Container, __assign({
     ref: containerRef,
-    className: 'bg-neutral-100 o-hidden',
+    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: {
-      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,
+      overflow: 'hidden',
       opacity: 0
     }
   }, {
     children: [jsx(Container, __assign({
-      className: 'px-6 py-5',
+      padding: '20px 24px 20px 24px',
       backgroundColor: '#FFF1EC'
     }, {
       children: jsx(Typography, __assign({
-        variant: 'HM2',
-        style: {
-          lineHeight: '24px'
-        }
+        variant: 'HM2'
       }, {
         children: BUSINESS_DROPDOWN_HEADING
       }))
     })), jsx(Container, __assign({
-      className: 'flex flex-row p-6',
-      css: {
-        columnGap: '48px',
-        width: 'fit-content'
-      }
+      display: 'flex',
+      flexDirection: 'row',
+      padding: '24px',
+      columnGap: '48px',
+      width: 'fit-content'
     }, {
       children: bdConfig.map(function (_a) {
         var title = _a.title,
@@ -509,19 +531,18 @@ var BusinessDropdownContent = function (_a) {
           link = _a.link,
           ravenActionName = _a.ravenActionName;
         return jsxs(Container, __assign({
-          css: {
-            width: '200px'
-          },
+          cursor: 'pointer',
+          width: '200px',
+          className: 'bd-hover-container',
           onClick: function () {
             return handleBusinessDropdownClick(link, title, ravenActionName);
-          },
-          className: 'bd-hover-container c-pointer'
+          }
         }, {
           children: [jsxs(Container, __assign({
-            className: 'flex flex-row flex-middle',
-            style: {
-              columnGap: '8px'
-            }
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            columnGap: '8px'
           }, {
             children: [jsx(Typography, __assign({
               variant: 'HM2',
@@ -531,8 +552,8 @@ var BusinessDropdownContent = function (_a) {
             })), jsx(AnimatedArrow, {})]
           })), jsx(Typography, __assign({
             variant: 'B3',
-            className: 'mt-1',
             css: {
+              marginTop: '4px',
               opacity: 0.75
             }
           }, {
@@ -540,7 +561,9 @@ var BusinessDropdownContent = function (_a) {
           })), jsx(Typography, __assign({
             variant: 'P3',
             color: 'subheading',
-            className: 'mt-3'
+            css: {
+              marginTop: '12px'
+            }
           }, {
             children: details
           }))]
@@ -652,12 +675,19 @@ var LoyaltyChip = function (_a) {
     }
   }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxs(Container, __assign({
-    className: 'flex p-relative flex-middle flex-center br-8 o-hidden c-pointer',
-    style: {
+    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',
-      paddingRight: isHovered ? 4 : 8
+      transition: 'padding-right 0.2s ease-in-out'
     },
     onMouseEnter: function () {
       return setIsHovered(true);
@@ -668,7 +698,7 @@ var LoyaltyChip = function (_a) {
     onClick: handleClick
   }, {
     children: [jsx(Container, {
-      style: {
+      css: {
         content: '""',
         position: 'absolute',
         inset: 0,
@@ -677,7 +707,7 @@ var LoyaltyChip = function (_a) {
         zIndex: -2
       }
     }), jsx(Container, {
-      style: {
+      css: {
         content: '""',
         position: 'absolute',
         inset: 0,
@@ -690,12 +720,16 @@ var LoyaltyChip = function (_a) {
         zIndex: -1
       }
     }), jsx(Container, __assign({
-      className: 'flex flex-middle p-relative'
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative'
     }, {
       children: icon
     })), jsx(Container, __assign({
-      className: 'flex flex-middle o-hidden',
-      style: {
+      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
@@ -793,8 +827,12 @@ var ExpandableItem = function (_a) {
     }
   }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxs(Container, __assign({
-    className: "flex flex-middle justify-center br-8 c-pointer",
-    style: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    css: {
       height: 32,
       paddingLeft: 8,
       paddingRight: isHovered ? 4 : 8,
@@ -810,18 +848,23 @@ var ExpandableItem = function (_a) {
     onClick: handleDefaultClick
   }, {
     children: [jsxs(Container, __assign({
-      className: 'flex flex-middle flex-gap-1'
+      display: 'flex',
+      alignItems: 'center',
+      css: {
+        gap: '4px'
+      }
     }, {
       children: [icon, jsx(Typography, __assign({
         variant: 'B3',
-        className: 'value-text',
         isClickable: true
       }, {
         children: value
       }))]
     })), jsx(Container, __assign({
-      className: 'flex flex-middle o-hidden',
-      style: {
+      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
@@ -855,9 +898,12 @@ var RewardsSection = function () {
     return null;
   }
   return jsxs(Container, __assign({
-    className: 'flex p-4 pt-0 flex-start flex-gap-1',
-    style: {
-      alignSelf: 'stretch'
+    display: 'flex',
+    padding: '0 16px 16px 16px',
+    justifyContent: 'flex-start',
+    css: {
+      alignSelf: 'stretch',
+      gap: '4px'
     }
   }, {
     children: [loyaltyLoading ? jsx(Shimmer, {
@@ -935,7 +981,7 @@ var AccountDropdownContent = function (_a) {
     ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
     window.location.href = redirectLink;
   }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-  var handleLogout = useCallback(function () {
+  useCallback(function () {
     ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
     handleLogoutClick();
   }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
@@ -963,7 +1009,11 @@ var AccountDropdownContent = function (_a) {
       }));
     };
     return jsx(Container, __assign({
-      className: 'flex flex-column flex-gap-1'
+      display: 'flex',
+      flexDirection: 'column',
+      css: {
+        gap: '4px'
+      }
     }, {
       children: userGreeting ? jsxs(Fragment, {
         children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
@@ -975,28 +1025,33 @@ var AccountDropdownContent = function (_a) {
   return jsxs(Container, __assign({
     id: ACCOUNT_OPTIONS_CONTAINER_ID,
     ref: containerRef,
-    className: 'flex flex-column br-16 o-hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '16px',
+    zIndex: 1002,
+    top: '76px',
+    position: 'fixed',
     css: {
-      zIndex: 1002,
       opacity: 0,
-      top: '76px',
-      position: 'fixed'
+      overflow: 'hidden'
     },
     width: "".concat(ACCOUNT_OPTIONS_CONTAINER_WIDTH, "px"),
     background: '#FFF1EC'
   }, {
     children: [jsx(Container, __assign({
-      className: 'p-4',
+      padding: '16px',
       height: '76px'
     }, {
       children: renderUserData()
     })), jsx(RewardsSection, {}), jsxs(Container, __assign({
-      className: 'p-2 flex flex-column',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '8px',
       backgroundColor: 'white',
-      style: {
+      rowGap: '8px',
+      css: {
         borderBottomLeftRadius: 12,
-        borderBottomRightRadius: 12,
-        rowGap: 8
+        borderBottomRightRadius: 12
       }
     }, {
       children: [ACCOUNT_OPTIONS_POPUP_CONFIG.map(function (_a) {
@@ -1004,39 +1059,55 @@ var AccountDropdownContent = function (_a) {
           icon = _a.icon,
           redirectionLink = _a.redirectionLink;
         return jsx(Container, __assign({
-          className: 'p-2 br-8 c-pointer hoverable-container',
+          className: 'hoverable-container',
+          padding: '8px',
+          borderRadius: '8px',
+          cursor: 'pointer',
           onClick: function () {
             return handleAccountOptionsClick(text, redirectionLink);
           }
         }, {
           children: jsxs(Container, __assign({
-            className: 'flex c-pointer',
-            style: {
+            display: 'flex',
+            cursor: 'pointer',
+            css: {
               columnGap: '8px'
             }
           }, {
             children: [icon, jsx(Typography, __assign({
               variant: 'P1',
-              className: 'flex flex-middle c-pointer'
+              css: {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer'
+              }
             }, {
               children: text
             }))]
           }))
         }), "account-option-".concat(text));
       }), jsx(Divider, {
-        style: {
+        css: {
           borderBottom: '1px dashed #E6E6E6'
         }
       }), jsxs(Container, __assign({
-        className: 'flex p-2 br-8 c-pointer logout-button',
-        onClick: handleLogout
+        className: 'logout-button',
+        display: 'flex',
+        padding: '8px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        onClick: handleLogoutClick
       }, {
         children: [jsx(Signout, {
           height: 24,
           width: 24
         }), jsx(Typography, __assign({
           variant: 'P1',
-          className: 'flex flex-middle c-pointer',
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer'
+          },
           color: 'warning'
         }, {
           children: SIGN_OUT_TEXT
@@ -1076,8 +1147,9 @@ var UserAccount = function () {
       return window.removeEventListener('scroll', handleScroll);
     };
   }, []);
-  var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
-  var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
+  var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+  var hoverColor = theme.hoverColor,
+    typographyColor = theme.typographyColor;
   var triggerRavenEventOnHover = useCallback(function () {
     var _a;
     var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
@@ -1091,8 +1163,13 @@ var UserAccount = function () {
   }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
   return jsxs(Container, {
     children: [jsxs(Container, __assign({
-      className: "flex px-3 py-2 flex-middle br-12 h-100p c-pointer",
-      style: {
+      display: 'flex',
+      padding: '8px 12px',
+      alignItems: 'center',
+      borderRadius: '12px',
+      height: '100%',
+      cursor: 'pointer',
+      css: {
         columnGap: 8,
         height: 64
       },
@@ -1104,20 +1181,24 @@ var UserAccount = function () {
       id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
     }, {
       children: [jsx(MyAccount, {
-        color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+        color: isDropdownVisible ? hoverColor : typographyColor
       }), jsxs(Container, __assign({
-        className: 'flex flex-row flex-middle'
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
       }, {
         children: [jsx(Typography, __assign({
           variant: 'B2',
-          className: 'c-pointer',
-          colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+          css: {
+            cursor: 'pointer'
+          },
+          colorCode: isDropdownVisible ? hoverColor : typographyColor
         }, {
           children: MY_ACCOUNT_TEXT
         })), jsx(ChevronDown, {
           width: 20,
           height: 20,
-          fill: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+          fill: isDropdownVisible ? hoverColor : typographyColor
         })]
       }))]
     })), jsx(HeaderAnimatedMask, __assign({
@@ -1168,9 +1249,13 @@ var HeaderContent = function () {
       return window.removeEventListener('scroll', handleScroll);
     };
   }, []);
-  var effectiveNovacThemeEnabled = isNovacThemeEnabled && !scrolled;
-  var headerBackground = effectiveNovacThemeEnabled ? 'transparent' : '#F7FAFF';
-  var hoverColor = effectiveNovacThemeEnabled ? '#FFB8A5' : '#FF4F17';
+  var theme = isNovacThemeEnabled && !scrolled ? THEME_CONFIG.NOVAC : THEME_CONFIG.DEFAULT;
+  var headerBackground = theme.headerBackground,
+    logoFill = theme.logoFill,
+    loginButtonColorVariant = theme.loginButtonColorVariant,
+    hoverColor = theme.hoverColor,
+    fkcompanyColor = theme.fkcompanyColor,
+    typographyColor = theme.typographyColor;
   var _g = useHoverDropdown({
       openDelay: 0
     }),
@@ -1209,31 +1294,45 @@ var HeaderContent = function () {
   }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
   return jsxs(Fragment, {
     children: [jsx(Container, __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: effectiveNovacThemeEnabled ? '' : '1px solid #E6E6E6',
-        background: headerBackground,
+      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: jsxs(Container, __assign({
-        className: 'flex flex-middle flex-between flex-gap-6',
-        style: {
-          maxWidth: 1440,
-          padding: '0px 28px',
-          flex: '1 0 0'
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 28px',
+        flex: 1,
+        css: {
+          gap: '24px',
+          maxWidth: 1440
         }
       }, {
         children: [jsxs(Container, __assign({
-          className: 'flex flex-row flex-center flex-middle c-pointer',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
           onClick: handleHomeClick
         }, {
           children: [jsx(CTLogo, {
-            fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
+            fillColor: logoFill
           }), jsx(Divider, {
-            style: {
+            css: {
               width: 12,
               marginLeft: 2,
               marginRight: 2,
@@ -1241,15 +1340,27 @@ var HeaderContent = function () {
               borderBottom: '1px solid #e0e0e0'
             }
           }), jsx(Fkcompany, {
-            color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+            color: fkcompanyColor
           })]
         })), jsxs(Container, __assign({
-          className: 'flex flex-row flex-middle flex-center flex-cg-6'
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          columnGap: '24px'
         }, {
           children: [jsx(Container, __assign({
-            className: 'flex flex-row flex-middle flex-center flex-cg-1'
+            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 jsxs(Container, {
                 children: [jsxs(Container, __assign({
@@ -1260,47 +1371,52 @@ var HeaderContent = function () {
                     }
                   },
                   onMouseLeave: handleOnMouseLeave,
-                  className: 'flex flex-row flex-middle px-3 py-2 c-pointer p-relative',
-                  style: {
-                    columnGap: 8,
-                    height: 64
-                  },
+                  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: [jsx(option.lefticon, {
-                    color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                  children: [jsx(LeftIcon, {
+                    color: isHovered ? hoverColor : typographyColor
                   }), jsxs(Container, __assign({
-                    className: 'flex flex-row flex-middle'
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center'
                   }, {
                     children: [jsx(Typography, __assign({
                       variant: 'B2',
-                      colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
+                      colorCode: isHovered ? hoverColor : typographyColor,
                       isClickable: true
                     }, {
-                      children: option.text
-                    })), option.rightIcon && jsx(option.rightIcon, {
+                      children: text
+                    })), RightIcon && jsx(RightIcon, {
                       width: 20,
                       height: 20,
-                      fill: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                      fill: isHovered ? hoverColor : typographyColor
                     })]
                   }))]
                 }), "nav-option-".concat(index)), jsx(HeaderAnimatedMask, __assign({
-                  show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
+                  show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
                   marginTop: '64px',
                   handleDropdownMouseEnter: handleDropdownMouseEnter,
                   handleDropdownMouseLeave: handleDropdownMouseLeave,
                   onMaskClick: handleDropdownMouseLeave
                 }, {
                   children: jsx(BusinessDropdownContent, {
-                    isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
+                    isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
                   })
                 }))]
               });
             })
           })), isUserLoggedIn && jsx(Divider, {
-            style: {
+            css: {
               width: 12,
               margin: '0 -18px',
               transform: 'rotate(90deg)',
@@ -1308,25 +1424,28 @@ var HeaderContent = function () {
             }
           }), jsx(Container, {
             children: isUserLoggedIn ? jsx(Container, __assign({
-              className: 'flex flex-row flex-middle'
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center'
             }, {
               children: jsx(UserAccount, {})
             })) : jsx(Button, __assign({
-              className: "fw-400 fs-14 ".concat(effectiveNovacThemeEnabled ? 'novac-login-button' : 'login-button'),
+              variant: 'outline',
+              color: loginButtonColorVariant,
+              className: "".concat(headerBackground === 'transparent' ? 'novac-login-button' : 'login-button'),
               onClick: onLoginButtonClick,
-              style: {
+              css: {
                 width: 153,
-                height: 40,
-                border: effectiveNovacThemeEnabled ? '1px solid #FFF' : '1px solid #1A1A1A'
+                height: 40
               },
               loading: false
             }, {
               children: jsx(Typography, __assign({
                 componentNode: 'span',
                 variant: 'L2',
-                color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
+                color: loginButtonColorVariant === ButtonColor.NEUTRAL ? 'neutral' : 'primary'
               }, {
-                children: "Log in"
+                children: LOG_IN_TEXT
               }))
             }))
           })]