@razorpay/blade 11.22.0 → 11.23.0

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

@@ -0,0 +1,198 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useTopNavContext } from '../TopNavContext.js';
+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 '../../../utils/assignWithoutSideEffects/index.js';
+import '../../../utils/makeAccessible/index.js';
+import '../../../tokens/global/index.js';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
+import { mergeRefs } from '../../../utils/useMergeRefs.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import '../../../utils/metaAttribute/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
+import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["as", "children", "isActive", "icon", "trailing", "accessibilityLabel", "href", "target"];
+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 StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
+  displayName: "TabNavItemweb__StyledTabNavItem",
+  componentId: "sc-1eiaez7-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    $isActive = _ref.$isActive;
+  return _objectSpread(_objectSpread({}, getTextStyles({
+    theme: theme,
+    size: 'medium',
+    weight: 'medium',
+    color: $isActive ? 'interactive.text.gray.normal' : 'interactive.text.gray.subtle'
+  })), {}, {
+    flex: 1,
+    display: 'flex',
+    gap: makeSpace(theme.spacing[2]),
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    textDecoration: 'none',
+    whiteSpace: 'nowrap',
+    paddingTop: makeSpace(theme.spacing[3]),
+    paddingBottom: makeSpace(theme.spacing[3]),
+    paddingLeft: makeSpace(theme.spacing[4]),
+    paddingRight: makeSpace(theme.spacing[4]),
+    borderRadius: makeBorderSize(theme.border.radius.medium),
+    '&:hover': $isActive ? {} : {
+      backgroundColor: theme.colors.interactive.background.gray["default"]
+    }
+  });
+});
+var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TabNavItemweb__StyledTabNavItemWrapper",
+  componentId: "sc-1eiaez7-1"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    isActive = _ref2.isActive,
+    dividerHiderColor = _ref2.dividerHiderColor;
+  var dividerHiderStyle = {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: makeSize(size[1]),
+    height: '50%',
+    backgroundColor: getIn(theme.colors, dividerHiderColor, MIXED_BG_COLOR)
+  };
+  return _objectSpread({
+    position: 'relative',
+    flexShrink: 0,
+    padding: "".concat(makeSpace(theme.spacing[2]), " ").concat(makeSpace(theme.spacing[1])),
+    backgroundColor: isActive ? theme.colors.surface.background.gray.intense : 'transparent',
+    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',
+    borderStyle: 'solid',
+    borderBottomWidth: 0,
+    borderWidth: makeBorderSize(theme.border.width.thin),
+    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
+    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
+    // Animation
+    transform: isActive ? "translateY(".concat(makeSize(size[2]), ")") : 'none',
+    transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard.effective),
+    transitionProperty: 'background, transform'
+  }, 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.effective),
+    transitionProperty: 'opacity'
+  };
+});
+var _TabNavItem = function _TabNavItem(_ref4, ref) {
+  var as = _ref4.as,
+    children = _ref4.children,
+    isActive = _ref4.isActive,
+    Icon = _ref4.icon,
+    trailing = _ref4.trailing,
+    accessibilityLabel = _ref4.accessibilityLabel,
+    href = _ref4.href,
+    target = _ref4.target,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  var _useTabNavContext = useTabNavContext(),
+    containerRef = _useTabNavContext.containerRef,
+    hasOverflow = _useTabNavContext.hasOverflow;
+  var _useTopNavContext = useTopNavContext(),
+    backgroundColor = _useTopNavContext.backgroundColor;
+  var linkRef = React__default.useRef(null);
+
+  // Scroll the active tab into view
+  // Only if the tab is very close to the edge
+  // Or if the tab is out of view
+  useIsomorphicLayoutEffect(function () {
+    if (!isActive || !hasOverflow) return;
+    if (!('requestAnimationFrame' in window)) return;
+    window.requestAnimationFrame(function () {
+      if (!linkRef.current || !containerRef.current) return;
+      var buffer = 100;
+      var container = containerRef.current;
+      var linkElement = linkRef.current;
+      var containerRect = container.getBoundingClientRect();
+      var linkRect = linkElement.getBoundingClientRect();
+      var isCloseToStart = linkRect.left < containerRect.left + buffer;
+      var isCloseToEnd = linkRect.right > containerRect.right - buffer;
+      if (isCloseToStart || isCloseToEnd) {
+        linkElement.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          block: 'nearest'
+        });
+      }
+    });
+  }, [hasOverflow, isActive]);
+  return /*#__PURE__*/jsxs(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
+    isActive: isActive,
+    dividerHiderColor: backgroundColor
+  }, metaAttribute({
+    name: MetaConstants.TabNavItem
+  })), {}, {
+    children: [/*#__PURE__*/jsx(SelectedBar, {
+      isActive: isActive
+    }), /*#__PURE__*/jsxs(StyledTabNavItem, _objectSpread(_objectSpread(_objectSpread({
+      ref: mergeRefs(ref, linkRef),
+      as: as !== null && as !== void 0 ? as : 'a',
+      to: href,
+      href: as ? undefined : href,
+      target: target,
+      $isActive: isActive
+    }, props), makeAccessible({
+      label: accessibilityLabel,
+      current: isActive
+    })), {}, {
+      children: [Icon ? /*#__PURE__*/jsx(Icon, {
+        size: "large",
+        color: isActive ? 'interactive.icon.gray.normal' : 'surface.icon.gray.subtle'
+      }) : null, children, trailing ? trailing : null]
+    }))]
+  }));
+};
+var TabNavItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_TabNavItem), {
+  displayName: 'TabNavItem'
+});
+
+export { TabNavItem };
+//# sourceMappingURL=TabNavItem.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavItem.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavItem.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTopNavContext } from '../TopNavContext';\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 { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { mergeRefs } from '~utils/useMergeRefs';\nimport type { BoxProps } from '~components/Box';\nimport getIn from '~utils/lodashButBetter/get';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\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    '&:hover': $isActive\n      ? {}\n      : {\n          backgroundColor: theme.colors.interactive.background.gray.default,\n        },\n  };\n});\n\nconst StyledTabNavItemWrapper = styled(BaseBox)<{\n  isActive?: boolean;\n  dividerHiderColor: BoxProps['backgroundColor'];\n}>(({ theme, isActive, dividerHiderColor }) => {\n  const dividerHiderStyle = {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: makeSize(size[1]),\n    height: '50%',\n    backgroundColor: getIn(theme.colors, dividerHiderColor as never, 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.intense : 'transparent',\n    borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',\n    borderStyle: 'solid',\n    borderBottomWidth: 0,\n    borderWidth: makeBorderSize(theme.border.width.thin),\n    borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),\n    borderTopRightRadius: makeBorderSize(theme.border.radius.medium),\n    // Animation\n    transform: isActive ? `translateY(${makeSize(size[2])})` : 'none',\n    transition: `${makeMotionTime(theme.motion.duration.moderate)} ${\n      theme.motion.easing.standard.effective\n    }`,\n    transitionProperty: 'background, transform',\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)} ${\n      theme.motion.easing.standard.effective\n    }`,\n    transitionProperty: 'opacity',\n  };\n});\n\nconst _TabNavItem: React.ForwardRefRenderFunction<HTMLAnchorElement, TabNavItemProps> = (\n  { as, children, isActive, icon: Icon, trailing, accessibilityLabel, href, target, ...props },\n  ref,\n): React.ReactElement => {\n  const { containerRef, hasOverflow } = useTabNavContext();\n  const { backgroundColor } = useTopNavContext();\n  const linkRef = React.useRef<HTMLAnchorElement>(null);\n\n  // Scroll the active tab into view\n  // Only if the tab is very close to the edge\n  // Or if the tab is out of view\n  useIsomorphicLayoutEffect(() => {\n    if (!isActive || !hasOverflow) return;\n    if (!('requestAnimationFrame' in window)) return;\n\n    window.requestAnimationFrame(() => {\n      if (!linkRef.current || !containerRef.current) return;\n\n      const buffer = 100;\n      const container = containerRef.current;\n      const linkElement = linkRef.current;\n      const containerRect = container.getBoundingClientRect();\n      const linkRect = linkElement.getBoundingClientRect();\n      const isCloseToStart = linkRect.left < containerRect.left + buffer;\n      const isCloseToEnd = linkRect.right > containerRect.right - buffer;\n\n      if (isCloseToStart || isCloseToEnd) {\n        linkElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n      }\n    });\n  }, [hasOverflow, isActive]);\n\n  return (\n    <StyledTabNavItemWrapper\n      isActive={isActive}\n      dividerHiderColor={backgroundColor}\n      {...metaAttribute({ name: MetaConstants.TabNavItem })}\n    >\n      <SelectedBar isActive={isActive} />\n      <StyledTabNavItem\n        ref={mergeRefs(ref, linkRef)}\n        as={as ?? 'a'}\n        to={href}\n        href={as ? undefined : href}\n        target={target}\n        $isActive={isActive}\n        {...props}\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        {children}\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","backgroundColor","colors","interactive","background","gray","StyledTabNavItemWrapper","BaseBox","_ref2","isActive","dividerHiderColor","dividerHiderStyle","content","position","top","transform","width","makeSize","getIn","MIXED_BG_COLOR","flexShrink","padding","concat","surface","intense","borderColor","muted","borderStyle","borderBottomWidth","borderWidth","thin","borderTopLeftRadius","borderTopRightRadius","transition","makeMotionTime","motion","duration","moderate","easing","standard","effective","transitionProperty","left","right","SelectedBar","_ref3","icon","normal","pointerEvents","opacity","_TabNavItem","_ref4","ref","as","children","Icon","trailing","accessibilityLabel","href","target","props","_objectWithoutProperties","_excluded","_useTabNavContext","useTabNavContext","containerRef","hasOverflow","_useTopNavContext","useTopNavContext","linkRef","React","useRef","useIsomorphicLayoutEffect","window","requestAnimationFrame","current","buffer","container","linkElement","containerRect","getBoundingClientRect","linkRect","isCloseToStart","isCloseToEnd","scrollIntoView","behavior","inline","block","_jsxs","metaAttribute","name","MetaConstants","TabNavItem","_jsx","mergeRefs","to","undefined","makeAccessible","label","assignWithoutSideEffects","forwardRef"],"mappings":"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"}

