@razorpay/blade 12.67.0 → 12.89.0

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

@@ -0,0 +1,192 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import styled from 'styled-components';
+import '../../../utils/index.js';
+import '../../../tokens/global/index.js';
+import '../../../utils/metaAttribute/index.js';
+import '../../BladeProvider/index.js';
+import { useResize } from '../../../utils/useResize.js';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
+import '../../Box/BaseBox/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
+import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
+import { size } from '../../../tokens/global/size.js';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { castWebType } from '../../../utils/platform/castUtils.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.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 StyledIndicatorWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TabNavIndicatorweb__StyledIndicatorWrapper",
+  componentId: "lqpaj2-0"
+})({
+  pointerEvents: 'none',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  willChange: 'transform, width, opacity'
+});
+var StyledTabNavIndicatorLine = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TabNavIndicatorweb__StyledTabNavIndicatorLine",
+  componentId: "lqpaj2-1"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: 'relative',
+    width: '100%',
+    height: makeSpace(theme.border.width.thin),
+    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
+    borderTopRightRadius: makeBorderSize(theme.border.radius.medium)
+  };
+});
+var GLOW_OVERFLOW = 32;
+var GLOW_HEIGHT = size[56];
+var buildGlowMask = function buildGlowMask(width) {
+  var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GLOW_HEIGHT;
+  var cx = width / 2;
+  var rx = width * 0.37;
+  return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(width, "' height='").concat(height, "'%3E%3Cdefs%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='0' y='0' width='").concat(width, "' height='").concat(height, "'%3E%3CfeGaussianBlur stdDeviation='40'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='").concat(cx, "' cy='").concat(height, "' rx='").concat(rx, "' ry='60' fill='black' filter='url(%23b)'/%3E%3C/svg%3E\")");
+};
+var StyledIndicatorGlow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TabNavIndicatorweb__StyledIndicatorGlow",
+  componentId: "lqpaj2-2"
+})(function (_ref2) {
+  var glowColor = _ref2.glowColor,
+    glowWidth = _ref2.glowWidth,
+    glowMask = _ref2.glowMask;
+  var totalWidth = glowWidth + GLOW_OVERFLOW * 2;
+  return {
+    position: 'absolute',
+    bottom: 0,
+    left: "".concat(-GLOW_OVERFLOW, "px"),
+    width: "".concat(totalWidth, "px"),
+    height: "".concat(GLOW_HEIGHT, "px"),
+    // Tuned visually to blend the glow into the dark TopNav background without overpowering the indicator line
+    opacity: 0.8,
+    background: "radial-gradient(50% 100% at 50% 100%, ".concat(glowColor, " 0%, transparent 100%)"),
+    WebkitMaskImage: glowMask,
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskPosition: 'center bottom',
+    WebkitMaskSize: '100% 100%',
+    maskImage: glowMask,
+    maskRepeat: 'no-repeat',
+    maskPosition: 'center bottom',
+    maskSize: '100% 100%'
+  };
+});
+var ACTIVE_ITEM_SELECTOR = '[data-blade-component="tab-nav-item"][data-active="true"]';
+var TabNavIndicator = function TabNavIndicator(_ref3) {
+  var containerRef = _ref3.containerRef;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var wrapperRef = React__default.useRef(null);
+  var shouldAnimateRef = React__default.useRef(false);
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeWidth = _React$useState2[0],
+    setActiveWidth = _React$useState2[1];
+  var _React$useState3 = React__default.useState(theme.colors.surface.background.primary.intense),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    glowColor = _React$useState4[0],
+    setGlowColor = _React$useState4[1];
+  var glowMask = React__default.useMemo(function () {
+    return buildGlowMask(activeWidth + GLOW_OVERFLOW * 2);
+  }, [activeWidth]);
+  var updatePosition = React__default.useCallback(function () {
+    var _activeItem$dataset$g;
+    var container = containerRef.current;
+    var wrapper = wrapperRef.current;
+    if (!container || !wrapper) return;
+    var activeItem = container.querySelector(ACTIVE_ITEM_SELECTOR);
+    if (!activeItem || activeItem.offsetWidth === 0) {
+      wrapper.style.opacity = '0';
+      return;
+    }
+    var containerRect = container.getBoundingClientRect();
+    var activeRect = activeItem.getBoundingClientRect();
+    var x = activeRect.left - containerRect.left;
+    var duration = shouldAnimateRef.current ? makeMotionTime(theme.motion.duration.gentle) : '0ms';
+    wrapper.style.transitionDuration = castWebType(duration);
+    wrapper.style.width = "".concat(activeRect.width, "px");
+    wrapper.style.transform = "translateX(".concat(x, "px)");
+    wrapper.style.opacity = '1';
+    setActiveWidth(activeRect.width);
+    setGlowColor((_activeItem$dataset$g = activeItem.dataset.glowColor) !== null && _activeItem$dataset$g !== void 0 ? _activeItem$dataset$g : theme.colors.surface.background.primary.intense);
+    if (!shouldAnimateRef.current) {
+      requestAnimationFrame(function () {
+        shouldAnimateRef.current = true;
+      });
+    }
+  }, [containerRef, theme.motion.duration.gentle, theme.colors.surface.background.primary.intense]);
+  useIsomorphicLayoutEffect(function () {
+    void updatePosition();
+  }, [updatePosition]);
+
+  // Watch for data-active attribute changes AND child additions/removals so the
+  // indicator moves when: (a) active tab changes via router, (b) an item moves
+  // into/out of the "More" overflow (the More button is added to the DOM with
+  // data-active already set, so a pure attribute observer would miss it).
+  React__default.useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var rafId;
+    var observer = new MutationObserver(function () {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(function () {
+        void updatePosition();
+      });
+    });
+    observer.observe(container, {
+      attributes: true,
+      attributeFilter: ['data-active'],
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [containerRef, updatePosition]);
+  React__default.useEffect(function () {
+    if ('fonts' in document) {
+      try {
+        void document.fonts.ready.then(function () {
+          updatePosition();
+        });
+      } catch (_unused) {
+        /* empty */
+      }
+    }
+  }, [updatePosition]);
+  useResize(containerRef, updatePosition);
+  return /*#__PURE__*/jsxs(StyledIndicatorWrapper, _objectSpread(_objectSpread({
+    ref: wrapperRef,
+    style: {
+      transitionProperty: 'transform, width, opacity',
+      transitionTimingFunction: castWebType(theme.motion.easing.standard),
+      transitionDuration: '0ms',
+      opacity: 0
+    }
+  }, metaAttribute({
+    name: MetaConstants.TabNavIndicator
+  })), {}, {
+    children: [activeWidth > 0 && /*#__PURE__*/jsx(StyledIndicatorGlow, {
+      glowColor: glowColor,
+      glowWidth: activeWidth,
+      glowMask: glowMask
+    }), /*#__PURE__*/jsx(StyledTabNavIndicatorLine, {
+      style: {
+        background: "linear-gradient(90deg, transparent 0%, ".concat(theme.colors.surface.icon.staticWhite.normal, " 20%, ").concat(theme.colors.surface.icon.staticWhite.normal, " 80.29%, transparent 100%)")
+      }
+    })]
+  }));
+};
+
+export { TabNavIndicator };
+//# sourceMappingURL=TabNavIndicator.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavIndicator.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavIndicator.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable consistent-return */\n// inspired from Tabs/TabIndicator.web.tsx\nimport React from 'react';\nimport styled from 'styled-components';\nimport { castWebType, makeBorderSize, makeMotionTime, makeSpace } from '~utils';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useTheme } from '~components/BladeProvider';\nimport { useResize } from '~utils/useResize';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst StyledIndicatorWrapper = styled.div({\n  pointerEvents: 'none',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  willChange: 'transform, width, opacity',\n});\n\nconst StyledTabNavIndicatorLine = styled(BaseBox)(({ theme }) => {\n  return {\n    position: 'relative',\n    width: '100%',\n    height: makeSpace(theme.border.width.thin),\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n  };\n});\n\nconst GLOW_OVERFLOW = 32;\nconst GLOW_HEIGHT = size[56];\n\nconst buildGlowMask = (width: number, height: number = GLOW_HEIGHT): string => {\n  const cx = width / 2;\n  const rx = width * 0.37;\n  return `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}'%3E%3Cdefs%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='0' y='0' width='${width}' height='${height}'%3E%3CfeGaussianBlur stdDeviation='40'/%3E%3C/filter%3E%3C/defs%3E%3Cellipse cx='${cx}' cy='${height}' rx='${rx}' ry='60' fill='black' filter='url(%23b)'/%3E%3C/svg%3E\")`;\n};\n\nconst StyledIndicatorGlow = styled.div<{\n  glowColor: string;\n  glowWidth: number;\n  glowMask: string;\n}>(({ glowColor, glowWidth, glowMask }) => {\n  const totalWidth = glowWidth + GLOW_OVERFLOW * 2;\n  return {\n    position: 'absolute',\n    bottom: 0,\n    left: `${-GLOW_OVERFLOW}px`,\n    width: `${totalWidth}px`,\n    height: `${GLOW_HEIGHT}px`,\n    // Tuned visually to blend the glow into the dark TopNav background without overpowering the indicator line\n    opacity: 0.8,\n    background: `radial-gradient(50% 100% at 50% 100%, ${glowColor} 0%, transparent 100%)`,\n    WebkitMaskImage: glowMask,\n    WebkitMaskRepeat: 'no-repeat',\n    WebkitMaskPosition: 'center bottom',\n    WebkitMaskSize: '100% 100%',\n    maskImage: glowMask,\n    maskRepeat: 'no-repeat',\n    maskPosition: 'center bottom',\n    maskSize: '100% 100%',\n  };\n});\n\nconst ACTIVE_ITEM_SELECTOR = '[data-blade-component=\"tab-nav-item\"][data-active=\"true\"]';\n\nconst TabNavIndicator = ({\n  containerRef,\n}: {\n  containerRef: React.RefObject<HTMLElement | null>;\n}): React.ReactElement => {\n  const { theme } = useTheme();\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n  const shouldAnimateRef = React.useRef(false);\n  const [activeWidth, setActiveWidth] = React.useState(0);\n  const [glowColor, setGlowColor] = React.useState(theme.colors.surface.background.primary.intense);\n\n  const glowMask = React.useMemo(() => buildGlowMask(activeWidth + GLOW_OVERFLOW * 2), [\n    activeWidth,\n  ]);\n\n  const updatePosition = React.useCallback(() => {\n    const container = containerRef.current;\n    const wrapper = wrapperRef.current;\n    if (!container || !wrapper) return;\n\n    const activeItem = container.querySelector<HTMLElement>(ACTIVE_ITEM_SELECTOR);\n\n    if (!activeItem || activeItem.offsetWidth === 0) {\n      wrapper.style.opacity = '0';\n      return;\n    }\n\n    const containerRect = container.getBoundingClientRect();\n    const activeRect = activeItem.getBoundingClientRect();\n    const x = activeRect.left - containerRect.left;\n\n    const duration = shouldAnimateRef.current\n      ? makeMotionTime(theme.motion.duration.gentle)\n      : '0ms';\n\n    wrapper.style.transitionDuration = castWebType(duration);\n    wrapper.style.width = `${activeRect.width}px`;\n    wrapper.style.transform = `translateX(${x}px)`;\n    wrapper.style.opacity = '1';\n\n    setActiveWidth(activeRect.width);\n    setGlowColor(activeItem.dataset.glowColor ?? theme.colors.surface.background.primary.intense);\n\n    if (!shouldAnimateRef.current) {\n      requestAnimationFrame(() => {\n        shouldAnimateRef.current = true;\n      });\n    }\n  }, [containerRef, theme.motion.duration.gentle, theme.colors.surface.background.primary.intense]);\n\n  useIsomorphicLayoutEffect(() => {\n    void updatePosition();\n  }, [updatePosition]);\n\n  // Watch for data-active attribute changes AND child additions/removals so the\n  // indicator moves when: (a) active tab changes via router, (b) an item moves\n  // into/out of the \"More\" overflow (the More button is added to the DOM with\n  // data-active already set, so a pure attribute observer would miss it).\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    let rafId: number;\n    const observer = new MutationObserver(() => {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(() => {\n        void updatePosition();\n      });\n    });\n\n    observer.observe(container, {\n      attributes: true,\n      attributeFilter: ['data-active'],\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      observer.disconnect();\n    };\n  }, [containerRef, updatePosition]);\n\n  React.useEffect(() => {\n    if ('fonts' in document) {\n      try {\n        void document.fonts.ready.then(() => {\n          updatePosition();\n        });\n      } catch {\n        /* empty */\n      }\n    }\n  }, [updatePosition]);\n\n  useResize(containerRef, updatePosition);\n\n  return (\n    <StyledIndicatorWrapper\n      ref={wrapperRef}\n      style={{\n        transitionProperty: 'transform, width, opacity',\n        transitionTimingFunction: castWebType(theme.motion.easing.standard),\n        transitionDuration: '0ms',\n        opacity: 0,\n      }}\n      {...metaAttribute({ name: MetaConstants.TabNavIndicator })}\n    >\n      {activeWidth > 0 && (\n        <StyledIndicatorGlow glowColor={glowColor} glowWidth={activeWidth} glowMask={glowMask} />\n      )}\n      <StyledTabNavIndicatorLine\n        style={{\n          background: `linear-gradient(90deg, transparent 0%, ${theme.colors.surface.icon.staticWhite.normal} 20%, ${theme.colors.surface.icon.staticWhite.normal} 80.29%, transparent 100%)`,\n        }}\n      />\n    </StyledIndicatorWrapper>\n  );\n};\n\nexport { TabNavIndicator };\n"],"names":["StyledIndicatorWrapper","styled","div","withConfig","displayName","componentId","pointerEvents","position","bottom","left","willChange","StyledTabNavIndicatorLine","BaseBox","_ref","theme","width","height","makeSpace","border","thin","borderTopLeftRadius","makeBorderSize","radius","medium","borderTopRightRadius","GLOW_OVERFLOW","GLOW_HEIGHT","size","buildGlowMask","arguments","length","undefined","cx","rx","concat","StyledIndicatorGlow","_ref2","glowColor","glowWidth","glowMask","totalWidth","opacity","background","WebkitMaskImage","WebkitMaskRepeat","WebkitMaskPosition","WebkitMaskSize","maskImage","maskRepeat","maskPosition","maskSize","ACTIVE_ITEM_SELECTOR","TabNavIndicator","_ref3","containerRef","_useTheme","useTheme","wrapperRef","React","useRef","shouldAnimateRef","_React$useState","useState","_React$useState2","_slicedToArray","activeWidth","setActiveWidth","_React$useState3","colors","surface","primary","intense","_React$useState4","setGlowColor","useMemo","updatePosition","useCallback","_activeItem$dataset$g","container","current","wrapper","activeItem","querySelector","offsetWidth","style","containerRect","getBoundingClientRect","activeRect","x","duration","makeMotionTime","motion","gentle","transitionDuration","castWebType","transform","dataset","requestAnimationFrame","useIsomorphicLayoutEffect","useEffect","rafId","observer","MutationObserver","cancelAnimationFrame","observe","attributes","attributeFilter","childList","subtree","disconnect","document","fonts","ready","then","_unused","useResize","_jsxs","_objectSpread","ref","transitionProperty","transitionTimingFunction","easing","standard","metaAttribute","name","MetaConstants","children","_jsx","icon","staticWhite","normal"],"mappings":"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"}

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

@@ -1,24 +1,29 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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 { useTabNavContext } from './TabNavContext.js';
-import { MIXED_BG_COLOR } from './utils.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 '../../../tokens/global/index.js';
 import '../../../utils/metaAttribute/index.js';
 import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../utils/getFocusRingStyles/index.js';
+import '../../BladeProvider/index.js';
+import '../../Icons/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import RayIcon from '../../Icons/RayIcon/RayIcon.js';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
-import { size } from '../../../tokens/global/size.js';
+import { opacity } from '../../../tokens/global/opacity.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import useTheme from '../../BladeProvider/useTheme.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
@@ -27,6 +32,14 @@ import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffect
 var _excluded = ["as", "title", "isActive", "icon", "trailing", "accessibilityLabel", "href", "target", "__isInsideTabNavItems", "__index"];
 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 isIconObjectProp = function isIconObjectProp(icon) {
+  return _typeof(icon) === 'object' && icon !== null && 'default' in icon;
+};
+var isRayIcon = function isRayIcon(icon) {
+  if (!icon) return false;
+  var defaultIcon = isIconObjectProp(icon) ? icon["default"] : icon;
+  return defaultIcon === RayIcon;
+};
 var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
   displayName: "TabNavItemweb__StyledTabNavItem",
   componentId: "sc-1eiaez7-0"
@@ -36,8 +49,8 @@ var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
   return _objectSpread(_objectSpread({}, getTextStyles({
     theme: theme,
     size: 'medium',
-    weight: 'medium',
-    color: $isActive ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle'
+    weight: $isActive ? 'semibold' : 'medium',
+    color: $isActive ? 'surface.text.staticWhite.normal' : 'surface.text.staticWhite.subtle'
   })), {}, {
     flex: 1,
     display: 'flex',
@@ -55,11 +68,27 @@ var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
     // reset button styles
     border: 'none',
     background: 'none',
-    '&[aria-expanded="true"]': $isActive ? {} : {
-      backgroundColor: theme.colors.interactive.background.gray["default"]
-    },
+    opacity: $isActive ? 1 : opacity[1000],
+    transition: "opacity ".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
+    '&[aria-expanded="true"]': $isActive ? {} : {},
     '&:hover': $isActive ? {} : {
-      backgroundColor: theme.colors.interactive.background.gray["default"]
+      opacity: 1,
+      color: theme.colors.interactive.text.staticWhite.normal
+    },
+    '&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })), {}, {
+      opacity: 1,
+      color: theme.colors.interactive.text.staticWhite.normal
+    }),
+    '&:active': {
+      opacity: 1
+    },
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      zIndex: 1 // ensures it sits above the wrapper
     }
   });
 });
