@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.umd.js

@@ -84,23 +84,23 @@
     };
     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 = [{
@@ -129,13 +129,32 @@
     exports.RAVEN_PAGE_NAMES = void 0;
     (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";
     })(exports.RAVEN_PAGE_NAMES || (exports.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: ctDesignButton.ButtonColor.NEUTRAL
+      },
+      DEFAULT: {
+        headerBackground: '#F7FAFF',
+        hoverColor: '#FF4F17',
+        logoFill: '#FF4F17',
+        fkcompanyColor: '#1A1A1A',
+        typographyColor: '#1A1A1A',
+        loginButtonColorVariant: ctDesignButton.ButtonColor.PRIMARY
+      }
+    };
 
     var HeaderContext = react.createContext(undefined);
     var useHeaderContext = function () {
@@ -158,41 +177,46 @@
     var LobsHeader = function () {
       var selectedLOB = useHeaderContext().selectedLOB;
       return jsxRuntime.jsx(ctDesignContainer.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 jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsx("img", {
-              src: item.image,
-              alt: item.title,
+              src: image,
+              alt: title,
               width: 32,
               height: 32
             }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-              variant: 'P1',
-              style: {
-                fontWeight: selectedLOB === item.title ? 600 : 500
-              },
+              variant: selectedLOB === title ? ctDesignTypography.TypographyVariant.HM3 : ctDesignTypography.TypographyVariant.B1,
               isClickable: true
             }, {
-              children: item.title
+              children: title
             }))]
           }), index);
         })
@@ -507,36 +531,34 @@
       }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
       return jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'px-6 py-5',
+          padding: '20px 24px 20px 24px',
           backgroundColor: '#FFF1EC'
         }, {
           children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
-            variant: 'HM2',
-            style: {
-              lineHeight: '24px'
-            }
+            variant: 'HM2'
           }, {
             children: BUSINESS_DROPDOWN_HEADING
           }))
         })), jsxRuntime.jsx(ctDesignContainer.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,
@@ -545,19 +567,18 @@
               link = _a.link,
               ravenActionName = _a.ravenActionName;
             return jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                className: 'flex flex-row flex-middle',
-                style: {
-                  columnGap: '8px'
-                }
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                columnGap: '8px'
               }, {
                 children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                   variant: 'HM2',
@@ -567,8 +588,8 @@
                 })), jsxRuntime.jsx(AnimatedArrow, {})]
               })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                 variant: 'B3',
-                className: 'mt-1',
                 css: {
+                  marginTop: '4px',
                   opacity: 0.75
                 }
               }, {
@@ -576,7 +597,9 @@
               })), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                 variant: 'P3',
                 color: 'subheading',
-                className: 'mt-3'
+                css: {
+                  marginTop: '12px'
+                }
               }, {
                 children: details
               }))]
@@ -688,12 +711,19 @@
         }
       }, [handleChipClick, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
       return jsxRuntime.jsxs(ctDesignContainer.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);
@@ -704,7 +734,7 @@
         onClick: handleClick
       }, {
         children: [jsxRuntime.jsx(ctDesignContainer.Container, {
-          style: {
+          css: {
             content: '""',
             position: 'absolute',
             inset: 0,
@@ -713,7 +743,7 @@
             zIndex: -2
           }
         }), jsxRuntime.jsx(ctDesignContainer.Container, {
-          style: {
+          css: {
             content: '""',
             position: 'absolute',
             inset: 0,
@@ -726,12 +756,16 @@
             zIndex: -1
           }
         }), jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle p-relative'
+          display: 'flex',
+          alignItems: 'center',
+          position: 'relative'
         }, {
           children: icon
         })), jsxRuntime.jsx(ctDesignContainer.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
@@ -829,8 +863,12 @@
         }
       }, [handleChipClick, type, loyaltyType, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
       return jsxRuntime.jsxs(ctDesignContainer.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,
@@ -846,18 +884,23 @@
         onClick: handleDefaultClick
       }, {
         children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-          className: 'flex flex-middle flex-gap-1'
+          display: 'flex',
+          alignItems: 'center',
+          css: {
+            gap: '4px'
+          }
         }, {
           children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
             variant: 'B3',
-            className: 'value-text',
             isClickable: true
           }, {
             children: value
           }))]
         })), jsxRuntime.jsx(ctDesignContainer.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
@@ -891,9 +934,12 @@
         return null;
       }
       return jsxRuntime.jsxs(ctDesignContainer.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 ? jsxRuntime.jsx(ctDesignShimmer.Shimmer, {
@@ -971,7 +1017,7 @@
         ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(text), ravenPayload, ravenPushCallback, ravenPageName);
         window.location.href = redirectLink;
       }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
-      var handleLogout = react.useCallback(function () {
+      react.useCallback(function () {
         ravenSDKTrigger(isUserLoggedIn, ravenEventName, generateRavenPayload(SIGN_OUT_TEXT), ravenPayload, ravenPushCallback, ravenPageName);
         handleLogoutClick();
       }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, handleLogoutClick]);
@@ -999,7 +1045,11 @@
           }));
         };
         return jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'flex flex-column flex-gap-1'