package/build/lib/web/production/components/TopNav/TabNav/index.js

@@ -0,0 +1,4 @@
+export { TabNav } from './TabNav.web.js';
+export { TabNavItem } from './TabNavItem.web.js';
+import './types.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/TopNav/TabNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/build/lib/web/production/components/TopNav/TabNav/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/lib/web/production/components/TopNav/TabNav/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/TopNav/TabNav/utils.js

@@ -0,0 +1,48 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
+
+/**
+ * Check if an element has scroll overflow
+ */
+var useHasOverflow = function useHasOverflow(ref, callback) {
+  var observer = React__default.useRef(null);
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    hasOverflow = _React$useState2[0],
+    setHasOverflow = _React$useState2[1];
+  useIsomorphicLayoutEffect(function () {
+    if (!ref.current) return;
+    var element = ref.current;
+    var trigger = function trigger() {
+      var hasOverflow = element.scrollWidth > element.clientWidth;
+      setHasOverflow(hasOverflow);
+      if (callback) callback(hasOverflow);
+    };
+    trigger();
+    if ('ResizeObserver' in window) {
+      observer.current = new ResizeObserver(trigger);
+      observer.current.observe(element);
+    }
+
+    // destroy the observer
+    return function () {
+      if ('ResizeObserver' in window) {
+        var _observer$current;
+        (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+      }
+    };
+  }, [callback, ref]);
+  return hasOverflow;
+};
+var approximatelyEqual = function approximatelyEqual(v1, v2) {
+  var tolerance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return Math.abs(v1 - v2) < tolerance;
+};
+
+// Overlapping color of surface.background.gray.subtle + interactive.background.gray.default
+// TODO(future): design will tokenize or check if this is needed or not
+var MIXED_BG_COLOR = '#e1e7ef';
+
+export { MIXED_BG_COLOR, approximatelyEqual, useHasOverflow };
+//# sourceMappingURL=utils.js.map

package/build/lib/web/production/components/TopNav/TabNav/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/TopNav/TabNav/utils.ts"],"sourcesContent":["/* eslint-disable consistent-return */\nimport React from 'react';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\n\n/**\n * Check if an element has scroll overflow\n */\nconst useHasOverflow = (\n  ref: React.RefObject<HTMLDivElement>,\n  callback?: (hasOverflow: boolean) => void,\n): boolean => {\n  const observer = React.useRef<ResizeObserver | null>(null);\n  const [hasOverflow, setHasOverflow] = React.useState<boolean>(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) return;\n    const element = ref.current;\n\n    const trigger = (): void => {\n      const hasOverflow = element.scrollWidth > element.clientWidth;\n      setHasOverflow(hasOverflow);\n\n      if (callback) callback(hasOverflow);\n    };\n\n    trigger();\n    if ('ResizeObserver' in window) {\n      observer.current = new ResizeObserver(trigger);\n      observer.current.observe(element);\n    }\n\n    // destroy the observer\n    return (): void => {\n      if ('ResizeObserver' in window) {\n        observer.current?.disconnect();\n      }\n    };\n  }, [callback, ref]);\n\n  return hasOverflow;\n};\n\nconst approximatelyEqual = (v1: number, v2: number, tolerance = 1): boolean => {\n  return Math.abs(v1 - v2) < tolerance;\n};\n\n// Overlapping color of surface.background.gray.subtle + interactive.background.gray.default\n// TODO(future): design will tokenize or check if this is needed or not\nconst MIXED_BG_COLOR = '#e1e7ef';\n\nexport { useHasOverflow, approximatelyEqual, MIXED_BG_COLOR };\n"],"names":["useHasOverflow","ref","callback","observer","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","hasOverflow","setHasOverflow","useIsomorphicLayoutEffect","current","element","trigger","scrollWidth","clientWidth","window","ResizeObserver","observe","_observer$current","disconnect","approximatelyEqual","v1","v2","tolerance","arguments","length","undefined","Math","abs","MIXED_BG_COLOR"],"mappings":";;;;AAIA;AACA;AACA;AACMA,IAAAA,cAAc,GAAG,SAAjBA,cAAcA,CAClBC,GAAoC,EACpCC,QAAyC,EAC7B;AACZ,EAAA,IAAMC,QAAQ,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC,CAAA;AAC1D,EAAA,IAAAC,eAAA,GAAsCF,cAAK,CAACG,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAA7DI,IAAAA,WAAW,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AAElCI,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,IAAA,IAAI,CAACX,GAAG,CAACY,OAAO,EAAE,OAAA;AAClB,IAAA,IAAMC,OAAO,GAAGb,GAAG,CAACY,OAAO,CAAA;AAE3B,IAAA,IAAME,OAAO,GAAG,SAAVA,OAAOA,GAAe;MAC1B,IAAML,WAAW,GAAGI,OAAO,CAACE,WAAW,GAAGF,OAAO,CAACG,WAAW,CAAA;MAC7DN,cAAc,CAACD,WAAW,CAAC,CAAA;AAE3B,MAAA,IAAIR,QAAQ,EAAEA,QAAQ,CAACQ,WAAW,CAAC,CAAA;KACpC,CAAA;AAEDK,IAAAA,OAAO,EAAE,CAAA;IACT,IAAI,gBAAgB,IAAIG,MAAM,EAAE;AAC9Bf,MAAAA,QAAQ,CAACU,OAAO,GAAG,IAAIM,cAAc,CAACJ,OAAO,CAAC,CAAA;AAC9CZ,MAAAA,QAAQ,CAACU,OAAO,CAACO,OAAO,CAACN,OAAO,CAAC,CAAA;AACnC,KAAA;;AAEA;AACA,IAAA,OAAO,YAAY;MACjB,IAAI,gBAAgB,IAAII,MAAM,EAAE;AAAA,QAAA,IAAAG,iBAAA,CAAA;AAC9B,QAAA,CAAAA,iBAAA,GAAAlB,QAAQ,CAACU,OAAO,MAAA,IAAA,IAAAQ,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhBA,iBAAA,CAAkBC,UAAU,EAAE,CAAA;AAChC,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACpB,QAAQ,EAAED,GAAG,CAAC,CAAC,CAAA;AAEnB,EAAA,OAAOS,WAAW,CAAA;AACpB,EAAC;AAEKa,IAAAA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,EAAU,EAAEC,EAAU,EAA6B;AAAA,EAAA,IAA3BC,SAAS,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,CAAC,CAAA;EAC/D,OAAOG,IAAI,CAACC,GAAG,CAACP,EAAE,GAAGC,EAAE,CAAC,GAAGC,SAAS,CAAA;AACtC,EAAC;;AAED;AACA;AACMM,IAAAA,cAAc,GAAG;;;;"}

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

@@ -0,0 +1,158 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
+import { TopNavContext } from './TopNavContext.js';
+import '../Box/index.js';
+import '../Box/BaseBox/index.js';
+import '../Divider/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 '../../utils/index.js';
+import '../../utils/metaAttribute/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { size } from '../../tokens/global/size.js';
+import { Box } from '../Box/Box.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Divider } from '../Divider/Divider.js';
+
+var _excluded = ["children"];
+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 CONTENT_RIGHT_GAP = size[80];
+var RazorpayLinesSvg = function RazorpayLinesSvg() {
+  return /*#__PURE__*/jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "304",
+    height: "56",
+    viewBox: "0 0 304 56",
+    fill: "none",
+    children: [/*#__PURE__*/jsx("path", {
+      opacity: "0.17",
+      d: "M-20.1729 -528.246L-57.1316 -544.114C-61.2709 -545.885 -65.9797 -543.057 -65.9797 -538.799L-66 -515.846C-66 -511.217 -63.1422 -506.998 -58.6571 -505.045L21.4336 -470.072C23.427 -469.205 25.7255 -469.195 27.729 -470.062L92.7067 -498.197C97.5783 -500.302 103.141 -496.978 103.141 -491.949L103.141 -396.886C103.141 -388.781 98.1173 -381.418 90.2557 -378.018L-10.1145 -334.568C-14.986 -332.463 -20.5492 -335.787 -20.5492 -340.816V-436.66C-20.5492 -442.232 -14.3759 -445.918 -8.97546 -443.575L16.0637 -432.689C19.5724 -431.165 19.5725 -426.488 16.0739 -424.964L-55.067 -393.914C-61.7387 -391 -66 -384.742 -66 -377.847L-65.9695 -119.356C-65.9695 -115.585 -61.7895 -113.089 -58.1384 -114.68L-25.2072 -129.062C-22.0036 -130.462 -18.3015 -130.462 -15.0877 -129.071L106.416 -76.4016C110.393 -74.6777 110.403 -69.3822 106.426 -67.6392L31.7462 -35.047C28.5121 -33.6373 24.8203 -35.847 24.8203 -39.1805V-79.3637C24.8203 -87.4498 29.8342 -94.8027 37.6653 -98.2124L152.65 -148.215C156.993 -150.101 161.956 -147.139 161.956 -142.653L161.956 -56.6672C161.956 -53.9337 163.644 -51.4383 166.299 -50.2859L200.583 -35.3041C203.756 -33.9231 207.386 -36.0851 207.386 -39.3615L207.386 -59.2102C207.386 -67.3154 212.411 -74.6777 220.272 -78.0779L300.297 -112.675C305.169 -114.78 310.732 -111.456 310.732 -106.427L310.732 -11.3648C310.732 -3.25959 305.708 4.10269 297.846 7.50287L217.801 42.0905C212.929 44.1953 207.366 40.8714 207.366 35.8425V14.4604C207.366 10.1649 204.712 6.26945 200.562 4.4503L139.666 -21.9607C135.863 -23.6274 131.5 -21.0273 131.5 -17.0938L131.5 86.7882M166.281 98.6523C118.572 77.8195 44.1159 45.3065 44.1159 45.3065C41.6242 44.2208 41.6242 40.8968 44.1159 39.811L111.034 9.76487C113.2 8.82196 113.2 5.94561 111.034 5.0027L76.8005 -9.94099C73.1494 -11.5411 68.9185 -11.5411 65.2674 -9.94099L-65.3288 47.0907L25.583 86.7882L247.183 -9.55048C250.966 -11.1982 253.387 -14.7413 253.387 -18.6462L253.387 -204.704C253.387 -208.38 251.108 -211.733 247.549 -213.285L213.173 -228.296C210.468 -229.477 207.366 -227.629 207.366 -224.829L207.386 -164.397C207.386 -158.101 214.373 -153.93 220.465 -156.596L380.881 -226.658C384.766 -228.353 389.21 -225.696 389.21 -221.686L389.21 -121.242C389.21 -116.823 384.308 -113.899 380.026 -115.766L309.414 -146.577C302.611 -149.548 298.268 -155.939 298.268 -162.959V-221.752C298.268 -227.277 301.685 -232.296 307.035 -234.629L379.05 -266.079C382.915 -267.765 382.905 -272.908 379.04 -274.593L262.255 -325.234C258.278 -326.958 258.268 -332.254 262.245 -333.997L336.925 -366.589C340.159 -367.999 343.851 -365.789 343.851 -362.455L343.851 -303.224C343.851 -295.137 338.837 -287.785 331.006 -284.375L216.021 -234.372C211.678 -232.486 206.715 -235.448 206.715 -239.934L206.715 -344.969C206.715 -347.702 205.027 -350.198 202.373 -351.35L168.089 -366.332C164.916 -367.713 161.285 -365.551 161.285 -362.275V-342.426C161.285 -334.321 156.261 -326.958 148.399 -323.558L35.3262 -274.593C30.4546 -272.489 24.8915 -275.813 24.8915 -280.841L24.8915 -375.904C24.8915 -384.009 29.9156 -391.371 37.7772 -394.772L150.85 -443.737C155.722 -445.842 161.285 -442.518 161.285 -437.489V-416.106C161.285 -411.811 163.939 -407.915 168.089 -406.096L244.701 -372.599C248.505 -370.932 252.868 -373.532 252.868 -377.466L252.868 -481.348C252.868 -485.653 250.193 -489.568 246.023 -491.378L169.401 -524.56C165.597 -526.208 161.254 -523.608 161.254 -519.684V-496.578C161.254 -491.597 164.336 -487.073 169.157 -484.968L291.322 -431.622C293.813 -430.536 293.813 -427.212 291.322 -426.126L257.617 -411.411C255.451 -410.468 255.451 -407.591 257.617 -406.648L291.85 -391.705C295.502 -390.105 299.732 -390.105 303.383 -391.705L434 -448.699L343.088 -488.397L121.489 -392.076C117.705 -390.428 115.285 -386.885 115.285 -382.98L115.285 -196.923C115.285 -193.246 117.563 -189.894 121.122 -188.341L155.498 -173.331C158.203 -172.15 161.305 -173.997 161.305 -176.798L161.285 -237.23C161.285 -243.525 154.298 -247.697 148.206 -245.03L-12.2096 -174.978C-16.0946 -173.283 -20.539 -175.94 -20.539 -179.95L-20.539 -280.394C-20.539 -284.813 -15.6369 -287.737 -11.3552 -285.87L59.2567 -255.059C66.0606 -252.087 70.4034 -245.697 70.4034 -238.677L70.4034 -179.884C70.4034 -174.359 66.9861 -169.34 61.6366 -167.007L-8.56866 -136.348",
+      stroke: "url(#paint0_linear_89426_105396)",
+      strokeMiterlimit: "10"
+    }), /*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsxs("linearGradient", {
+        id: "paint0_linear_89426_105396",
+        x1: "162.854",
+        y1: "63.9672",
+        x2: "160.504",
+        y2: "-544.656",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/jsx("stop", {
+          stopColor: "#6F9ADA"
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "1",
+          stopColor: "white"
+        })]
+      })
+    })]
+  });
+};
+var TopNav = function TopNav(_ref) {
+  var children = _ref.children,
+    styledProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(TopNavContext.Provider, {
+    value: {
+      backgroundColor: styledProps.backgroundColor
+    },
+    children: /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
+      display: "grid",
+      gridTemplateColumns: {
+        base: 'minmax(0, 1fr) auto',
+        m: 'auto minmax(0, 1fr) auto'
+      },
+      alignItems: "center",
+      position: "sticky",
+      top: "0px",
+      width: "100%",
+      paddingX: "spacing.3",
+      height: makeSize(TOP_NAV_HEIGHT),
+      zIndex: 1
+    }, styledProps), metaAttribute({
+      name: MetaConstants.TopNav
+    })), {}, {
+      children: [children, /*#__PURE__*/jsx(Box, {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        pointerEvents: "none",
+        children: /*#__PURE__*/jsx(RazorpayLinesSvg, {})
+      })]
+    }))
+  });
+};
+var TopNavBrand = function TopNavBrand(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
+    display: {
+      base: 'none',
+      m: 'flex'
+    },
+    flexDirection: "row",
+    marginTop: "spacing.4",
+    width: {
+      base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
+      xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL)
+    }
+  }, metaAttribute({
+    name: MetaConstants.TopNavBrand
+  })), {}, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
+      width: "100%",
+      textAlign: "center",
+      children: children
+    }), /*#__PURE__*/jsx(Box, {
+      alignSelf: "center",
+      display: {
+        base: 'none',
+        m: 'block'
+      },
+      children: /*#__PURE__*/jsx(Divider, {
+        marginRight: "-1px",
+        height: makeSize(size[20]),
+        alignSelf: "center",
+        orientation: "vertical"
+      })
+    })]
+  }));
+};
+var TopNavContent = function TopNavContent(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    marginLeft: {
+      base: 'spacing.0',
+      m: 'spacing.4'
+    },
+    paddingRight: {
+      base: 'spacing.0',
+      m: makeSize(CONTENT_RIGHT_GAP)
+    }
+  }, metaAttribute({
+    name: MetaConstants.TopNavContent
+  })), {}, {
+    children: children
+  }));
+};
+var TopNavActions = function TopNavActions(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+    display: "flex",
+    gap: "spacing.3",
+    alignItems: "center",
+    marginTop: "spacing.1"
+  }, metaAttribute({
+    name: MetaConstants.TopNavActions
+  })), {}, {
+    children: children
+  }));
+};
+
+export { TopNav, TopNavActions, TopNavBrand, TopNavContent };
+//# sourceMappingURL=TopNav.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.web.js","sources":["../../../../../../src/components/TopNav/TopNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport { TopNavContext } from './TopNavContext';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Divider } from '~components/Divider';\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 { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst TOP_NAV_HEIGHT = size[56];\nconst CONTENT_RIGHT_GAP = size[80];\n\nconst RazorpayLinesSvg = (): React.ReactElement => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"304\"\n      height=\"56\"\n      viewBox=\"0 0 304 56\"\n      fill=\"none\"\n    >\n      <path\n        opacity=\"0.17\"\n        d=\"M-20.1729 -528.246L-57.1316 -544.114C-61.2709 -545.885 -65.9797 -543.057 -65.9797 -538.799L-66 -515.846C-66 -511.217 -63.1422 -506.998 -58.6571 -505.045L21.4336 -470.072C23.427 -469.205 25.7255 -469.195 27.729 -470.062L92.7067 -498.197C97.5783 -500.302 103.141 -496.978 103.141 -491.949L103.141 -396.886C103.141 -388.781 98.1173 -381.418 90.2557 -378.018L-10.1145 -334.568C-14.986 -332.463 -20.5492 -335.787 -20.5492 -340.816V-436.66C-20.5492 -442.232 -14.3759 -445.918 -8.97546 -443.575L16.0637 -432.689C19.5724 -431.165 19.5725 -426.488 16.0739 -424.964L-55.067 -393.914C-61.7387 -391 -66 -384.742 -66 -377.847L-65.9695 -119.356C-65.9695 -115.585 -61.7895 -113.089 -58.1384 -114.68L-25.2072 -129.062C-22.0036 -130.462 -18.3015 -130.462 -15.0877 -129.071L106.416 -76.4016C110.393 -74.6777 110.403 -69.3822 106.426 -67.6392L31.7462 -35.047C28.5121 -33.6373 24.8203 -35.847 24.8203 -39.1805V-79.3637C24.8203 -87.4498 29.8342 -94.8027 37.6653 -98.2124L152.65 -148.215C156.993 -150.101 161.956 -147.139 161.956 -142.653L161.956 -56.6672C161.956 -53.9337 163.644 -51.4383 166.299 -50.2859L200.583 -35.3041C203.756 -33.9231 207.386 -36.0851 207.386 -39.3615L207.386 -59.2102C207.386 -67.3154 212.411 -74.6777 220.272 -78.0779L300.297 -112.675C305.169 -114.78 310.732 -111.456 310.732 -106.427L310.732 -11.3648C310.732 -3.25959 305.708 4.10269 297.846 7.50287L217.801 42.0905C212.929 44.1953 207.366 40.8714 207.366 35.8425V14.4604C207.366 10.1649 204.712 6.26945 200.562 4.4503L139.666 -21.9607C135.863 -23.6274 131.5 -21.0273 131.5 -17.0938L131.5 86.7882M166.281 98.6523C118.572 77.8195 44.1159 45.3065 44.1159 45.3065C41.6242 44.2208 41.6242 40.8968 44.1159 39.811L111.034 9.76487C113.2 8.82196 113.2 5.94561 111.034 5.0027L76.8005 -9.94099C73.1494 -11.5411 68.9185 -11.5411 65.2674 -9.94099L-65.3288 47.0907L25.583 86.7882L247.183 -9.55048C250.966 -11.1982 253.387 -14.7413 253.387 -18.6462L253.387 -204.704C253.387 -208.38 251.108 -211.733 247.549 -213.285L213.173 -228.296C210.468 -229.477 207.366 -227.629 207.366 -224.829L207.386 -164.397C207.386 -158.101 214.373 -153.93 220.465 -156.596L380.881 -226.658C384.766 -228.353 389.21 -225.696 389.21 -221.686L389.21 -121.242C389.21 -116.823 384.308 -113.899 380.026 -115.766L309.414 -146.577C302.611 -149.548 298.268 -155.939 298.268 -162.959V-221.752C298.268 -227.277 301.685 -232.296 307.035 -234.629L379.05 -266.079C382.915 -267.765 382.905 -272.908 379.04 -274.593L262.255 -325.234C258.278 -326.958 258.268 -332.254 262.245 -333.997L336.925 -366.589C340.159 -367.999 343.851 -365.789 343.851 -362.455L343.851 -303.224C343.851 -295.137 338.837 -287.785 331.006 -284.375L216.021 -234.372C211.678 -232.486 206.715 -235.448 206.715 -239.934L206.715 -344.969C206.715 -347.702 205.027 -350.198 202.373 -351.35L168.089 -366.332C164.916 -367.713 161.285 -365.551 161.285 -362.275V-342.426C161.285 -334.321 156.261 -326.958 148.399 -323.558L35.3262 -274.593C30.4546 -272.489 24.8915 -275.813 24.8915 -280.841L24.8915 -375.904C24.8915 -384.009 29.9156 -391.371 37.7772 -394.772L150.85 -443.737C155.722 -445.842 161.285 -442.518 161.285 -437.489V-416.106C161.285 -411.811 163.939 -407.915 168.089 -406.096L244.701 -372.599C248.505 -370.932 252.868 -373.532 252.868 -377.466L252.868 -481.348C252.868 -485.653 250.193 -489.568 246.023 -491.378L169.401 -524.56C165.597 -526.208 161.254 -523.608 161.254 -519.684V-496.578C161.254 -491.597 164.336 -487.073 169.157 -484.968L291.322 -431.622C293.813 -430.536 293.813 -427.212 291.322 -426.126L257.617 -411.411C255.451 -410.468 255.451 -407.591 257.617 -406.648L291.85 -391.705C295.502 -390.105 299.732 -390.105 303.383 -391.705L434 -448.699L343.088 -488.397L121.489 -392.076C117.705 -390.428 115.285 -386.885 115.285 -382.98L115.285 -196.923C115.285 -193.246 117.563 -189.894 121.122 -188.341L155.498 -173.331C158.203 -172.15 161.305 -173.997 161.305 -176.798L161.285 -237.23C161.285 -243.525 154.298 -247.697 148.206 -245.03L-12.2096 -174.978C-16.0946 -173.283 -20.539 -175.94 -20.539 -179.95L-20.539 -280.394C-20.539 -284.813 -15.6369 -287.737 -11.3552 -285.87L59.2567 -255.059C66.0606 -252.087 70.4034 -245.697 70.4034 -238.677L70.4034 -179.884C70.4034 -174.359 66.9861 -169.34 61.6366 -167.007L-8.56866 -136.348\"\n        stroke=\"url(#paint0_linear_89426_105396)\"\n        strokeMiterlimit=\"10\"\n      />\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_89426_105396\"\n          x1=\"162.854\"\n          y1=\"63.9672\"\n          x2=\"160.504\"\n          y2=\"-544.656\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"#6F9ADA\" />\n          <stop offset=\"1\" stopColor=\"white\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n};\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>;\n\nconst TopNav = ({ children, ...styledProps }: TopNavProps): React.ReactElement => {\n  return (\n    <TopNavContext.Provider value={{ backgroundColor: styledProps.backgroundColor }}>\n      <Box\n        display=\"grid\"\n        gridTemplateColumns={{ base: 'minmax(0, 1fr) auto', m: 'auto minmax(0, 1fr) auto' }}\n        alignItems=\"center\"\n        position=\"sticky\"\n        top=\"0px\"\n        width=\"100%\"\n        paddingX=\"spacing.3\"\n        height={makeSize(TOP_NAV_HEIGHT)}\n        zIndex={1}\n        {...styledProps}\n        {...metaAttribute({ name: MetaConstants.TopNav })}\n      >\n        {children}\n        <Box position=\"absolute\" top=\"0px\" left=\"0px\" pointerEvents=\"none\">\n          <RazorpayLinesSvg />\n        </Box>\n      </Box>\n    </TopNavContext.Provider>\n  );\n};\n\nconst TopNavBrand = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <Box\n      display={{\n        base: 'none',\n        m: 'flex',\n      }}\n      flexDirection=\"row\"\n      marginTop=\"spacing.4\"\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    >\n      <BaseBox width=\"100%\" textAlign=\"center\">\n        {children}\n      </BaseBox>\n      <Box alignSelf=\"center\" display={{ base: 'none', m: 'block' }}>\n        <Divider\n          marginRight=\"-1px\"\n          height={makeSize(size[20])}\n          alignSelf=\"center\"\n          orientation=\"vertical\"\n        />\n      </Box>\n    </Box>\n  );\n};\n\nconst TopNavContent = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      alignItems=\"center\"\n      marginLeft={{ base: 'spacing.0', m: 'spacing.4' }}\n      paddingRight={{ base: 'spacing.0', m: makeSize(CONTENT_RIGHT_GAP) }}\n      {...metaAttribute({ name: MetaConstants.TopNavContent })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst TopNavActions = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  return (\n    <BaseBox\n      display=\"flex\"\n      gap=\"spacing.3\"\n      alignItems=\"center\"\n      marginTop=\"spacing.1\"\n      {...metaAttribute({ name: MetaConstants.TopNavActions })}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { TopNav, TopNavBrand, TopNavContent, TopNavActions };\nexport type { TopNavProps };\n"],"names":["TOP_NAV_HEIGHT","size","CONTENT_RIGHT_GAP","RazorpayLinesSvg","_jsxs","xmlns","width","height","viewBox","fill","children","_jsx","opacity","d","stroke","strokeMiterlimit","id","x1","y1","x2","y2","gradientUnits","stopColor","offset","TopNav","_ref","styledProps","_objectWithoutProperties","_excluded","TopNavContext","Provider","value","backgroundColor","Box","_objectSpread","display","gridTemplateColumns","base","m","alignItems","position","top","paddingX","makeSize","zIndex","metaAttribute","name","MetaConstants","left","pointerEvents","TopNavBrand","_ref2","flexDirection","marginTop","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","BaseBox","textAlign","alignSelf","Divider","marginRight","orientation","TopNavContent","_ref3","marginLeft","paddingRight","TopNavActions","_ref4","gap"],"mappings":"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"}