@@ -69,77 +98,37 @@ var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme,
     isActive = _ref2.isActive;
-  var dividerHiderStyle = {
-    content: '""',
-    position: 'absolute',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    width: makeSize(size[1]),
-    height: makeSize(size[16]),
-    backgroundColor: MIXED_BG_COLOR
-  };
-  return _objectSpread({
+  return {
     position: 'relative',
     flexShrink: 0,
     padding: "".concat(makeSpace(theme.spacing[2]), " ").concat(makeSpace(theme.spacing[1])),
-    backgroundColor: isActive ? theme.colors.surface.background.gray.moderate : 'transparent',
+    backgroundColor: 'transparent',
     borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',
-    borderStyle: 'solid',
-    borderWidth: makeBorderSize(theme.border.width.thin),
-    borderBottomWidth: 0,
-    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
-    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
-    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
-    transitionProperty: 'background'
-  }, isActive ? {
-    ':before, :after': dividerHiderStyle,
-    ':before': {
-      left: -2
-    },
-    ':after': {
-      right: -2
-    }
-  } : {});
-});
-var SelectedBar = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "TabNavItemweb__SelectedBar",
-  componentId: "sc-1eiaez7-2"
-})(function (_ref3) {
-  var theme = _ref3.theme,
-    isActive = _ref3.isActive;
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: makeSpace(theme.spacing[1]),
     borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
     borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
-    backgroundColor: theme.colors.interactive.icon.gray.normal,
-    pointerEvents: 'none',
-    // Animation
-    opacity: isActive ? 1 : 0,
     transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
-    transitionProperty: 'opacity'
+    transitionProperty: 'background',
+    zIndex: 1,
+    cursor: 'pointer'
   };
 });
