@razorpay/blade 12.98.1 → 12.110.0

package/build/lib/web/development/components/TopNav/TabNav/TabNavItem.web.js

@@ -3,14 +3,15 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _typeof from '@babel/runtime/helpers/typeof';
 import React__default from 'react';
 import styled from 'styled-components';
+import { useTopNavContext } from '../TopNavContext.js';
 import { useTabNavContext } from './TabNavContext.js';
-import '../../Box/BaseBox/index.js';
-import getTextStyles from '../../Typography/Text/getTextStyles.js';
 import '../../../utils/index.js';
 import '../../../tokens/global/index.js';
-import '../../../utils/assignWithoutSideEffects/index.js';
-import '../../../utils/makeAccessible/index.js';
 import '../../../utils/metaAttribute/index.js';
+import '../../../utils/makeAccessible/index.js';
+import '../../Box/BaseBox/index.js';
+import getTextStyles from '../../Typography/Text/getTextStyles.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
 import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
 import '../../../utils/getFocusRingStyles/index.js';
 import '../../BladeProvider/index.js';
@@ -40,18 +41,47 @@ var isRayIcon = function isRayIcon(icon) {
   var defaultIcon = isIconObjectProp(icon) ? icon["default"] : icon;
   return defaultIcon === RayIcon;
 };
+var getGlowColor = function getGlowColor(_ref) {
+  var icon = _ref.icon,
+    isPrimaryVariant = _ref.isPrimaryVariant,
+    theme = _ref.theme;
+  if (isRayIcon(icon) && !isPrimaryVariant) return theme.colors.surface.icon.onSea.onSubtle;
+  if (isPrimaryVariant) return theme.colors.surface.icon.staticWhite.normal;
+  return theme.colors.surface.background.primary.intense;
+};
+var getForegroundColors = function getForegroundColors(isPrimaryVariant, theme) {
+  if (isPrimaryVariant) {
+    return {
+      normal: theme.colors.interactive.text.onPrimary.normal,
+      subtle: theme.colors.interactive.text.onPrimary.muted,
+      hover: theme.colors.interactive.text.onPrimary.normal
+    };
+  }
+  return {
+    normal: theme.colors.surface.text.staticWhite.normal,
+    subtle: theme.colors.surface.text.staticWhite.subtle,
+    hover: theme.colors.interactive.text.staticWhite.normal
+  };
+};
+var getIconColor = function getIconColor(isPrimaryVariant, isActive) {
+  if (isPrimaryVariant) {
+    return isActive ? 'interactive.icon.onPrimary.normal' : 'interactive.icon.onPrimary.muted';
+  }
+  return isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle';
+};
 var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
   displayName: "TabNavItemweb__StyledTabNavItem",
   componentId: "sc-1eiaez7-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $isActive = _ref.$isActive;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    $isActive = _ref2.$isActive,
+    $foregroundColors = _ref2.$foregroundColors;
   return _objectSpread(_objectSpread({}, getTextStyles({
     theme: theme,
     size: 'medium',
-    weight: $isActive ? 'semibold' : 'medium',
-    color: $isActive ? 'surface.text.staticWhite.normal' : 'surface.text.staticWhite.subtle'
+    weight: $isActive ? 'semibold' : 'medium'
   })), {}, {
+    color: $isActive ? $foregroundColors.normal : $foregroundColors.subtle,
     flex: 1,
     display: 'flex',
     gap: makeSpace(theme.spacing[2]),
@@ -73,13 +103,13 @@ var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
     '&[aria-expanded="true"]': $isActive ? {} : {},
     '&:hover': $isActive ? {} : {
       opacity: 1,
-      color: theme.colors.interactive.text.staticWhite.normal
+      color: $foregroundColors.hover
     },
     '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
       theme: theme
     })), {}, {
       opacity: 1,
-      color: theme.colors.interactive.text.staticWhite.normal
+      color: $foregroundColors.hover
     }),
     '&:active': {
       opacity: 1
@@ -95,9 +125,9 @@ var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
 var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "TabNavItemweb__StyledTabNavItemWrapper",
   componentId: "sc-1eiaez7-1"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    isActive = _ref2.isActive;
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    isActive = _ref3.isActive;
   return {
     position: 'relative',
     flexShrink: 0,
@@ -112,23 +142,24 @@ var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     cursor: 'pointer'
   };
 });
-var _TabNavItem = function _TabNavItem(_ref3, ref) {
-  var as = _ref3.as,
-    title = _ref3.title,
-    isActive = _ref3.isActive,
-    icon = _ref3.icon,
-    trailing = _ref3.trailing,
-    titleSuffix = _ref3.titleSuffix,
-    accessibilityLabel = _ref3.accessibilityLabel,
-    href = _ref3.href,
-    target = _ref3.target,
-    __isInsideTabNavItems = _ref3.__isInsideTabNavItems,
-    __index = _ref3.__index,
-    props = _objectWithoutProperties(_ref3, _excluded);
+var _TabNavItem = function _TabNavItem(_ref4, ref) {
+  var as = _ref4.as,
+    title = _ref4.title,
+    isActive = _ref4.isActive,
+    icon = _ref4.icon,
+    trailing = _ref4.trailing,
+    titleSuffix = _ref4.titleSuffix,
+    accessibilityLabel = _ref4.accessibilityLabel,
+    href = _ref4.href,
+    target = _ref4.target,
+    __isInsideTabNavItems = _ref4.__isInsideTabNavItems,
+    __index = _ref4.__index,
+    props = _objectWithoutProperties(_ref4, _excluded);
   var _useTabNavContext = useTabNavContext(),
     setControlledItems = _useTabNavContext.setControlledItems;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
+  var topNavContext = useTopNavContext();
   var bodyRef = React__default.useRef(null);
   useIsomorphicLayoutEffect(function () {
     if (!bodyRef.current) return;
@@ -155,7 +186,14 @@ var _TabNavItem = function _TabNavItem(_ref3, ref) {
       ResolvedIcon = icon;
     }
   }
-  var glowColor = isRayIcon(icon) ? theme.colors.surface.icon.onSea.onSubtle : theme.colors.surface.background.primary.intense;
+  var isPrimaryVariant = (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.variant) === 'primary';
+  var foregroundColors = getForegroundColors(isPrimaryVariant, theme);
+  var glowColor = getGlowColor({
+    icon: icon,
+    isPrimaryVariant: isPrimaryVariant,
+    theme: theme
+  });
+  var iconColor = getIconColor(isPrimaryVariant, isActive);
   return /*#__PURE__*/jsx(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
     ref: bodyRef,
     isActive: isActive,
@@ -170,7 +208,8 @@ var _TabNavItem = function _TabNavItem(_ref3, ref) {
       to: href,
       href: as ? undefined : href,
       target: target,
-      $isActive: isActive
+      $isActive: isActive,
+      $foregroundColors: foregroundColors
     }, props), metaAttribute({
       name: MetaConstants.TabNavItemLink
     })), makeAccessible({
@@ -179,7 +218,7 @@ var _TabNavItem = function _TabNavItem(_ref3, ref) {
     })), {}, {
       children: [ResolvedIcon ? /*#__PURE__*/jsx(ResolvedIcon, {
         size: "medium",
-        color: isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle'
+        color: iconColor
       }) : null, title, titleSuffix ? titleSuffix : null, trailing ? trailing : null]
     }))
   }));

