@razorpay/blade 11.22.0 → 11.23.1

package/build/lib/web/development/components/SideNav/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/SideNav/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeMotionTime } from '~utils';\n\nconst classes = {\n  SHOW_WHEN_COLLAPSED: 'show-when-collapsed',\n  HIDE_WHEN_COLLAPSED: 'hide-when-collapsed',\n  COLLAPSED: 'collapsed',\n  TRANSITIONING: 'transitioning',\n  L1_ITEM_WRAPPER: 'l1-item-wrapper',\n  SHOW_ON_LINK_HOVER: 'show-on-link-hover',\n  STYLED_NAV_LINK: 'styled-nav-link',\n} as const;\n\nconst SKIP_NAV_ID = 'blade-side-nav-skip';\n\nconst COLLAPSED_L1_WIDTH = size['56'];\nconst EXPANDED_L1_WIDTH = size['264'];\nconst NAV_ITEM_HEIGHT = size['40'];\n\n// This is the delay after which transition cleanup happens for rare cases where transitionEnd is not triggered\nconst TRANSITION_CLEANUP_DELAY = 300; // A little more than the duration of transition end\n\nconst HOVER_AGAIN_DELAY = 500;\n\n// Delay between mouse out from L1 and L1 collapsing again\nconst L1_EXIT_HOVER_DELAY = 150;\n\nconst getNavItemTransition = ({ motion }: Theme): string => {\n  return `background-color ${makeMotionTime(motion.duration['2xquick'])} ${\n    motion.easing.standard.effective\n  }`;\n};\n\nexport {\n  SKIP_NAV_ID,\n  classes,\n  COLLAPSED_L1_WIDTH,\n  EXPANDED_L1_WIDTH,\n  NAV_ITEM_HEIGHT,\n  TRANSITION_CLEANUP_DELAY,\n  HOVER_AGAIN_DELAY,\n  getNavItemTransition,\n  L1_EXIT_HOVER_DELAY,\n};\n"],"names":["classes","SHOW_WHEN_COLLAPSED","HIDE_WHEN_COLLAPSED","COLLAPSED","TRANSITIONING","L1_ITEM_WRAPPER","SHOW_ON_LINK_HOVER","STYLED_NAV_LINK","SKIP_NAV_ID","COLLAPSED_L1_WIDTH","size","EXPANDED_L1_WIDTH","NAV_ITEM_HEIGHT","TRANSITION_CLEANUP_DELAY","HOVER_AGAIN_DELAY","L1_EXIT_HOVER_DELAY","getNavItemTransition","_ref","motion","concat","makeMotionTime","duration","easing","standard","effective"],"mappings":";;;;;AAIA,IAAMA,OAAO,GAAG;AACdC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,eAAe,EAAE,iBAAA;AACnB,EAAU;AAEJC,IAAAA,WAAW,GAAG,sBAAqB;AAEzC,IAAMC,kBAAkB,GAAGC,IAAI,CAAC,IAAI,EAAC;AACrC,IAAMC,iBAAiB,GAAGD,IAAI,CAAC,KAAK,EAAC;AACrC,IAAME,eAAe,GAAGF,IAAI,CAAC,IAAI,EAAC;;AAElC;AACA,IAAMG,wBAAwB,GAAG,IAAI;;AAE/BC,IAAAA,iBAAiB,GAAG,IAAG;;AAE7B;AACMC,IAAAA,mBAAmB,GAAG,IAAG;AAE/B,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAkC;AAAA,EAAA,IAA5BC,MAAM,GAAAD,IAAA,CAANC,MAAM,CAAA;EACpC,OAAAC,mBAAAA,CAAAA,MAAA,CAA2BC,cAAc,CAACF,MAAM,CAACG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAAF,GAAAA,CAAAA,CAAAA,MAAA,CACnED,MAAM,CAACI,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA,CAAA;AAEpC;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/SideNav/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeMotionTime } from '~utils';\n\nconst classes = {\n  SHOW_WHEN_COLLAPSED: 'show-when-collapsed',\n  HIDE_WHEN_COLLAPSED: 'hide-when-collapsed',\n  COLLAPSED: 'collapsed',\n  TRANSITIONING: 'transitioning',\n  L1_ITEM_WRAPPER: 'l1-item-wrapper',\n  SHOW_ON_LINK_HOVER: 'show-on-link-hover',\n  STYLED_NAV_LINK: 'styled-nav-link',\n} as const;\n\nconst SKIP_NAV_ID = 'blade-side-nav-skip';\n\nconst COLLAPSED_L1_WIDTH = size['56'];\nconst SIDE_NAV_EXPANDED_L1_WIDTH_XL = size['264'];\nconst SIDE_NAV_EXPANDED_L1_WIDTH_BASE = size['245'];\nconst NAV_ITEM_HEIGHT = size['40'];\n\n// This is the delay after which transition cleanup happens for rare cases where transitionEnd is not triggered\nconst TRANSITION_CLEANUP_DELAY = 300; // A little more than the duration of transition end\n\nconst HOVER_AGAIN_DELAY = 500;\n\n// Delay between mouse out from L1 and L1 collapsing again\nconst L1_EXIT_HOVER_DELAY = 150;\n\nconst getNavItemTransition = ({ motion }: Theme): string => {\n  return `background-color ${makeMotionTime(motion.duration['2xquick'])} ${\n    motion.easing.standard.effective\n  }`;\n};\n\nexport {\n  SKIP_NAV_ID,\n  classes,\n  COLLAPSED_L1_WIDTH,\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n  NAV_ITEM_HEIGHT,\n  TRANSITION_CLEANUP_DELAY,\n  HOVER_AGAIN_DELAY,\n  getNavItemTransition,\n  L1_EXIT_HOVER_DELAY,\n};\n"],"names":["classes","SHOW_WHEN_COLLAPSED","HIDE_WHEN_COLLAPSED","COLLAPSED","TRANSITIONING","L1_ITEM_WRAPPER","SHOW_ON_LINK_HOVER","STYLED_NAV_LINK","SKIP_NAV_ID","COLLAPSED_L1_WIDTH","size","SIDE_NAV_EXPANDED_L1_WIDTH_XL","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","NAV_ITEM_HEIGHT","TRANSITION_CLEANUP_DELAY","HOVER_AGAIN_DELAY","L1_EXIT_HOVER_DELAY","getNavItemTransition","_ref","motion","concat","makeMotionTime","duration","easing","standard","effective"],"mappings":";;;;;AAIA,IAAMA,OAAO,GAAG;AACdC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,eAAe,EAAE,iBAAA;AACnB,EAAU;AAEJC,IAAAA,WAAW,GAAG,sBAAqB;AAEzC,IAAMC,kBAAkB,GAAGC,IAAI,CAAC,IAAI,EAAC;AACrC,IAAMC,6BAA6B,GAAGD,IAAI,CAAC,KAAK,EAAC;AACjD,IAAME,+BAA+B,GAAGF,IAAI,CAAC,KAAK,EAAC;AACnD,IAAMG,eAAe,GAAGH,IAAI,CAAC,IAAI,EAAC;;AAElC;AACA,IAAMI,wBAAwB,GAAG,IAAI;;AAE/BC,IAAAA,iBAAiB,GAAG,IAAG;;AAE7B;AACMC,IAAAA,mBAAmB,GAAG,IAAG;AAE/B,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAkC;AAAA,EAAA,IAA5BC,MAAM,GAAAD,IAAA,CAANC,MAAM,CAAA;EACpC,OAAAC,mBAAAA,CAAAA,MAAA,CAA2BC,cAAc,CAACF,MAAM,CAACG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAAF,GAAAA,CAAAA,CAAAA,MAAA,CACnED,MAAM,CAACI,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA,CAAA;AAEpC;;;;"}

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