-var _TabNavItem = function _TabNavItem(_ref4, ref) {
-  var as = _ref4.as,
-    title = _ref4.title,
-    isActive = _ref4.isActive,
-    Icon = _ref4.icon,
-    trailing = _ref4.trailing,
-    accessibilityLabel = _ref4.accessibilityLabel,
-    href = _ref4.href,
-    target = _ref4.target,
-    __isInsideTabNavItems = _ref4.__isInsideTabNavItems,
-    __index = _ref4.__index,
-    props = _objectWithoutProperties(_ref4, _excluded);
+var _TabNavItem = function _TabNavItem(_ref3, ref) {
+  var as = _ref3.as,
+    title = _ref3.title,
+    isActive = _ref3.isActive,
+    icon = _ref3.icon,
+    trailing = _ref3.trailing,
+    accessibilityLabel = _ref3.accessibilityLabel,
+    href = _ref3.href,
+    target = _ref3.target,
+    __isInsideTabNavItems = _ref3.__isInsideTabNavItems,
+    __index = _ref3.__index,
+    props = _objectWithoutProperties(_ref3, _excluded);
   var _useTabNavContext = useTabNavContext(),
     setControlledItems = _useTabNavContext.setControlledItems;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
   var bodyRef = React__default.useRef(null);
-
-  // Update the controlledItems with the tabWidth and offsetX
   useIsomorphicLayoutEffect(function () {
     if (!bodyRef.current) return;
     if (!__isInsideTabNavItems) return;
@@ -157,15 +146,24 @@ var _TabNavItem = function _TabNavItem(_ref4, ref) {
       });
     });
   }, [__isInsideTabNavItems, __index, setControlledItems]);