package/build/lib/web/production/components/TopNav/TopNavContext.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { MIXED_BG_COLOR } from './TabNav/utils.js';
+
+var TopNavContext = /*#__PURE__*/React__default.createContext({
+  backgroundColor: MIXED_BG_COLOR
+});
+var useTopNavContext = function useTopNavContext() {
+  var context = React__default.useContext(TopNavContext);
+  return context;
+};
+
+export { TopNavContext, useTopNavContext };
+//# sourceMappingURL=TopNavContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavContext.js","sources":["../../../../../../src/components/TopNav/TopNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport { MIXED_BG_COLOR } from './TabNav/utils';\nimport type { BoxProps } from '~components/Box';\n\ntype TopNavContextProps = {\n  backgroundColor: BoxProps['backgroundColor'];\n};\nconst TopNavContext = React.createContext<TopNavContextProps | null>({\n  backgroundColor: MIXED_BG_COLOR as never,\n});\n\nconst useTopNavContext = (): TopNavContextProps => {\n  const context = React.useContext(TopNavContext);\n  return context!;\n};\n\nexport { TopNavContext, useTopNavContext };\n"],"names":["TopNavContext","React","createContext","backgroundColor","MIXED_BG_COLOR","useTopNavContext","context","useContext"],"mappings":";;;AAOA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B;AACnEC,EAAAA,eAAe,EAAEC,cAAAA;AACnB,CAAC,EAAC;AAEF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGL,cAAK,CAACM,UAAU,CAACP,aAAa,CAAC,CAAA;AAC/C,EAAA,OAAOM,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/production/components/TopNav/index.js