package/build/lib/web/development/components/TopNav/TabNav/TabNavItem.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavItem.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { TabNavItemProps, TabNavIconProp } from './types';\nimport { useTabNavContext } from './TabNavContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport { opacity } from '~tokens/global';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { useTheme } from '~components/BladeProvider';\nimport type { IconComponent } from '~components/Icons';\nimport { RayIcon } from '~components/Icons';\n\nconst isIconObjectProp = (\n  icon: TabNavIconProp,\n): icon is { default: IconComponent; selected: IconComponent } => {\n  return typeof icon === 'object' && icon !== null && 'default' in icon;\n};\n\nconst isRayIcon = (icon?: TabNavIconProp): boolean => {\n  if (!icon) return false;\n  const defaultIcon = isIconObjectProp(icon) ? icon.default : icon;\n  return defaultIcon === RayIcon;\n};\n\nconst StyledTabNavItem = styled.a<{ $isActive?: boolean }>(({ theme, $isActive }) => {\n  return {\n    ...getTextStyles({\n      theme,\n      size: 'medium',\n      weight: $isActive ? 'semibold' : 'medium',\n      color: $isActive ? 'surface.text.staticWhite.normal' : 'surface.text.staticWhite.subtle',\n    }),\n    flex: 1,\n    display: 'flex',\n    gap: makeSpace(theme.spacing[2]),\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    paddingTop: makeSpace(theme.spacing[3]),\n    paddingBottom: makeSpace(theme.spacing[3]),\n    paddingLeft: makeSpace(theme.spacing[4]),\n    paddingRight: makeSpace(theme.spacing[4]),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    // reset button styles\n    border: 'none',\n    background: 'none',\n    opacity: $isActive ? 1 : opacity[1000],\n    transition: `opacity ${makeMotionTime(theme.motion.duration.moderate)} ${\n      theme.motion.easing.standard\n    }`,\n    '&[aria-expanded=\"true\"]': $isActive ? {} : {},\n    '&:hover': $isActive\n      ? {}\n      : {\n          opacity: 1,\n          color: theme.colors.interactive.text.staticWhite.normal,\n        },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      opacity: 1,\n      color: theme.colors.interactive.text.staticWhite.normal,\n    },\n    '&:active': {\n      opacity: 1,\n    },\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      zIndex: 1, // ensures it sits above the wrapper\n    },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n}>(({ theme, isActive }) => {\n  return {\n    position: 'relative',\n    flexShrink: 0,\n    padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,\n    backgroundColor: 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'background',\n    zIndex: 1,\n    cursor: 'pointer',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  {\n    as,\n    title,\n    isActive,\n    icon,\n    trailing,\n    titleSuffix,\n    accessibilityLabel,\n    href,\n    target,\n    // @ts-expect-error - This prop is only used internally\n    __isInsideTabNavItems,\n    // @ts-expect-error - This prop is only used internally\n    __index,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { setControlledItems } = useTabNavContext();\n  const { theme } = useTheme();\n  const bodyRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!bodyRef.current) return;\n    if (!__isInsideTabNavItems) return;\n    setControlledItems((prev) => {\n      return prev.map((item, index) => {\n        if (index !== __index) return item;\n        const bounds = bodyRef?.current?.getBoundingClientRect()!;\n        const tabWidth = bounds.width;\n        const offsetX = bounds.right;\n        return {\n          ...item,\n          tabWidth,\n          offsetX,\n        };\n      });\n    });\n  }, [__isInsideTabNavItems, __index, setControlledItems]);\n\n  let ResolvedIcon: IconComponent | undefined;\n  if (icon) {\n    if (isIconObjectProp(icon)) {\n      ResolvedIcon = isActive ? icon.selected : icon.default;\n    } else {\n      ResolvedIcon = icon;\n    }\n  }\n\n  const glowColor = isRayIcon(icon)\n    ? theme.colors.surface.icon.onSea.onSubtle\n    : theme.colors.surface.background.primary.intense;\n\n  return (\n    <StyledTabNavItemWrapper\n      ref={bodyRef}\n      isActive={isActive}\n      data-active={isActive ? 'true' : 'false'}\n      data-glow-color={glowColor}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <StyledTabNavItem\n        ref={ref}\n        as={as ?? (href ? 'a' : 'button')}\n        to={href}\n        href={as ? undefined : href}\n        target={target}\n        $isActive={isActive}\n        {...props}\n        {...metaAttribute({ name: MetaConstants.TabNavItemLink })}\n        {...makeAccessible({ label: accessibilityLabel, current: isActive })}\n      >\n        {ResolvedIcon ? (\n          <ResolvedIcon\n            size=\"medium\"\n            color={isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle'}\n          />\n        ) : null}\n        {title}\n        {titleSuffix ? titleSuffix : null}\n        {trailing ? trailing : null}\n      </StyledTabNavItem>\n    </StyledTabNavItemWrapper>\n  );\n};\n\nconst TabNavItem = assignWithoutSideEffects(React.forwardRef(_TabNavItem), {\n  displayName: 'TabNavItem',\n});\n\nexport { TabNavItem };\n"],"names":["isIconObjectProp","icon","_typeof","isRayIcon","defaultIcon","RayIcon","StyledTabNavItem","styled","a","withConfig","displayName","componentId","_ref","theme","$isActive","_objectSpread","getTextStyles","size","weight","color","flex","display","gap","makeSpace","spacing","alignItems","justifyContent","height","textDecoration","whiteSpace","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","makeBorderSize","border","radius","medium","background","opacity","transition","concat","makeMotionTime","motion","duration","moderate","easing","standard","colors","interactive","text","staticWhite","normal","getFocusRingStyles","content","position","inset","zIndex","StyledTabNavItemWrapper","BaseBox","_ref2","isActive","flexShrink","padding","backgroundColor","borderColor","surface","gray","muted","borderTopLeftRadius","borderTopRightRadius","transitionProperty","cursor","_TabNavItem","_ref3","ref","as","title","trailing","titleSuffix","accessibilityLabel","href","target","__isInsideTabNavItems","__index","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","setControlledItems","_useTheme","useTheme","bodyRef","React","useRef","useIsomorphicLayoutEffect","current","prev","map","item","index","_bodyRef$current","bounds","getBoundingClientRect","tabWidth","width","offsetX","right","ResolvedIcon","selected","glowColor","onSea","onSubtle","primary","intense","_jsx","metaAttribute","name","MetaConstants","TabNavItem","children","_jsxs","to","undefined","TabNavItemLink","makeAccessible","label","assignWithoutSideEffects","forwardRef"],"mappings":"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"}
+{"version":3,"file":"TabNavItem.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavItem.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useTopNavContext } from '../TopNavContext';\nimport type { TabNavItemProps, TabNavIconProp } from './types';\nimport { useTabNavContext } from './TabNavContext';\nimport { makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport { opacity } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport BaseBox from '~components/Box/BaseBox';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { useTheme } from '~components/BladeProvider';\nimport type { Theme } from '~components/BladeProvider';\nimport type { IconComponent } from '~components/Icons';\nimport { RayIcon } from '~components/Icons';\n\nconst isIconObjectProp = (\n  icon: TabNavIconProp,\n): icon is { default: IconComponent; selected: IconComponent } => {\n  return typeof icon === 'object' && icon !== null && 'default' in icon;\n};\n\nconst isRayIcon = (icon?: TabNavIconProp): boolean => {\n  if (!icon) return false;\n  const defaultIcon = isIconObjectProp(icon) ? icon.default : icon;\n  return defaultIcon === RayIcon;\n};\n\nconst getGlowColor = ({\n  icon,\n  isPrimaryVariant,\n  theme,\n}: {\n  icon?: TabNavIconProp;\n  isPrimaryVariant: boolean;\n  theme: Theme;\n}): string => {\n  if (isRayIcon(icon) && !isPrimaryVariant) return theme.colors.surface.icon.onSea.onSubtle;\n  if (isPrimaryVariant) return theme.colors.surface.icon.staticWhite.normal;\n  return theme.colors.surface.background.primary.intense;\n};\n\nconst getForegroundColors = (\n  isPrimaryVariant: boolean,\n  theme: Theme,\n): {\n  normal: string;\n  subtle: string;\n  hover: string;\n} => {\n  if (isPrimaryVariant) {\n    return {\n      normal: theme.colors.interactive.text.onPrimary.normal,\n      subtle: theme.colors.interactive.text.onPrimary.muted,\n      hover: theme.colors.interactive.text.onPrimary.normal,\n    };\n  }\n  return {\n    normal: theme.colors.surface.text.staticWhite.normal,\n    subtle: theme.colors.surface.text.staticWhite.subtle,\n    hover: theme.colors.interactive.text.staticWhite.normal,\n  };\n};\n\nconst getIconColor = (isPrimaryVariant: boolean, isActive: boolean | undefined) => {\n  if (isPrimaryVariant) {\n    return isActive ? 'interactive.icon.onPrimary.normal' : 'interactive.icon.onPrimary.muted';\n  }\n  return isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle';\n};\n\nconst StyledTabNavItem = styled.a<{\n  $isActive?: boolean;\n  $foregroundColors: ReturnType<typeof getForegroundColors>;\n}>(({ theme, $isActive, $foregroundColors }) => {\n  return {\n    ...getTextStyles({\n      theme,\n      size: 'medium',\n      weight: $isActive ? 'semibold' : 'medium',\n    }),\n    color: $isActive ? $foregroundColors.normal : $foregroundColors.subtle,\n    flex: 1,\n    display: 'flex',\n    gap: makeSpace(theme.spacing[2]),\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    paddingTop: makeSpace(theme.spacing[3]),\n    paddingBottom: makeSpace(theme.spacing[3]),\n    paddingLeft: makeSpace(theme.spacing[4]),\n    paddingRight: makeSpace(theme.spacing[4]),\n    borderRadius: makeBorderSize(theme.border.radius.medium),\n    // reset button styles\n    border: 'none',\n    background: 'none',\n    opacity: $isActive ? 1 : opacity[1000],\n    transition: `opacity ${makeMotionTime(theme.motion.duration.moderate)} ${\n      theme.motion.easing.standard\n    }`,\n    '&[aria-expanded=\"true\"]': $isActive ? {} : {},\n    '&:hover': $isActive\n      ? {}\n      : {\n          opacity: 1,\n          color: $foregroundColors.hover,\n        },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      opacity: 1,\n      color: $foregroundColors.hover,\n    },\n    '&:active': {\n      opacity: 1,\n    },\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: 0,\n      zIndex: 1, // ensures it sits above the wrapper\n    },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n}>(({ theme, isActive }) => {\n  return {\n    position: 'relative',\n    flexShrink: 0,\n    padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,\n    backgroundColor: 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'background',\n    zIndex: 1,\n    cursor: 'pointer',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  {\n    as,\n    title,\n    isActive,\n    icon,\n    trailing,\n    titleSuffix,\n    accessibilityLabel,\n    href,\n    target,\n    // @ts-expect-error - This prop is only used internally\n    __isInsideTabNavItems,\n    // @ts-expect-error - This prop is only used internally\n    __index,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { setControlledItems } = useTabNavContext();\n  const { theme } = useTheme();\n  const topNavContext = useTopNavContext();\n  const bodyRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!bodyRef.current) return;\n    if (!__isInsideTabNavItems) return;\n    setControlledItems((prev) => {\n      return prev.map((item, index) => {\n        if (index !== __index) return item;\n        const bounds = bodyRef?.current?.getBoundingClientRect()!;\n        const tabWidth = bounds.width;\n        const offsetX = bounds.right;\n        return {\n          ...item,\n          tabWidth,\n          offsetX,\n        };\n      });\n    });\n  }, [__isInsideTabNavItems, __index, setControlledItems]);\n\n  let ResolvedIcon: IconComponent | undefined;\n  if (icon) {\n    if (isIconObjectProp(icon)) {\n      ResolvedIcon = isActive ? icon.selected : icon.default;\n    } else {\n      ResolvedIcon = icon;\n    }\n  }\n\n  const isPrimaryVariant = topNavContext?.variant === 'primary';\n  const foregroundColors = getForegroundColors(isPrimaryVariant, theme);\n  const glowColor = getGlowColor({ icon, isPrimaryVariant, theme });\n  const iconColor = getIconColor(isPrimaryVariant, isActive);\n\n  return (\n    <StyledTabNavItemWrapper\n      ref={bodyRef}\n      isActive={isActive}\n      data-active={isActive ? 'true' : 'false'}\n      data-glow-color={glowColor}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <StyledTabNavItem\n        ref={ref}\n        as={as ?? (href ? 'a' : 'button')}\n        to={href}\n        href={as ? undefined : href}\n        target={target}\n        $isActive={isActive}\n        $foregroundColors={foregroundColors}\n        {...props}\n        {...metaAttribute({ name: MetaConstants.TabNavItemLink })}\n        {...makeAccessible({ label: accessibilityLabel, current: isActive })}\n      >\n        {ResolvedIcon ? <ResolvedIcon size=\"medium\" color={iconColor} /> : null}\n        {title}\n        {titleSuffix ? titleSuffix : null}\n        {trailing ? trailing : null}\n      </StyledTabNavItem>\n    </StyledTabNavItemWrapper>\n  );\n};\n\nconst TabNavItem = assignWithoutSideEffects(React.forwardRef(_TabNavItem), {\n  displayName: 'TabNavItem',\n});\n\nexport { TabNavItem };\n"],"names":["isIconObjectProp","icon","_typeof","isRayIcon","defaultIcon","RayIcon","getGlowColor","_ref","isPrimaryVariant","theme","colors","surface","onSea","onSubtle","staticWhite","normal","background","primary","intense","getForegroundColors","interactive","text","onPrimary","subtle","muted","hover","getIconColor","isActive","StyledTabNavItem","styled","a","withConfig","displayName","componentId","_ref2","$isActive","$foregroundColors","_objectSpread","getTextStyles","size","weight","color","flex","display","gap","makeSpace","spacing","alignItems","justifyContent","height","textDecoration","whiteSpace","paddingTop","paddingBottom","paddingLeft","paddingRight","borderRadius","makeBorderSize","border","radius","medium","opacity","transition","concat","makeMotionTime","motion","duration","moderate","easing","standard","getFocusRingStyles","content","position","inset","zIndex","StyledTabNavItemWrapper","BaseBox","_ref3","flexShrink","padding","backgroundColor","borderColor","gray","borderTopLeftRadius","borderTopRightRadius","transitionProperty","cursor","_TabNavItem","_ref4","ref","as","title","trailing","titleSuffix","accessibilityLabel","href","target","__isInsideTabNavItems","__index","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","setControlledItems","_useTheme","useTheme","topNavContext","useTopNavContext","bodyRef","React","useRef","useIsomorphicLayoutEffect","current","prev","map","item","index","_bodyRef$current","bounds","getBoundingClientRect","tabWidth","width","offsetX","right","ResolvedIcon","selected","variant","foregroundColors","glowColor","iconColor","_jsx","metaAttribute","name","MetaConstants","TabNavItem","children","_jsxs","to","undefined","TabNavItemLink","makeAccessible","label","assignWithoutSideEffects","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/TopNav/TopNav.web.js

@@ -2,41 +2,50 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import { TopNavContext, useTopNavContext } from './TopNavContext.js';
-import '../BladeProvider/index.js';
-import '../Box/BaseBox/index.js';
-import { SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL } from '../SideNav/tokens.js';
 import '../../tokens/global/index.js';
-import '../../tokens/theme/index.js';
 import '../../utils/index.js';
-import { componentZIndices } from '../../utils/componentZIndices.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
 import '../../utils/metaAttribute/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../BladeProvider/index.js';
+import '../Box/BaseBox/index.js';
+import { SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL } from '../SideNav/tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { size } from '../../tokens/global/size.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';
-import bladeTheme from '../../tokens/theme/bladeTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded = ["children"];
+var _excluded = ["children", "variant", "backgroundColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TOP_NAV_HEIGHT = size[56];
+var TOP_NAV_BACKGROUND_COLOR = {
+  neutral: 'interactive.background.staticBlack.default',
+  primary: 'surface.background.primary.intense'
+};
 var _TopNav = function _TopNav(_ref, ref) {
   var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
+    backgroundColor = _ref.backgroundColor,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
-    colorScheme = _useTheme.colorScheme;
+    colorScheme = _useTheme.colorScheme,
+    themeTokens = _useTheme.themeTokens;
+  var resolvedBackgroundColor = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : TOP_NAV_BACKGROUND_COLOR[variant];
   return /*#__PURE__*/jsx(TopNavContext.Provider, {
     value: {
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      themeTokens: themeTokens,
+      variant: variant
     },
     children: /*#__PURE__*/jsx(BladeProvider, {
-      themeTokens: bladeTheme,
+      themeTokens: themeTokens,
       colorScheme: "dark",
       children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         ref: ref,
@@ -56,7 +65,8 @@ var _TopNav = function _TopNav(_ref, ref) {
         },
         height: makeSize(TOP_NAV_HEIGHT),
         zIndex: componentZIndices.topnav,
-        backgroundColor: "interactive.background.staticBlack.default"
+        backgroundColor: resolvedBackgroundColor,
+        overflow: "hidden"
       }, rest), metaAttribute({
         name: MetaConstants.TopNav,
         testID: rest.testID
@@ -68,7 +78,9 @@ var _TopNav = function _TopNav(_ref, ref) {
 };
 var TopNav = /*#__PURE__*/React__default.forwardRef(_TopNav);
 var TopNavBrand = function TopNavBrand(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    _ref2$paddingY = _ref2.paddingY,
+    paddingY = _ref2$paddingY === void 0 ? 'spacing.5' : _ref2$paddingY;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
     flexDirection: "row",
     width: {
@@ -78,7 +90,7 @@ var TopNavBrand = function TopNavBrand(_ref2) {
   }, metaAttribute({
     name: MetaConstants.TopNavBrand
   })), {}, {
-    paddingY: "spacing.5",
+    paddingY: paddingY,
     marginLeft: "spacing.6",
     children: /*#__PURE__*/jsx(BaseBox, {
       width: "100%",
@@ -103,7 +115,8 @@ var TopNavActions = function TopNavActions(_ref4) {
   var children = _ref4.children;
   var topNavContext = useTopNavContext();
   var _useTheme2 = useTheme(),
-    colorScheme = _useTheme2.colorScheme;
+    colorScheme = _useTheme2.colorScheme,
+    themeTokens = _useTheme2.themeTokens;
   var topNavActions = /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
     alignSelf: "flex-start",
     display: "flex",
@@ -120,14 +133,19 @@ var TopNavActions = function TopNavActions(_ref4) {
     children: children
   }));
   if (topNavContext) {
-    return topNavActions;
+    return /*#__PURE__*/jsx(BladeProvider, {
+      themeTokens: topNavContext.themeTokens,
+      colorScheme: topNavContext.variant === 'primary' ? 'light' : 'dark',
+      children: topNavActions
+    });
   }
   return /*#__PURE__*/jsx(TopNavContext.Provider, {
     value: {
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      themeTokens: themeTokens
     },
     children: /*#__PURE__*/jsx(BladeProvider, {
-      themeTokens: bladeTheme,
+      themeTokens: themeTokens,
       colorScheme: "dark",
       children: topNavActions
     })

package/build/lib/web/development/components/TopNav/TopNav.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport { TopNavContext, useTopNavContext } from './TopNavContext';\nimport type { BoxProps } from '~components/Box';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\nimport { size } from '~tokens/global';\nimport { bladeTheme } from '~tokens/theme';\nimport { makeSize } from '~utils';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\n\nconst TOP_NAV_HEIGHT = size[56];\n\ntype TopNavProps = {\n  children: React.ReactNode;\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst _TopNav = (\n  { children, ...rest }: TopNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { colorScheme } = useTheme();\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme }}>\n      {/* We are forcing the theme to dark here because the TopNav is always in dark mode. \n       we also want components inside the TopNav to be in the same theme as the TopNav.\n      */}\n      <BladeProvider themeTokens={bladeTheme} colorScheme=\"dark\">\n        <BaseBox\n          ref={ref as never}\n          display=\"grid\"\n          gridTemplateColumns=\"auto minmax(0, 1fr) auto\"\n          alignItems=\"center\"\n          position=\"sticky\"\n          top=\"0px\"\n          width=\"100%\"\n          paddingY={{ base: 'spacing.3', m: 'spacing.0' }}\n          paddingX={{ base: 'spacing.4', m: 'spacing.3' }}\n          height={makeSize(TOP_NAV_HEIGHT)}\n          zIndex={componentZIndices.topnav}\n          backgroundColor=\"interactive.background.staticBlack.default\"\n          {...rest}\n          {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {children}\n        </BaseBox>\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nconst TopNav = React.forwardRef(_TopNav);\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      flexDirection=\"row\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n      paddingY=\"spacing.5\"\n      marginLeft=\"spacing.6\"\n    >\n      <BaseBox width=\"100%\">{children}</BaseBox>\n    </BaseBox>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"center\"\n      justifyContent=\"center\"\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { colorScheme } = useTheme();\n  const topNavActions = (\n    <BaseBox\n      alignSelf=\"flex-start\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      paddingRight=\"spacing.2\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n\n  if (topNavContext) {\n    return topNavActions;\n  }\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme }}>\n      <BladeProvider themeTokens={bladeTheme} colorScheme=\"dark\">\n        {topNavActions}\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","_TopNav","_ref","ref","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","colorScheme","_jsx","TopNavContext","Provider","value","BladeProvider","themeTokens","bladeTheme","BaseBox","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","backgroundColor","metaAttribute","name","MetaConstants","TopNav","testID","makeAnalyticsAttribute","React","forwardRef","TopNavBrand","_ref2","flexDirection","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","marginLeft","TopNavContent","_ref3","alignSelf","justifyContent","TopNavActions","_ref4","topNavContext","useTopNavContext","_useTheme2","topNavActions","gap","marginTop","padding","paddingRight","borderTopLeftRadius","borderTopRightRadius"],"mappings":"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"}
+{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport { TopNavContext, useTopNavContext } from './TopNavContext';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport type { BoxProps } from '~components/Box';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BaseBoxProps } from '~components/Box/BaseBox/types';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport {\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n} from '~components/SideNav/tokens';\n\nconst TOP_NAV_HEIGHT = size[56];\n\ntype TopNavProps = {\n  children: React.ReactNode;\n  /**\n   * Sets the background color variant of the TopNav.\n   *\n   * - `'neutral'` (default): Uses the static black background. Existing behavior.\n   * - `'primary'`: Uses the primary brand color (`surface.background.primary.intense`).\n   *\n   * Passing an explicit `backgroundColor` prop will override this variant.\n   *\n   * @default 'neutral'\n   */\n  variant?: 'primary' | 'neutral';\n} & Pick<\n  BoxProps,\n  | 'padding'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingX'\n  | 'paddingY'\n  | 'backgroundColor'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'width'\n  | 'zIndex'\n  | keyof DataAnalyticsAttribute\n> &\n  TestID &\n  StyledPropsBlade;\n\nconst TOP_NAV_BACKGROUND_COLOR: Record<\n  NonNullable<TopNavProps['variant']>,\n  BaseBoxProps['backgroundColor']\n> = {\n  neutral: 'interactive.background.staticBlack.default',\n  primary: 'surface.background.primary.intense',\n};\n\nconst _TopNav = (\n  { children, variant = 'neutral', backgroundColor, ...rest }: TopNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { colorScheme, themeTokens } = useTheme();\n  const resolvedBackgroundColor = backgroundColor ?? TOP_NAV_BACKGROUND_COLOR[variant];\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme, themeTokens, variant }}>\n      {/* We are forcing the theme to dark here because the TopNav is always in dark mode.\n       we also want components inside the TopNav to be in the same theme as the TopNav.\n      */}\n      <BladeProvider themeTokens={themeTokens} colorScheme=\"dark\">\n        <BaseBox\n          ref={ref as never}\n          display=\"grid\"\n          gridTemplateColumns=\"auto minmax(0, 1fr) auto\"\n          alignItems=\"center\"\n          position=\"sticky\"\n          top=\"0px\"\n          width=\"100%\"\n          paddingY={{ base: 'spacing.3', m: 'spacing.0' }}\n          paddingX={{ base: 'spacing.4', m: 'spacing.3' }}\n          height={makeSize(TOP_NAV_HEIGHT)}\n          zIndex={componentZIndices.topnav}\n          backgroundColor={resolvedBackgroundColor}\n          overflow=\"hidden\"\n          {...rest}\n          {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {children}\n        </BaseBox>\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nconst TopNav = React.forwardRef(_TopNav);\n\ntype TopNavBrandProps = {\n  children: React.ReactNode;\n} & Pick<BoxProps, 'paddingY'>;\n\nconst TopNavBrand = ({\n  children,\n  paddingY = 'spacing.5',\n}: TopNavBrandProps): React.ReactElement => {\n  return (\n    <BaseBox\n      flexDirection=\"row\"\n      width={{\n        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n      }}\n      {...metaAttribute({ name: MetaConstants.TopNavBrand })}\n      paddingY={paddingY}\n      marginLeft=\"spacing.6\"\n    >\n      <BaseBox width=\"100%\">{children}</BaseBox>\n    </BaseBox>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      alignSelf=\"center\"\n      justifyContent=\"center\"\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { colorScheme, themeTokens } = useTheme();\n  const topNavActions = (\n    <BaseBox\n      alignSelf=\"flex-start\"\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      padding=\"spacing.3\"\n      paddingRight=\"spacing.2\"\n      borderTopLeftRadius=\"medium\"\n      borderTopRightRadius=\"medium\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n\n  if (topNavContext) {\n    return (\n      <BladeProvider\n        themeTokens={topNavContext.themeTokens}\n        colorScheme={topNavContext.variant === 'primary' ? 'light' : 'dark'}\n      >\n        {topNavActions}\n      </BladeProvider>\n    );\n  }\n\n  return (\n    <TopNavContext.Provider value={{ colorScheme, themeTokens }}>\n      <BladeProvider themeTokens={themeTokens} colorScheme=\"dark\">\n        {topNavActions}\n      </BladeProvider>\n    </TopNavContext.Provider>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps, TopNavBrandProps };\n"],"names":["TOP_NAV_HEIGHT","size","TOP_NAV_BACKGROUND_COLOR","neutral","primary","_TopNav","_ref","ref","children","_ref$variant","variant","backgroundColor","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","colorScheme","themeTokens","resolvedBackgroundColor","_jsx","TopNavContext","Provider","value","BladeProvider","BaseBox","_objectSpread","display","gridTemplateColumns","alignItems","position","top","width","paddingY","base","m","paddingX","height","makeSize","zIndex","componentZIndices","topnav","overflow","metaAttribute","name","MetaConstants","TopNav","testID","makeAnalyticsAttribute","React","forwardRef","TopNavBrand","_ref2","_ref2$paddingY","flexDirection","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","marginLeft","TopNavContent","_ref3","alignSelf","justifyContent","TopNavActions","_ref4","topNavContext","useTopNavContext","_useTheme2","topNavActions","gap","marginTop","padding","paddingRight","borderTopLeftRadius","borderTopRightRadius"],"mappings":"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"}

package/build/lib/web/development/components/TopNav/TopNavContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavContext.js","sources":["../../../../../../src/components/TopNav/TopNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ColorSchemeNames } from '~tokens/theme';\n\ntype TopNavContextProps = {\n  colorScheme: ColorSchemeNames;\n};\n\nconst TopNavContext = React.createContext<TopNavContextProps | null>(null);\n\n/**\n * Returns the TopNav context if inside a TopNav, otherwise null.\n * Stores the original app colorScheme so that overlay components\n * (Menu, Popover, etc.) rendered inside TopNav can reset back to\n * the app's colorScheme instead of inheriting TopNav's dark theme.\n */\nconst useTopNavContext = (): TopNavContextProps | null => {\n  return React.useContext(TopNavContext);\n};\n\nexport type { TopNavContextProps };\nexport { TopNavContext, useTopNavContext };\n"],"names":["TopNavContext","React","createContext","useTopNavContext","useContext"],"mappings":";;AAOA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAAoC;AACxD,EAAA,OAAOF,cAAK,CAACG,UAAU,CAACJ,aAAa,CAAC,CAAA;AACxC;;;;"}
+{"version":3,"file":"TopNavContext.js","sources":["../../../../../../src/components/TopNav/TopNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { ColorSchemeNames, ThemeTokens } from '~tokens/theme';\n\ntype TopNavContextProps = {\n  colorScheme: ColorSchemeNames;\n  themeTokens: ThemeTokens;\n  variant?: 'primary' | 'neutral';\n};\n\nconst TopNavContext = React.createContext<TopNavContextProps | null>(null);\n\n/**\n * Returns the TopNav context if inside a TopNav, otherwise null.\n * Stores the original app colorScheme so that overlay components\n * (Menu, Popover, etc.) rendered inside TopNav can reset back to\n * the app's colorScheme instead of inheriting TopNav's dark theme.\n */\nconst useTopNavContext = (): TopNavContextProps | null => {\n  return React.useContext(TopNavContext);\n};\n\nexport type { TopNavContextProps };\nexport { TopNavContext, useTopNavContext };\n"],"names":["TopNavContext","React","createContext","useTopNavContext","useContext"],"mappings":";;AASA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;;AAE1E;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAAoC;AACxD,EAAA,OAAOF,cAAK,CAACG,UAAU,CAACJ,aAAa,CAAC,CAAA;AACxC;;;;"}

package/build/lib/web/development/components/TopNav/TopNavOverlayThemeOverride.js

@@ -2,15 +2,30 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import { ThemeProvider } from 'styled-components';
 import { useTopNavContext } from './TopNavContext.js';
-import '../../tokens/theme/index.js';
 import '../BladeProvider/index.js';
 import useTheme, { ThemeContext } from '../BladeProvider/useTheme.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import bladeTheme from '../../tokens/theme/bladeTheme.js';
 import { BladeProvider } from '../BladeProvider/BladeProvider.web.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getOverrideColorScheme = function getOverrideColorScheme(_ref) {
+  var _topNavContext$colorS;
+  var isPrimaryVariant = _ref.isPrimaryVariant,
+    shouldOverrideTheme = _ref.shouldOverrideTheme,
+    topNavContext = _ref.topNavContext;
+  if (isPrimaryVariant) return 'light';
+  if (shouldOverrideTheme) return (_topNavContext$colorS = topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) !== null && _topNavContext$colorS !== void 0 ? _topNavContext$colorS : 'light';
+  return 'dark';
+};
+var getIsDark = function getIsDark(_ref2) {
+  var isPrimaryVariant = _ref2.isPrimaryVariant,
+    shouldOverrideTheme = _ref2.shouldOverrideTheme,
+    topNavContext = _ref2.topNavContext;
+  if (isPrimaryVariant) return false;
+  if (shouldOverrideTheme) return (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) === 'dark';
+  return true;
+};
 /**
  * Wraps children with the correct theme when rendered inside TopNav.
  *
@@ -25,20 +40,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  *
  * Outside TopNav this is a no-op passthrough.
  */
-var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
-  var children = _ref.children,
-    shouldOverrideTheme = _ref.shouldOverrideTheme;
+var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref3) {
+  var children = _ref3.children,
+    shouldOverrideTheme = _ref3.shouldOverrideTheme;
   var topNavContext = useTopNavContext();
   var _useTheme = useTheme(),
-    platform = _useTheme.platform;
-  var isDark = shouldOverrideTheme ? (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) === 'dark' : true;
+    platform = _useTheme.platform,
+    themeTokens = _useTheme.themeTokens;
+  var isPrimaryVariant = (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.variant) === 'primary';
+  var isDark = getIsDark({
+    isPrimaryVariant: isPrimaryVariant,
+    shouldOverrideTheme: shouldOverrideTheme,
+    topNavContext: topNavContext
+  });
   var overrideTheme = React__default.useMemo(function () {
-    return _objectSpread(_objectSpread({}, bladeTheme), {}, {
-      colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,
-      elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,
-      typography: bladeTheme.typography[platform]
+    return _objectSpread(_objectSpread({}, themeTokens), {}, {
+      colors: isDark ? themeTokens.colors.onDark : themeTokens.colors.onLight,
+      elevation: isDark ? themeTokens.elevation.onDark : themeTokens.elevation.onLight,
+      typography: themeTokens.typography[platform]
     });
-  }, [isDark, platform]);
+  }, [isDark, platform, themeTokens]);
   if (!topNavContext) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return /*#__PURE__*/jsx(Fragment, {
@@ -51,7 +72,12 @@ var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
     return /*#__PURE__*/jsx(ThemeContext.Provider, {
       value: {
         theme: overrideTheme,
-        colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',
+        themeTokens: themeTokens,
+        colorScheme: getOverrideColorScheme({
+          isPrimaryVariant: isPrimaryVariant,
+          shouldOverrideTheme: shouldOverrideTheme,
+          topNavContext: topNavContext
+        }),
         setColorScheme: noop,
         platform: platform
       },
@@ -62,8 +88,8 @@ var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
     });
   }
   return /*#__PURE__*/jsx(BladeProvider, {
-    themeTokens: bladeTheme,
-    colorScheme: topNavContext.colorScheme,
+    themeTokens: themeTokens,
+    colorScheme: isPrimaryVariant ? 'light' : topNavContext.colorScheme,
     children: children
   });
 };

package/build/lib/web/development/components/TopNav/TopNavOverlayThemeOverride.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavOverlayThemeOverride.js","sources":["../../../../../../src/components/TopNav/TopNavOverlayThemeOverride.tsx"],"sourcesContent":["import React from 'react';\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components';\nimport { useTopNavContext } from './TopNavContext';\nimport { bladeTheme } from '~tokens/theme';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport type { Theme } from '~components/BladeProvider';\nimport { ThemeContext } from '~components/BladeProvider/useTheme';\n\ntype TopNavOverlayThemeOverrideProps = {\n  children: React.ReactNode;\n  /**\n   * When `true`, switches the theme to the app's original colorScheme\n   * (stored in TopNavContext) instead of TopNav's default dark theme.\n   *\n   * Used by SearchInput to toggle between dark (unfocused) and the\n   * original app theme (focused) while inside TopNav.\n   *\n   * @default false — stays in dark theme (TopNav's default)\n   */\n  shouldOverrideTheme?: boolean;\n};\n\n/**\n * Wraps children with the correct theme when rendered inside TopNav.\n *\n * TopNav forces a dark theme, but overlay/child components should render\n * in the app's original colorScheme. This wrapper centralises that logic.\n *\n * - Without `shouldOverrideTheme` (default): wraps with BladeProvider using\n *   the app's original colorScheme (for portalled overlays like Popover, Menu).\n * - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.\n * - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme\n *   via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).\n *\n * Outside TopNav this is a no-op passthrough.\n */\nconst TopNavOverlayThemeOverride = ({\n  children,\n  shouldOverrideTheme,\n}: TopNavOverlayThemeOverrideProps): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { platform } = useTheme();\n\n  const isDark = shouldOverrideTheme ? topNavContext?.colorScheme === 'dark' : true;\n  const overrideTheme: Theme = React.useMemo(\n    () => ({\n      ...bladeTheme,\n      colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,\n      elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,\n      typography: bladeTheme.typography[platform],\n    }),\n    [isDark, platform],\n  );\n\n  if (!topNavContext) {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{children}</>;\n  }\n\n  if (shouldOverrideTheme !== undefined) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const noop = (): void => {};\n\n    return (\n      <ThemeContext.Provider\n        value={{\n          theme: overrideTheme,\n          colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',\n          setColorScheme: noop,\n          platform,\n        }}\n      >\n        <StyledThemeProvider theme={overrideTheme}>{children}</StyledThemeProvider>\n      </ThemeContext.Provider>\n    );\n  }\n\n  return (\n    <BladeProvider themeTokens={bladeTheme} colorScheme={topNavContext.colorScheme}>\n      {children}\n    </BladeProvider>\n  );\n};\n\nexport { TopNavOverlayThemeOverride };\n"],"names":["TopNavOverlayThemeOverride","_ref","children","shouldOverrideTheme","topNavContext","useTopNavContext","_useTheme","useTheme","platform","isDark","colorScheme","overrideTheme","React","useMemo","_objectSpread","bladeTheme","colors","onDark","onLight","elevation","typography","_jsx","_Fragment","undefined","noop","ThemeContext","Provider","value","theme","setColorScheme","StyledThemeProvider","BladeProvider","themeTokens"],"mappings":";;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAG2B;AAAA,EAAA,IAFzDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,mBAAmB,GAAAF,IAAA,CAAnBE,mBAAmB,CAAA;AAEnB,EAAA,IAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AACxC,EAAA,IAAAC,SAAA,GAAqBC,QAAQ,EAAE;IAAvBC,QAAQ,GAAAF,SAAA,CAARE,QAAQ,CAAA;AAEhB,EAAA,IAAMC,MAAM,GAAGN,mBAAmB,GAAG,CAAAC,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAa,CAAEM,WAAW,MAAK,MAAM,GAAG,IAAI,CAAA;AACjF,EAAA,IAAMC,aAAoB,GAAGC,cAAK,CAACC,OAAO,CACxC,YAAA;AAAA,IAAA,OAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKC,UAAU,CAAA,EAAA,EAAA,EAAA;AACbC,MAAAA,MAAM,EAAEP,MAAM,GAAGM,UAAU,CAACC,MAAM,CAACC,MAAM,GAAGF,UAAU,CAACC,MAAM,CAACE,OAAO;AACrEC,MAAAA,SAAS,EAAEV,MAAM,GAAGM,UAAU,CAACI,SAAS,CAACF,MAAM,GAAGF,UAAU,CAACI,SAAS,CAACD,OAAO;AAC9EE,MAAAA,UAAU,EAAEL,UAAU,CAACK,UAAU,CAACZ,QAAQ,CAAA;AAAC,KAAA,CAAA,CAAA;AAAA,GAC3C,EACF,CAACC,MAAM,EAAED,QAAQ,CACnB,CAAC,CAAA;EAED,IAAI,CAACJ,aAAa,EAAE;AAClB;IACA,oBAAOiB,GAAA,CAAAC,QAAA,EAAA;AAAApB,MAAAA,QAAA,EAAGA,QAAAA;AAAQ,KAAG,CAAC,CAAA;AACxB,GAAA;EAEA,IAAIC,mBAAmB,KAAKoB,SAAS,EAAE;AACrC;AACA,IAAA,IAAMC,IAAI,GAAG,SAAPA,IAAIA,GAAe,EAAE,CAAA;AAE3B,IAAA,oBACEH,GAAA,CAACI,YAAY,CAACC,QAAQ,EAAA;AACpBC,MAAAA,KAAK,EAAE;AACLC,QAAAA,KAAK,EAAEjB,aAAa;AACpBD,QAAAA,WAAW,EAAEP,mBAAmB,GAAGC,aAAa,CAACM,WAAW,GAAG,MAAM;AACrEmB,QAAAA,cAAc,EAAEL,IAAI;AACpBhB,QAAAA,QAAQ,EAARA,QAAAA;OACA;MAAAN,QAAA,eAEFmB,GAAA,CAACS,aAAmB,EAAA;AAACF,QAAAA,KAAK,EAAEjB,aAAc;AAAAT,QAAAA,QAAA,EAAEA,QAAAA;OAA8B,CAAA;AAAC,KACtD,CAAC,CAAA;AAE5B,GAAA;EAEA,oBACEmB,GAAA,CAACU,aAAa,EAAA;AAACC,IAAAA,WAAW,EAAEjB,UAAW;IAACL,WAAW,EAAEN,aAAa,CAACM,WAAY;AAAAR,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACI,CAAC,CAAA;AAEpB;;;;"}
+{"version":3,"file":"TopNavOverlayThemeOverride.js","sources":["../../../../../../src/components/TopNav/TopNavOverlayThemeOverride.tsx"],"sourcesContent":["import React from 'react';\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components';\nimport { useTopNavContext } from './TopNavContext';\nimport { BladeProvider, useTheme } from '~components/BladeProvider';\nimport type { Theme } from '~components/BladeProvider';\nimport { ThemeContext } from '~components/BladeProvider/useTheme';\n\nconst getOverrideColorScheme = ({\n  isPrimaryVariant,\n  shouldOverrideTheme,\n  topNavContext,\n}: {\n  isPrimaryVariant: boolean;\n  shouldOverrideTheme: boolean | undefined;\n  topNavContext: ReturnType<typeof useTopNavContext>;\n}): 'light' | 'dark' => {\n  if (isPrimaryVariant) return 'light';\n  if (shouldOverrideTheme) return topNavContext?.colorScheme ?? 'light';\n  return 'dark';\n};\n\nconst getIsDark = ({\n  isPrimaryVariant,\n  shouldOverrideTheme,\n  topNavContext,\n}: {\n  isPrimaryVariant: boolean;\n  shouldOverrideTheme: boolean | undefined;\n  topNavContext: ReturnType<typeof useTopNavContext>;\n}): boolean => {\n  if (isPrimaryVariant) return false;\n  if (shouldOverrideTheme) return topNavContext?.colorScheme === 'dark';\n  return true;\n};\n\ntype TopNavOverlayThemeOverrideProps = {\n  children: React.ReactNode;\n  /**\n   * When `true`, switches the theme to the app's original colorScheme\n   * (stored in TopNavContext) instead of TopNav's default dark theme.\n   *\n   * Used by SearchInput to toggle between dark (unfocused) and the\n   * original app theme (focused) while inside TopNav.\n   *\n   * @default false — stays in dark theme (TopNav's default)\n   */\n  shouldOverrideTheme?: boolean;\n};\n\n/**\n * Wraps children with the correct theme when rendered inside TopNav.\n *\n * TopNav forces a dark theme, but overlay/child components should render\n * in the app's original colorScheme. This wrapper centralises that logic.\n *\n * - Without `shouldOverrideTheme` (default): wraps with BladeProvider using\n *   the app's original colorScheme (for portalled overlays like Popover, Menu).\n * - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.\n * - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme\n *   via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).\n *\n * Outside TopNav this is a no-op passthrough.\n */\nconst TopNavOverlayThemeOverride = ({\n  children,\n  shouldOverrideTheme,\n}: TopNavOverlayThemeOverrideProps): React.ReactElement => {\n  const topNavContext = useTopNavContext();\n  const { platform, themeTokens } = useTheme();\n\n  const isPrimaryVariant = topNavContext?.variant === 'primary';\n  const isDark = getIsDark({ isPrimaryVariant, shouldOverrideTheme, topNavContext });\n  const overrideTheme: Theme = React.useMemo(\n    () => ({\n      ...themeTokens,\n      colors: isDark ? themeTokens.colors.onDark : themeTokens.colors.onLight,\n      elevation: isDark ? themeTokens.elevation.onDark : themeTokens.elevation.onLight,\n      typography: themeTokens.typography[platform],\n    }),\n    [isDark, platform, themeTokens],\n  );\n\n  if (!topNavContext) {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{children}</>;\n  }\n\n  if (shouldOverrideTheme !== undefined) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const noop = (): void => {};\n\n    return (\n      <ThemeContext.Provider\n        value={{\n          theme: overrideTheme,\n          themeTokens,\n          colorScheme: getOverrideColorScheme({\n            isPrimaryVariant,\n            shouldOverrideTheme,\n            topNavContext,\n          }),\n          setColorScheme: noop,\n          platform,\n        }}\n      >\n        <StyledThemeProvider theme={overrideTheme}>{children}</StyledThemeProvider>\n      </ThemeContext.Provider>\n    );\n  }\n\n  return (\n    <BladeProvider\n      themeTokens={themeTokens}\n      colorScheme={isPrimaryVariant ? 'light' : topNavContext.colorScheme}\n    >\n      {children}\n    </BladeProvider>\n  );\n};\n\nexport { TopNavOverlayThemeOverride };\n"],"names":["getOverrideColorScheme","_ref","_topNavContext$colorS","isPrimaryVariant","shouldOverrideTheme","topNavContext","colorScheme","getIsDark","_ref2","TopNavOverlayThemeOverride","_ref3","children","useTopNavContext","_useTheme","useTheme","platform","themeTokens","variant","isDark","overrideTheme","React","useMemo","_objectSpread","colors","onDark","onLight","elevation","typography","_jsx","_Fragment","undefined","noop","ThemeContext","Provider","value","theme","setColorScheme","StyledThemeProvider","BladeProvider"],"mappings":"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"}