+          display: 'flex',
+          flexDirection: 'column',
+          css: {
+            gap: '4px'
+          }
         }, {
           children: userGreeting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [renderContent(userDetailsLoading, userGreeting, 'HM3', 'primary'), renderContent(userDetailsLoading, "".concat(LOGGEDIN_USER_TEXT, " ").concat(phoneNumber), 'P3', 'subheading')]
@@ -1011,28 +1061,33 @@
       return jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-          className: 'p-4',
+          padding: '16px',
           height: '76px'
         }, {
           children: renderUserData()
         })), jsxRuntime.jsx(RewardsSection, {}), jsxRuntime.jsxs(ctDesignContainer.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) {
@@ -1040,39 +1095,55 @@
               icon = _a.icon,
               redirectionLink = _a.redirectionLink;
             return jsxRuntime.jsx(ctDesignContainer.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: jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                className: 'flex c-pointer',
-                style: {
+                display: 'flex',
+                cursor: 'pointer',
+                css: {
                   columnGap: '8px'
                 }
               }, {
                 children: [icon, jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                   variant: 'P1',
-                  className: 'flex flex-middle c-pointer'
+                  css: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: 'pointer'
+                  }
                 }, {
                   children: text
                 }))]
               }))
             }), "account-option-".concat(text));
           }), jsxRuntime.jsx(ctDesignDivider.Divider, {
-            style: {
+            css: {
               borderBottom: '1px dashed #E6E6E6'
             }
           }), jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsx(ctDesignIcons.Signout, {
               height: 24,
               width: 24
             }), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
               variant: 'P1',
-              className: 'flex flex-middle c-pointer',
+              css: {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer'
+              },
               color: 'warning'
             }, {
               children: SIGN_OUT_TEXT
@@ -1112,8 +1183,9 @@
           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 = react.useCallback(function () {
         var _a;
         var utmSource = (_a = getQueryParam('utm_source')) !== null && _a !== void 0 ? _a : 'organic';
@@ -1127,8 +1199,13 @@
       }, [isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName, loyaltyType]);
       return jsxRuntime.jsxs(ctDesignContainer.Container, {
         children: [jsxRuntime.jsxs(ctDesignContainer.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
           },
@@ -1140,20 +1217,24 @@
           id: HEADER_ACCOUNTS_OPTIONS_OPEN_BTN_ID
         }, {
           children: [jsxRuntime.jsx(ctDesignIcons.MyAccount, {
-            color: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+            color: isDropdownVisible ? hoverColor : typographyColor
           }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-            className: 'flex flex-row flex-middle'
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
           }, {
             children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
               variant: 'B2',
-              className: 'c-pointer',
-              colorCode: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+              css: {
+                cursor: 'pointer'
+              },
+              colorCode: isDropdownVisible ? hoverColor : typographyColor
             }, {
               children: MY_ACCOUNT_TEXT
             })), jsxRuntime.jsx(ctDesignIcons.ChevronDown, {
               width: 20,
               height: 20,
-              fill: isDropdownVisible ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+              fill: isDropdownVisible ? hoverColor : typographyColor
             })]
           }))]
         })), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
@@ -1204,9 +1285,13 @@
           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
         }),