-  return /*#__PURE__*/jsxs(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
+  var ResolvedIcon;
+  if (icon) {
+    if (isIconObjectProp(icon)) {
+      ResolvedIcon = isActive ? icon.selected : icon["default"];
+    } else {
+      ResolvedIcon = icon;
+    }
+  }
+  var glowColor = isRayIcon(icon) ? theme.colors.surface.icon.onSea.onSubtle : theme.colors.surface.background.primary.intense;
+  return /*#__PURE__*/jsx(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
     ref: bodyRef,
-    isActive: isActive
+    isActive: isActive,
+    "data-active": isActive ? 'true' : 'false',
+    "data-glow-color": glowColor
   }, metaAttribute({
     name: MetaConstants.TabNavItem
   })), {}, {
-    children: [/*#__PURE__*/jsx(SelectedBar, {
-      isActive: isActive
-    }), /*#__PURE__*/jsxs(StyledTabNavItem, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsxs(StyledTabNavItem, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
       ref: ref,
       as: as !== null && as !== void 0 ? as : href ? 'a' : 'button',
       to: href,
@@ -178,11 +176,11 @@ var _TabNavItem = function _TabNavItem(_ref4, ref) {
       label: accessibilityLabel,
       current: isActive
     })), {}, {
-      children: [Icon ? /*#__PURE__*/jsx(Icon, {
-        size: "large",
-        color: isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'
+      children: [ResolvedIcon ? /*#__PURE__*/jsx(ResolvedIcon, {
+        size: "medium",
+        color: isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle'
       }) : null, title, trailing ? trailing : null]
-    }))]
+    }))
   }));
 };
 var TabNavItem = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_TabNavItem), {

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 } from './types';\nimport { useTabNavContext } from './TabNavContext';\nimport { MIXED_BG_COLOR } from './utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { size } from '~tokens/global';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\nconst StyledTabNavItem = styled.a<{ $isActive?: boolean }>(({ theme, $isActive }) => {\n  return {\n    ...getTextStyles({\n      theme,\n      size: 'medium',\n      weight: 'medium',\n      color: $isActive ? 'interactive.text.gray.normal' : 'interactive.text.gray.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    '&[aria-expanded=\"true\"]': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n    '&:hover': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n}>(({ theme, isActive }) => {\n  const dividerHiderStyle = {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: makeSize(size[1]),\n    height: makeSize(size[16]),\n    backgroundColor: MIXED_BG_COLOR,\n  } as const;\n\n  return {\n    position: 'relative',\n    flexShrink: 0,\n    padding: `${makeSpace(theme.spacing[2])} ${makeSpace(theme.spacing[1])}`,\n    backgroundColor: isActive ? theme.colors.surface.background.gray.moderate : 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderStyle: 'solid',\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderBottomWidth: 0,\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\n    // Hide the left and right divider by overlaying them with a pseudo element as same color as the background\n    ...(isActive\n      ? {\n          ':before, :after': dividerHiderStyle,\n          ':before': {\n            left: -2,\n          },\n          ':after': {\n            right: -2,\n          },\n        }\n      : {}),\n  };\n});\n\nconst SelectedBar = styled(BaseBox)<{ isActive?: boolean }>(({ theme, isActive }) => {\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: makeSpace(theme.spacing[1]),\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    backgroundColor: theme.colors.interactive.icon.gray.normal,\n    pointerEvents: 'none',\n    // Animation\n    opacity: isActive ? 1 : 0,\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${theme.motion.easing.standard}`,\n    transitionProperty: 'opacity',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  {\n    as,\n    title,\n    isActive,\n    icon: Icon,\n    trailing,\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 bodyRef = React.useRef<HTMLDivElement>(null);\n\n  // Update the controlledItems with the tabWidth and offsetX\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  return (\n    <StyledTabNavItemWrapper\n      ref={bodyRef}\n      isActive={isActive}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <SelectedBar isActive={isActive} />\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        {Icon ? (\n          <Icon\n            size=\"large\"\n            color={isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'}\n          />\n        ) : null}\n        {title}\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":["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","backgroundColor","colors","interactive","gray","StyledTabNavItemWrapper","BaseBox","_ref2","isActive","dividerHiderStyle","content","position","top","transform","width","makeSize","MIXED_BG_COLOR","flexShrink","padding","concat","surface","moderate","borderColor","muted","borderStyle","borderWidth","thin","borderBottomWidth","borderTopLeftRadius","borderTopRightRadius","transition","makeMotionTime","motion","duration","easing","standard","transitionProperty","left","right","SelectedBar","_ref3","icon","normal","pointerEvents","opacity","_TabNavItem","_ref4","ref","as","title","Icon","trailing","accessibilityLabel","href","target","__isInsideTabNavItems","__index","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","setControlledItems","bodyRef","React","useRef","useIsomorphicLayoutEffect","current","prev","map","item","index","_bodyRef$current","bounds","getBoundingClientRect","tabWidth","offsetX","_jsxs","metaAttribute","name","MetaConstants","TabNavItem","children","_jsx","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 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    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        {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","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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"}