@@ -0,0 +1,172 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+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 { MIXED_BG_COLOR, useHasOverflow, approximatelyEqual } from './utils.js';
+import { TabNavContext } from './TabNavContext.js';
+import '../../Box/BaseBox/index.js';
+import '../../Box/styledProps/index.js';
+import '../../Button/index.js';
+import '../../Divider/index.js';
+import '../../Icons/index.js';
+import '../../../utils/index.js';
+import '../../../tokens/global/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import '../../../utils/metaAttribute/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
+import Button from '../../Button/Button/Button.js';
+import ChevronLeftIcon from '../../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
+import { Divider } from '../../Divider/Divider.js';
+import { size } from '../../../tokens/global/size.js';
+import ChevronRightIcon from '../../Icons/ChevronRightIcon/ChevronRightIcon.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 GRADIENT_WIDTH = 54;
+var GRADIENT_OFFSET = -8;
+var OFFSET_BOTTOM = -12;
+var SCROLL_AMOUNT = 200;
+var ScrollableArea = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TabNavweb__ScrollableArea",
+  componentId: "sc-1ww6x3k-0"
+})(function () {
+  return {
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  };
+});
+var GradientOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TabNavweb__GradientOverlay",
+  componentId: "sc-1ww6x3k-1"
+})(function (_ref) {
+  var theme = _ref.theme,
+    shouldShow = _ref.shouldShow,
+    variant = _ref.variant,
+    $color = _ref.$color;
+  var color = getIn(theme.colors, $color, MIXED_BG_COLOR);
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'absolute'
+  }, variant, 0), "pointerEvents", shouldShow ? 'auto' : 'none'), "transform", shouldShow ? 'scale(1)' : 'scale(0.5)'), "opacity", shouldShow ? 1 : 0), "transitionTimingFunction", "".concat(theme.motion.easing.standard.revealing)), "transitionDuration", "".concat(makeMotionTime(theme.motion.duration.xquick))), "transitionProperty", 'opacity, transform'), "zIndex", 1), ':before', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    content: "''",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }, variant, 0), "top", makeSize(GRADIENT_OFFSET)), "bottom", makeSize(GRADIENT_OFFSET)), "width", makeSize(GRADIENT_WIDTH)), "background", "linear-gradient(to ".concat(variant, ", transparent 0%, ").concat(color, " 30%, ").concat(color, " 100%);")));
+});
+var TabNav = function TabNav(_ref3) {
+  var children = _ref3.children,
+    styledProps = _objectWithoutProperties(_ref3, _excluded);
+  var ref = React__default.useRef(null);
+  var hasOverflow = useHasOverflow(ref);
+  var _React$useState = React__default.useState('start'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    scrollStatus = _React$useState2[0],
+    setScrollStatus = _React$useState2[1];
+  var _useTopNavContext = useTopNavContext(),
+    backgroundColor = _useTopNavContext.backgroundColor;
+
+  // Check if the scroll is at start, end or middle
+  var handleScrollStatus = React__default.useCallback(function (e) {
+    var target = e.target;
+    var isAtStart = target.scrollLeft === 0;
+    var isAtEnd = approximatelyEqual(target.scrollLeft, target.scrollWidth - target.offsetWidth);
+    if (isAtStart) {
+      setScrollStatus('start');
+    } else if (isAtEnd) {
+      setScrollStatus('end');
+    } else {
+      setScrollStatus('middle');
+    }
+  }, []);
+  var scrollRight = function scrollRight() {
+    if (!ref.current) return;
+    ref.current.scrollBy({
+      behavior: 'smooth',
+      left: SCROLL_AMOUNT
+    });
+  };
+  var scrollLeft = function scrollLeft() {
+    if (!ref.current) return;
+    ref.current.scrollBy({
+      behavior: 'smooth',
+      left: -SCROLL_AMOUNT
+    });
+  };
+  return /*#__PURE__*/jsx(TabNavContext.Provider, {
+    value: {
+      containerRef: ref,
+      hasOverflow: hasOverflow
+    },
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+      as: "nav",
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      position: "relative",
+      marginBottom: makeSize(OFFSET_BOTTOM)
+    }, getStyledProps(styledProps)), metaAttribute({
+      name: MetaConstants.TabNav
+    })), {}, {
+      children: [/*#__PURE__*/jsx(GradientOverlay, {
+        variant: "left",
+        $color: backgroundColor,
+        shouldShow: hasOverflow && scrollStatus !== 'start',
+        children: /*#__PURE__*/jsx(Button, {
+          size: "xsmall",
+          variant: "tertiary",
+          icon: ChevronLeftIcon,
+          accessibilityLabel: "Scroll Left",
+          onClick: scrollLeft
+        })
+      }), /*#__PURE__*/jsx(ScrollableArea, {
+        ref: ref,
+        onScroll: handleScrollStatus,
+        display: "flex",
+        width: "100%",
+        position: "relative",
+        whiteSpace: "nowrap",
+        gap: "spacing.0",
+        overflowY: "hidden",
+        overflowX: "auto",
+        children: /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          flexDirection: "row",
+          width: "max-content",
+          children: React__default.Children.map(children, function (child, index) {
+            return /*#__PURE__*/jsxs(Fragment, {
+              children: [index > 0 ? /*#__PURE__*/jsx(Divider, {
+                margin: "auto",
+                variant: "muted",
+                orientation: "vertical",
+                height: makeSize(size[16])
+              }) : null, child]
+            });
+          })
+        })
+      }), /*#__PURE__*/jsx(GradientOverlay, {
+        variant: "right",
+        $color: backgroundColor,
+        shouldShow: hasOverflow && scrollStatus !== 'end',
+        children: /*#__PURE__*/jsx(Button, {
+          size: "xsmall",
+          variant: "tertiary",
+          icon: ChevronRightIcon,
+          accessibilityLabel: "Scroll Right",
+          onClick: scrollRight
+        })
+      })]
+    }))
+  });
+};
+
+export { TabNav };
+//# sourceMappingURL=TabNav.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.web.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTopNavContext } from '../TopNavContext';\nimport { approximatelyEqual, MIXED_BG_COLOR, useHasOverflow } from './utils';\nimport { TabNavContext } from './TabNavContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport { ChevronLeftIcon, ChevronRightIcon } from '~components/Icons';\nimport { makeMotionTime, makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { BoxProps } from '~components/Box';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst GRADIENT_WIDTH = 54 as const;\nconst GRADIENT_OFFSET = -8 as const;\nconst OFFSET_BOTTOM = -12 as const;\nconst SCROLL_AMOUNT = 200;\n\ntype TabNavProps = {\n  children: React.ReactNode;\n};\n\nconst ScrollableArea = styled(BaseBox)(() => {\n  return {\n    '&::-webkit-scrollbar': { display: 'none' },\n  };\n});\n\nconst GradientOverlay = styled(BaseBox)<{\n  shouldShow?: boolean;\n  variant: 'left' | 'right';\n  $color: BoxProps['backgroundColor'];\n}>(({ theme, shouldShow, variant, $color }) => {\n  const color = getIn(theme.colors, $color as never, MIXED_BG_COLOR);\n\n  return {\n    position: 'absolute',\n    [variant]: 0,\n    pointerEvents: shouldShow ? 'auto' : 'none',\n    transform: shouldShow ? 'scale(1)' : 'scale(0.5)',\n    opacity: shouldShow ? 1 : 0,\n    transitionTimingFunction: `${theme.motion.easing.standard.revealing}`,\n    transitionDuration: `${makeMotionTime(theme.motion.duration.xquick)}`,\n    transitionProperty: 'opacity, transform',\n    zIndex: 1,\n    ':before': {\n      content: \"''\",\n      pointerEvents: 'none',\n      position: 'absolute',\n      [variant]: 0,\n      top: makeSize(GRADIENT_OFFSET),\n      bottom: makeSize(GRADIENT_OFFSET),\n      width: makeSize(GRADIENT_WIDTH),\n      background: `linear-gradient(to ${variant}, transparent 0%, ${color} 30%, ${color} 100%);`,\n    },\n  };\n});\n\nconst TabNav = ({\n  children,\n  ...styledProps\n}: TabNavProps & StyledPropsBlade): React.ReactElement => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const hasOverflow = useHasOverflow(ref);\n  const [scrollStatus, setScrollStatus] = React.useState<'start' | 'end' | 'middle'>('start');\n  const { backgroundColor } = useTopNavContext();\n\n  // Check if the scroll is at start, end or middle\n  const handleScrollStatus = React.useCallback(\n    (e: React.UIEvent<HTMLDivElement, UIEvent>): void => {\n      const target = e.target as HTMLDivElement;\n      const isAtStart = target.scrollLeft === 0;\n      const isAtEnd = approximatelyEqual(\n        target.scrollLeft,\n        target.scrollWidth - target.offsetWidth,\n      );\n\n      if (isAtStart) {\n        setScrollStatus('start');\n      } else if (isAtEnd) {\n        setScrollStatus('end');\n      } else {\n        setScrollStatus('middle');\n      }\n    },\n    [],\n  );\n\n  const scrollRight = (): void => {\n    if (!ref.current) return;\n    ref.current.scrollBy({\n      behavior: 'smooth',\n      left: SCROLL_AMOUNT,\n    });\n  };\n\n  const scrollLeft = (): void => {\n    if (!ref.current) return;\n    ref.current.scrollBy({\n      behavior: 'smooth',\n      left: -SCROLL_AMOUNT,\n    });\n  };\n\n  return (\n    <TabNavContext.Provider value={{ containerRef: ref, hasOverflow }}>\n      <BaseBox\n        as=\"nav\"\n        display=\"flex\"\n        width=\"100%\"\n        alignItems=\"center\"\n        position=\"relative\"\n        marginBottom={makeSize(OFFSET_BOTTOM)}\n        {...getStyledProps(styledProps)}\n        {...metaAttribute({ name: MetaConstants.TabNav })}\n      >\n        <GradientOverlay\n          variant=\"left\"\n          $color={backgroundColor}\n          shouldShow={hasOverflow && scrollStatus !== 'start'}\n        >\n          <Button\n            size=\"xsmall\"\n            variant=\"tertiary\"\n            icon={ChevronLeftIcon}\n            accessibilityLabel=\"Scroll Left\"\n            onClick={scrollLeft}\n          />\n        </GradientOverlay>\n        <ScrollableArea\n          ref={ref}\n          onScroll={handleScrollStatus}\n          display=\"flex\"\n          width=\"100%\"\n          position=\"relative\"\n          whiteSpace=\"nowrap\"\n          gap=\"spacing.0\"\n          overflowY=\"hidden\"\n          overflowX=\"auto\"\n        >\n          <BaseBox display=\"flex\" flexDirection=\"row\" width=\"max-content\">\n            {React.Children.map(children, (child, index) => {\n              return (\n                <>\n                  {index > 0 ? (\n                    <Divider\n                      margin=\"auto\"\n                      variant=\"muted\"\n                      orientation=\"vertical\"\n                      height={makeSize(size[16])}\n                    />\n                  ) : null}\n                  {child}\n                </>\n              );\n            })}\n          </BaseBox>\n        </ScrollableArea>\n        <GradientOverlay\n          variant=\"right\"\n          $color={backgroundColor}\n          shouldShow={hasOverflow && scrollStatus !== 'end'}\n        >\n          <Button\n            size=\"xsmall\"\n            variant=\"tertiary\"\n            icon={ChevronRightIcon}\n            accessibilityLabel=\"Scroll Right\"\n            onClick={scrollRight}\n          />\n        </GradientOverlay>\n      </BaseBox>\n    </TabNavContext.Provider>\n  );\n};\n\nexport { TabNav };\n"],"names":["GRADIENT_WIDTH","GRADIENT_OFFSET","OFFSET_BOTTOM","SCROLL_AMOUNT","ScrollableArea","styled","BaseBox","withConfig","displayName","componentId","display","GradientOverlay","_ref","theme","shouldShow","variant","$color","color","getIn","colors","MIXED_BG_COLOR","_defineProperty","position","concat","motion","easing","standard","revealing","makeMotionTime","duration","xquick","content","pointerEvents","makeSize","TabNav","_ref3","children","styledProps","_objectWithoutProperties","_excluded","ref","React","useRef","hasOverflow","useHasOverflow","_React$useState","useState","_React$useState2","_slicedToArray","scrollStatus","setScrollStatus","_useTopNavContext","useTopNavContext","backgroundColor","handleScrollStatus","useCallback","e","target","isAtStart","scrollLeft","isAtEnd","approximatelyEqual","scrollWidth","offsetWidth","scrollRight","current","scrollBy","behavior","left","_jsx","TabNavContext","Provider","value","containerRef","_jsxs","_objectSpread","as","width","alignItems","marginBottom","getStyledProps","metaAttribute","name","MetaConstants","Button","size","icon","ChevronLeftIcon","accessibilityLabel","onClick","onScroll","whiteSpace","gap","overflowY","overflowX","flexDirection","Children","map","child","index","_Fragment","Divider","margin","orientation","height","ChevronRightIcon"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import '../../../utils/logger/index.js';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+
+var TabNavContext = /*#__PURE__*/React__default.createContext(null);
+var useTabNavContext = function useTabNavContext() {
+  var context = React__default.useContext(TabNavContext);
+  if (!context) {
+    throwBladeError({
+      message: 'useTabNavContext must be used within a TabNavProvider',
+      moduleName: 'TabNav'
+    });
+  }
+  return context;
+};
+
+export { TabNavContext, useTabNavContext };
+//# sourceMappingURL=TabNavContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavContext.js","sources":["../../../../../../../src/components/TopNav/TabNav/TabNavContext.tsx"],"sourcesContent":["import React from 'react';\nimport { throwBladeError } from '~utils/logger';\n\ntype TabNavContextProps = {\n  containerRef: React.RefObject<HTMLDivElement>;\n  hasOverflow: boolean;\n};\nconst TabNavContext = React.createContext<TabNavContextProps | null>(null);\n\nconst useTabNavContext = (): TabNavContextProps => {\n  const context = React.useContext(TabNavContext);\n  if (!context) {\n    throwBladeError({\n      message: 'useTabNavContext must be used within a TabNavProvider',\n      moduleName: 'TabNav',\n    });\n  }\n  return context!;\n};\n\nexport { TabNavContext, useTabNavContext };\n"],"names":["TabNavContext","React","createContext","useTabNavContext","context","useContext","throwBladeError","message","moduleName"],"mappings":";;;;AAOA,IAAMA,aAAa,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,EAAC;AAE1E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,GAA6B;AACjD,EAAA,IAAMC,OAAO,GAAGH,cAAK,CAACI,UAAU,CAACL,aAAa,CAAC,CAAA;EAC/C,IAAI,CAACI,OAAO,EAAE;AACZE,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAE,uDAAuD;AAChEC,MAAAA,UAAU,EAAE,QAAA;AACd,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,OAAO,CAAA;AAChB;;;;"}

package/build/lib/web/development/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/development/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/development/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/development/components/TopNav/TabNav/index.js.map

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

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

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

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

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

package/build/lib/web/development/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/development/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;;;;"}