@@ -0,0 +1,3 @@
+import './TabNav/index.js';
+export { TopNav, TopNavActions, TopNavBrand, TopNavContent } from './TopNav.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/TopNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/build/lib/web/production/components/index.js

@@ -51,6 +51,7 @@ import './Tabs/index.js';
 import './Tag/index.js';
 import './Tooltip/index.js';
 import './Toast/index.js';
+import './TopNav/index.js';
 import './types.js';
 import './Typography/index.js';
 import './VisuallyHidden/index.web.js';
@@ -483,6 +484,7 @@ export { SideNavSection } from './SideNav/SideNavSection.web.js';
 export { SideNavItem } from './SideNav/SideNavItems/SideNavItem.web.js';
 export { SideNavFooter } from './SideNav/SideNavFooter.web.js';
 export { SideNavBody } from './SideNav/SideNavBody.web.js';
+export { SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL } from './SideNav/tokens.js';
 export { Skeleton } from './Skeleton/Skeleton.js';
 export { SkipNavContent, SkipNavLink } from './SkipNav/SkipNav.web.js';
 export { Spinner } from './Spinner/Spinner/Spinner.js';
@@ -508,6 +510,9 @@ export { Tooltip } from './Tooltip/Tooltip.web.js';
 export { TooltipInteractiveWrapper } from './Tooltip/TooltipInteractiveWrapper.web.js';
 export { ToastContainer } from './Toast/ToastContainer.web.js';
 export { useToast } from './Toast/useToast.js';