@@ -1245,31 +1330,45 @@
       }, [createPayload, isUserLoggedIn, ravenEventName, ravenPayload, ravenPushCallback, ravenPageName]);
       return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(ctDesignContainer.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: jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsxs(ctDesignContainer.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: [jsxRuntime.jsx(ctDesignIcons.CTLogo, {
-                fillColor: effectiveNovacThemeEnabled ? '#FFF' : '#FF4F17'
+                fillColor: logoFill
               }), jsxRuntime.jsx(ctDesignDivider.Divider, {
-                style: {
+                css: {
                   width: 12,
                   marginLeft: 2,
                   marginRight: 2,
@@ -1277,15 +1376,27 @@
                   borderBottom: '1px solid #e0e0e0'
                 }
               }), jsxRuntime.jsx(ctDesignIcons.Fkcompany, {
-                color: effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                color: fkcompanyColor
               })]
             })), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-              className: 'flex flex-row flex-middle flex-center flex-cg-6'
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              columnGap: '24px'
             }, {
               children: [jsxRuntime.jsx(ctDesignContainer.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 jsxRuntime.jsxs(ctDesignContainer.Container, {
                     children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
@@ -1296,47 +1407,52 @@
                         }
                       },
                       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: [jsxRuntime.jsx(option.lefticon, {
-                        color: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                      children: [jsxRuntime.jsx(LeftIcon, {
+                        color: isHovered ? hoverColor : typographyColor
                       }), jsxRuntime.jsxs(ctDesignContainer.Container, __assign({
-                        className: 'flex flex-row flex-middle'
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center'
                       }, {
                         children: [jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                           variant: 'B2',
-                          colorCode: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A',
+                          colorCode: isHovered ? hoverColor : typographyColor,
                           isClickable: true
                         }, {
-                          children: option.text
-                        })), option.rightIcon && jsxRuntime.jsx(option.rightIcon, {
+                          children: text
+                        })), RightIcon && jsxRuntime.jsx(RightIcon, {
                           width: 20,
                           height: 20,
-                          fill: isHovered ? hoverColor : effectiveNovacThemeEnabled ? '#FFF' : '#1A1A1A'
+                          fill: isHovered ? hoverColor : typographyColor
                         })]
                       }))]
                     }), "nav-option-".concat(index)), jsxRuntime.jsx(HeaderAnimatedMask, __assign({
-                      show: hoveredElemIndex === index && option.isHoverable && isDropdownVisible,
+                      show: hoveredElemIndex === index && isHoverable && isDropdownVisible,
                       marginTop: '64px',
                       handleDropdownMouseEnter: handleDropdownMouseEnter,
                       handleDropdownMouseLeave: handleDropdownMouseLeave,
                       onMaskClick: handleDropdownMouseLeave
                     }, {
                       children: jsxRuntime.jsx(BusinessDropdownContent, {
-                        isOpen: hoveredElemIndex === index && option.isHoverable && isDropdownVisible
+                        isOpen: hoveredElemIndex === index && isHoverable && isDropdownVisible
                       })
                     }))]
                   });
                 })
               })), isUserLoggedIn && jsxRuntime.jsx(ctDesignDivider.Divider, {
-                style: {
+                css: {
                   width: 12,
                   margin: '0 -18px',
                   transform: 'rotate(90deg)',
@@ -1344,25 +1460,28 @@
                 }
               }), jsxRuntime.jsx(ctDesignContainer.Container, {
                 children: isUserLoggedIn ? jsxRuntime.jsx(ctDesignContainer.Container, __assign({
-                  className: 'flex flex-row flex-middle'
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center'
                 }, {
                   children: jsxRuntime.jsx(UserAccount, {})
                 })) : jsxRuntime.jsx(ctDesignButton.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: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({
                     componentNode: 'span',
                     variant: 'L2',
-                    color: effectiveNovacThemeEnabled ? 'neutral' : 'primary'
+                    color: loginButtonColorVariant === ctDesignButton.ButtonColor.NEUTRAL ? 'neutral' : 'primary'
                   }, {
-                    children: "Log in"
+                    children: LOG_IN_TEXT
                   }))
                 }))
               })]