+export { TabNav } from './TopNav/TabNav/TabNav.web.js';
+export { TabNavItem } from './TopNav/TabNav/TabNavItem.web.js';
+export { TopNav, TopNavActions, TopNavBrand, TopNavContent } from './TopNav/TopNav.web.js';
 export { Heading, getHeadingProps } from './Typography/Heading/Heading.js';
 export { Text, getTextProps } from './Typography/Text/Text.js';
 export { Code } from './Typography/Code/Code.js';

package/build/lib/web/production/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/production/tokens/global/size.js

@@ -62,6 +62,8 @@ var size = {
   64: 64,
   /** 72 px */
   72: 72,
+  /** 80 px */
+  80: 80,
   /** 100 px */
   100: 100,
   /** 120 px */
@@ -76,6 +78,8 @@ var size = {
   200: 200,
   /** 240 px */
   240: 240,
+  /** 245 px */
+  245: 245,
   /** 256 px */
   256: 256,
   /** 264 px */

package/build/lib/web/production/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}

package/build/lib/web/production/utils/metaAttribute/metaConstants.js

@@ -59,6 +59,12 @@ var MetaConstants = {
   PhoneNumberInput: 'phone-number-input',
   Toast: 'toast',
   ToastContainer: 'toast-container',
+  TopNav: 'top-nav',
+  TopNavBrand: 'top-nav-brand',
+  TopNavContent: 'top-nav-content',
+  TopNavActions: 'top-nav-actions',
+  TabNav: 'tab-nav',
+  TabNavItem: 'tab-nav-item',
   ProgressBar: 'progress-bar',
   Radio: 'radio',
   RadioGroup: 'radio-group',