@razorpay/blade 11.19.1 → 11.21.0

package/build/lib/web/production/components/SideNav/SideNavItems/SideNavLink.web.js

@@ -0,0 +1,348 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'react';
+import styled from 'styled-components';
+import { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useSideNav, useNavLink, NavLinkContext } from '../SideNavContext.js';
+import { classes, NAV_ITEM_HEIGHT, getNavItemTransition } from '../tokens.js';
+import { TooltipifyNavItem } from './TooltipifyNavItem.js';
+import '../../Box/index.js';
+import '../../../utils/index.js';
+import '../../Typography/BaseText/index.js';
+import '../../Icons/index.js';
+import '../../Box/BaseBox/index.js';
+import { useCollapsible } from '../../Collapsible/CollapsibleContext.js';
+import '../../Collapsible/index.js';
+import '../../../utils/makeAccessible/index.js';
+import { useFirstRender } from '../../../utils/useFirstRender.js';
+import '../../../utils/getFocusRingStyles/index.js';
+import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
+import '../../../utils/logger/index.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
+import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+import { Box } from '../../Box/Box.js';
+import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
+import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
+import ChevronUpIcon from '../../Icons/ChevronUpIcon/ChevronUpIcon.js';
+import ChevronDownIcon from '../../Icons/ChevronDownIcon/ChevronDownIcon.js';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { Collapsible } from '../../Collapsible/Collapsible.js';
+import { CollapsibleBody } from '../../Collapsible/CollapsibleBody.js';
+import ChevronRightIcon from '../../Icons/ChevronRightIcon/ChevronRightIcon.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SHOW_ON_LINK_HOVER = classes.SHOW_ON_LINK_HOVER,
+  HIDE_WHEN_COLLAPSED = classes.HIDE_WHEN_COLLAPSED,
+  STYLED_NAV_LINK = classes.STYLED_NAV_LINK;
+var StyledNavLinkContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavLinkweb__StyledNavLinkContainer",
+  componentId: "sc-1ypwkeo-0"
+})(function (props) {
+  return _defineProperty(_defineProperty(_defineProperty({
+    width: '100%'
+  }, ".".concat(SHOW_ON_LINK_HOVER), {
+    opacity: 0,
+    '&:focus-within, &:focus-visible': {
+      opacity: 1
+    }
+  }), '&:hover', _defineProperty(_defineProperty({}, ".".concat(SHOW_ON_LINK_HOVER), {
+    opacity: 1
+  }), ".".concat(STYLED_NAV_LINK), {
+    color: props.theme.colors.interactive.text.gray.normal,
+    backgroundColor: props.theme.colors.interactive.background.gray["default"]
+  })), ".".concat(STYLED_NAV_LINK), {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: makeSize(NAV_ITEM_HEIGHT),
+    width: '100%',
+    textDecoration: 'none',
+    overflow: 'hidden',
+    flexWrap: 'nowrap',
+    cursor: 'pointer',
+    padding: "".concat(makeSpace(props.theme.spacing[0]), " ").concat(makeSpace(props.theme.spacing[4])),
+    margin: "".concat(makeSpace(props.theme.spacing[1]), " ").concat(makeSpace(props.theme.spacing[0])),
+    color: props.theme.colors.interactive.text.gray.subtle,
+    borderRadius: props.theme.border.radius.medium,
+    borderWidth: makeBorderSize(props.theme.border.width.none),
+    backgroundColor: props.theme.colors.transparent,
+    transition: getNavItemTransition(props.theme),
+    '&[aria-current]': {
+      color: props.theme.colors.interactive.text.primary.subtle,
+      backgroundColor: props.theme.colors.interactive.background.primary.faded
+    },
+    '&[aria-current]:hover': {
+      color: props.theme.colors.interactive.text.primary.normal,
+      backgroundColor: props.theme.colors.interactive.background.primary.fadedHighlighted
+    },
+    '&:focus-visible': _objectSpread({}, getFocusRingStyles({
+      theme: props.theme
+    }))
+  });
+});
+var NavLinkIconTitle = function NavLinkIconTitle(_ref2) {
+  var Icon = _ref2.icon,
+    title = _ref2.title,
+    titleSuffix = _ref2.titleSuffix,
+    isL1Item = _ref2.isL1Item;
+  return /*#__PURE__*/jsxs(Box, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "spacing.3",
+    children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      children: /*#__PURE__*/jsx(Icon, {
+        size: "medium",
+        color: "currentColor"
+      })
+    }) : null, /*#__PURE__*/jsx(BaseText, {
+      truncateAfterLines: 1,
+      color: "currentColor",
+      fontWeight: "medium",
+      fontSize: 100,
+      lineHeight: 100,
+      as: "p",
+      className: isL1Item ? HIDE_WHEN_COLLAPSED : '',
+      children: title
+    }), titleSuffix ? /*#__PURE__*/jsx(BaseBox, {
+      display: "flex",
+      alignItems: "center",
+      children: titleSuffix
+    }) : null]
+  });
+};
+var L3Trigger = function L3Trigger(_ref3) {
+  var title = _ref3.title,
+    icon = _ref3.icon,
+    as = _ref3.as,
+    href = _ref3.href,
+    target = _ref3.target,
+    titleSuffix = _ref3.titleSuffix,
+    tooltip = _ref3.tooltip;
+  var _useCollapsible = useCollapsible(),
+    onExpandChange = _useCollapsible.onExpandChange,
+    isExpanded = _useCollapsible.isExpanded,
+    collapsibleBodyId = _useCollapsible.collapsibleBodyId;
+  var toggleCollapse = function toggleCollapse() {
+    return onExpandChange(!isExpanded);
+  };
+  var iconProps = {
+    size: 'medium',
+    color: 'currentColor'
+  };
+  return /*#__PURE__*/jsx(TooltipifyNavItem, {
+    tooltip: tooltip,
+    children: /*#__PURE__*/jsx(StyledNavLinkContainer, {
+      children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+        className: STYLED_NAV_LINK,
+        as: href ? as : 'button',
+        to: href,
+        target: target,
+        onClick: toggleCollapse
+      }, makeAccessible({
+        expanded: isExpanded,
+        controls: collapsibleBodyId
+      })), {}, {
+        children: [/*#__PURE__*/jsx(NavLinkIconTitle, {
+          title: title,
+          icon: icon,
+          isL1Item: false,
+          titleSuffix: titleSuffix
+        }), /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          alignItems: "center",
+          children: isExpanded ? /*#__PURE__*/jsx(ChevronUpIcon, _objectSpread({}, iconProps)) : /*#__PURE__*/jsx(ChevronDownIcon, _objectSpread({}, iconProps))
+        })]
+      }))
+    })
+  });
+};
+
+/**
+ * This is the curved line that appears when you select L3 item
+ */
+var CurvedVerticalLine = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavLinkweb__CurvedVerticalLine",
+  componentId: "sc-1ypwkeo-1"
+})(function (props) {
+  var _props$theme = props.theme,
+    colors = _props$theme.colors,
+    border = _props$theme.border,
+    spacing = _props$theme.spacing;
+  return {
+    borderWidth: makeBorderSize(props.theme.border.width.thin),
+    borderColor: "".concat(colors.transparent, " ").concat(colors.transparent, " ").concat(colors.surface.border.primary.muted, " ").concat(colors.surface.border.primary.muted),
+    borderStyle: 'solid',
+    borderRadius: "".concat(makeBorderSize(border.radius.none), " ").concat(makeBorderSize(border.radius.none), " ").concat(makeBorderSize(border.radius.none), " ").concat(makeBorderSize(border.radius.medium)),
+    // We set veritical line infinitely tall (full size of screen) and then hide the overflowing part from top
+    height: '100vh',
+    position: 'absolute',
+    // We want the active line to be positioned in the middle of item's height thus divide by 2
+    top: "calc(-100vh + ".concat(makeSize(NAV_ITEM_HEIGHT / 2), ")"),
+    width: makeSpace(spacing[3]),
+    left: makeSpace(-spacing[3])
+  };
+});
+var SideNavLink = function SideNavLink(_ref4) {
+  var title = _ref4.title,
+    href = _ref4.href,
+    children = _ref4.children,
+    titleSuffix = _ref4.titleSuffix,
+    trailing = _ref4.trailing,
+    isActive = _ref4.isActive,
+    icon = _ref4.icon,
+    tooltip = _ref4.tooltip,
+    as = _ref4.as,
+    target = _ref4.target;
+  var _useSideNav = useSideNav(),
+    l2PortalContainerRef = _useSideNav.l2PortalContainerRef,
+    onLinkActiveChange = _useSideNav.onLinkActiveChange,
+    closeMobileNav = _useSideNav.closeMobileNav,
+    isL1Collapsed = _useSideNav.isL1Collapsed,
+    setIsL1Collapsed = _useSideNav.setIsL1Collapsed;
+  var _useNavLink = useNavLink(),
+    _prevLevel = _useNavLink.level;
+  var prevLevel = _prevLevel !== null && _prevLevel !== void 0 ? _prevLevel : 0;
+  var currentLevel = prevLevel + 1;
+  var isL2Trigger = Boolean(children) && currentLevel === 1;
+  var isL3Trigger = Boolean(children) && currentLevel === 2;
+  if (false) {
+    if (Boolean(children) && currentLevel >= 3) {
+      throwBladeError({
+        message: 'SideNav only supports nesting upto L3 but L4 nesting was found. Check the nesting of your SideNavLevel items',
+        moduleName: 'SideNavLink'
+      });
+    }
+  }
+  var isFirstRender = useFirstRender();
+  var _useFloating = useFloating({
+      open: isActive
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  useIsomorphicLayoutEffect(function () {
+    onLinkActiveChange === null || onLinkActiveChange === void 0 ? void 0 : onLinkActiveChange({
+      level: currentLevel,
+      title: title,
+      isActive: Boolean(isActive),
+      isL2Trigger: isL2Trigger,
+      isFirstRender: isFirstRender
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isActive]);
+  return /*#__PURE__*/jsx(NavLinkContext.Provider, {
+    value: {
+      level: currentLevel,
+      title: title
+    },
+    children: isL3Trigger ? /*#__PURE__*/jsxs(Collapsible, {
+      defaultIsExpanded: isActive,
+      _dangerouslyDisableValidations: true,
+      _shouldApplyWidthRestrictions: false,
+      children: [/*#__PURE__*/jsx(L3Trigger, {
+        title: title,
+        icon: icon,
+        as: as,
+        href: href,
+        titleSuffix: titleSuffix
+      }), /*#__PURE__*/jsx(CollapsibleBody, {
+        width: "100%",
+        _hasMargin: false,
+        children: /*#__PURE__*/jsx(Box, {
+          position: "relative",
+          children: children
+        })
+      })]
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(StyledNavLinkContainer, {
+        position: "relative",
+        children: [/*#__PURE__*/jsx(TooltipifyNavItem, {
+          tooltip: tooltip,
+          children: /*#__PURE__*/jsxs(BaseBox, {
+            className: STYLED_NAV_LINK,
+            as: as !== null && as !== void 0 ? as : 'a',
+            to: href,
+            href: as ? undefined : href,
+            target: target,
+            ref: refs.setReference,
+            onClick: function onClick() {
+              // Close the mobile nav when item is clicked and its not trigger for next menu
+              if (!isL2Trigger) {
+                closeMobileNav === null || closeMobileNav === void 0 ? void 0 : closeMobileNav();
+              }
+              if (isActive) {
+                onLinkActiveChange === null || onLinkActiveChange === void 0 ? void 0 : onLinkActiveChange({
+                  level: currentLevel,
+                  title: title,
+                  isActive: Boolean(isActive),
+                  isL2Trigger: isL2Trigger,
+                  isFirstRender: false
+                });
+              }
+            },
+            onFocus: function onFocus(e) {
+              var _e$target;
+              // FloatinFocusManager by default focusses on last clicked element when you move to different tab and come back to the original tab
+              // Which can make L1 to expand when tabs / windows are changed
+              // Adding focus-visible check ensures this behaviour of closing menus is only applicable when there is visible focus ring on it (while tabbing)
+              var hasFocusRing = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.matches(':focus-visible');
+              if (isL1Collapsed && currentLevel === 1 && hasFocusRing) {
+                setIsL1Collapsed === null || setIsL1Collapsed === void 0 ? void 0 : setIsL1Collapsed(false);
+              }
+            },
+            "aria-current": isActive ? 'page' : undefined,
+            "data-level": currentLevel,
+            "data-l2trigger": isL2Trigger,
+            children: [/*#__PURE__*/jsx(NavLinkIconTitle, {
+              icon: icon,
+              title: title,
+              isL1Item: currentLevel === 1,
+              titleSuffix: titleSuffix
+            }), isL2Trigger ? /*#__PURE__*/jsx(BaseBox, {
+              className: HIDE_WHEN_COLLAPSED,
+              display: "flex",
+              alignItems: "center",
+              children: /*#__PURE__*/jsx(ChevronRightIcon, {
+                size: "medium",
+                color: "currentColor"
+              })
+            }) : null]
+          })
+        }), trailing && !isL2Trigger ? /*#__PURE__*/jsx(BaseBox, {
+          position: "absolute",
+          top: "spacing.0",
+          right: "spacing.2",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          className: "".concat(HIDE_WHEN_COLLAPSED, " ").concat(SHOW_ON_LINK_HOVER),
+          children: trailing
+        }) : null, currentLevel === 3 && isActive ? /*#__PURE__*/jsx(CurvedVerticalLine, {}) : null]
+      }), children ? /*#__PURE__*/jsx(FloatingPortal, {
+        root: l2PortalContainerRef,
+        children: isActive && isL1Collapsed ? /*#__PURE__*/jsx(FloatingFocusManager, {
+          modal: false,
+          context: context,
+          initialFocus: -1,
+          returnFocus: true,
+          children: /*#__PURE__*/jsx(BaseBox, {
+            ref: refs.setFloating,
+            children: children
+          })
+        }) : null
+      }) : null]
+    })
+  });
+};
+
+export { SideNavLink };
+//# sourceMappingURL=SideNavLink.web.js.map

package/build/lib/web/production/components/SideNav/SideNavItems/SideNavLink.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavLink.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavLink.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';\nimport { NavLinkContext, useNavLink, useSideNav } from '../SideNavContext';\nimport type { SideNavLinkProps } from '../types';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport { TooltipifyNavItem } from './TooltipifyNavItem';\nimport { Box } from '~components/Box';\nimport { makeBorderSize, makeSize, makeSpace } from '~utils';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from '~components/Icons';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { Collapsible, CollapsibleBody } from '~components/Collapsible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useFirstRender } from '~utils/useFirstRender';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { throwBladeError } from '~utils/logger';\n\nconst { SHOW_ON_LINK_HOVER, HIDE_WHEN_COLLAPSED, STYLED_NAV_LINK } = classes;\n\nconst StyledNavLinkContainer = styled(BaseBox)((props) => {\n  return {\n    width: '100%',\n    [`.${SHOW_ON_LINK_HOVER}`]: {\n      opacity: 0,\n      '&:focus-within, &:focus-visible': {\n        opacity: 1,\n      },\n    },\n    '&:hover': {\n      [`.${SHOW_ON_LINK_HOVER}`]: {\n        opacity: 1,\n      },\n\n      [`.${STYLED_NAV_LINK}`]: {\n        color: props.theme.colors.interactive.text.gray.normal,\n        backgroundColor: props.theme.colors.interactive.background.gray.default,\n      },\n    },\n    [`.${STYLED_NAV_LINK}`]: {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      height: makeSize(NAV_ITEM_HEIGHT),\n      width: '100%',\n      textDecoration: 'none',\n      overflow: 'hidden',\n      flexWrap: 'nowrap',\n      cursor: 'pointer',\n      padding: `${makeSpace(props.theme.spacing[0])} ${makeSpace(props.theme.spacing[4])}`,\n      margin: `${makeSpace(props.theme.spacing[1])} ${makeSpace(props.theme.spacing[0])}`,\n      color: props.theme.colors.interactive.text.gray.subtle,\n      borderRadius: props.theme.border.radius.medium,\n      borderWidth: makeBorderSize(props.theme.border.width.none),\n      backgroundColor: props.theme.colors.transparent,\n      transition: getNavItemTransition(props.theme),\n      '&[aria-current]': {\n        color: props.theme.colors.interactive.text.primary.subtle,\n        backgroundColor: props.theme.colors.interactive.background.primary.faded,\n      },\n      '&[aria-current]:hover': {\n        color: props.theme.colors.interactive.text.primary.normal,\n        backgroundColor: props.theme.colors.interactive.background.primary.fadedHighlighted,\n      },\n      '&:focus-visible': {\n        ...getFocusRingStyles({ theme: props.theme }),\n      },\n    },\n  };\n});\n\nconst NavLinkIconTitle = ({\n  icon: Icon,\n  title,\n  titleSuffix,\n  isL1Item,\n}: Pick<SideNavLinkProps, 'title' | 'icon' | 'titleSuffix'> & {\n  isL1Item: boolean;\n}): React.ReactElement => {\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" gap=\"spacing.3\">\n      {Icon ? (\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <Icon size=\"medium\" color=\"currentColor\" />\n        </BaseBox>\n      ) : null}\n      <BaseText\n        truncateAfterLines={1}\n        color=\"currentColor\"\n        fontWeight=\"medium\"\n        fontSize={100}\n        lineHeight={100}\n        as=\"p\"\n        className={isL1Item ? HIDE_WHEN_COLLAPSED : ''}\n      >\n        {title}\n      </BaseText>\n      {titleSuffix ? (\n        <BaseBox display=\"flex\" alignItems=\"center\">\n          {titleSuffix}\n        </BaseBox>\n      ) : null}\n    </Box>\n  );\n};\n\nconst L3Trigger = ({\n  title,\n  icon,\n  as,\n  href,\n  target,\n  titleSuffix,\n  tooltip,\n}: Pick<\n  SideNavLinkProps,\n  'title' | 'icon' | 'as' | 'href' | 'titleSuffix' | 'tooltip' | 'target'\n>): React.ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const iconProps = {\n    size: 'medium',\n    color: 'currentColor',\n  } as const;\n\n  return (\n    <TooltipifyNavItem tooltip={tooltip}>\n      <StyledNavLinkContainer>\n        <BaseBox\n          className={STYLED_NAV_LINK}\n          as={href ? as : 'button'}\n          to={href}\n          target={target}\n          onClick={toggleCollapse}\n          {...makeAccessible({ expanded: isExpanded, controls: collapsibleBodyId })}\n        >\n          <NavLinkIconTitle title={title} icon={icon} isL1Item={false} titleSuffix={titleSuffix} />\n          <BaseBox display=\"flex\" alignItems=\"center\">\n            {isExpanded ? <ChevronUpIcon {...iconProps} /> : <ChevronDownIcon {...iconProps} />}\n          </BaseBox>\n        </BaseBox>\n      </StyledNavLinkContainer>\n    </TooltipifyNavItem>\n  );\n};\n\n/**\n * This is the curved line that appears when you select L3 item\n */\nconst CurvedVerticalLine = styled(BaseBox)((props) => {\n  const { colors, border, spacing } = props.theme;\n  return {\n    borderWidth: makeBorderSize(props.theme.border.width.thin),\n    borderColor: `${colors.transparent} ${colors.transparent} ${colors.surface.border.primary.muted} ${colors.surface.border.primary.muted}`,\n    borderStyle: 'solid',\n    borderRadius: `${makeBorderSize(border.radius.none)} ${makeBorderSize(\n      border.radius.none,\n    )} ${makeBorderSize(border.radius.none)} ${makeBorderSize(border.radius.medium)}`,\n    // We set veritical line infinitely tall (full size of screen) and then hide the overflowing part from top\n    height: '100vh',\n    position: 'absolute',\n    // We want the active line to be positioned in the middle of item's height thus divide by 2\n    top: `calc(-100vh + ${makeSize(NAV_ITEM_HEIGHT / 2)})`,\n    width: makeSpace(spacing[3]),\n    left: makeSpace(-spacing[3]),\n  };\n});\n\nconst SideNavLink = ({\n  title,\n  href,\n  children,\n  titleSuffix,\n  trailing,\n  isActive,\n  icon,\n  tooltip,\n  as,\n  target,\n}: SideNavLinkProps): React.ReactElement => {\n  const {\n    l2PortalContainerRef,\n    onLinkActiveChange,\n    closeMobileNav,\n    isL1Collapsed,\n    setIsL1Collapsed,\n  } = useSideNav();\n  const { level: _prevLevel } = useNavLink();\n  const prevLevel = _prevLevel ?? 0;\n  const currentLevel = prevLevel + 1;\n  const isL2Trigger = Boolean(children) && currentLevel === 1;\n  const isL3Trigger = Boolean(children) && currentLevel === 2;\n\n  if (__DEV__) {\n    if (Boolean(children) && currentLevel >= 3) {\n      throwBladeError({\n        message:\n          'SideNav only supports nesting upto L3 but L4 nesting was found. Check the nesting of your SideNavLevel items',\n        moduleName: 'SideNavLink',\n      });\n    }\n  }\n\n  const isFirstRender = useFirstRender();\n\n  const { refs, context } = useFloating({\n    open: isActive,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    onLinkActiveChange?.({\n      level: currentLevel,\n      title,\n      isActive: Boolean(isActive),\n      isL2Trigger,\n      isFirstRender,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isActive]);\n\n  return (\n    <NavLinkContext.Provider value={{ level: currentLevel, title }}>\n      {isL3Trigger ? (\n        <Collapsible\n          defaultIsExpanded={isActive}\n          _dangerouslyDisableValidations={true}\n          _shouldApplyWidthRestrictions={false}\n        >\n          <L3Trigger title={title} icon={icon} as={as} href={href} titleSuffix={titleSuffix} />\n          <CollapsibleBody width=\"100%\" _hasMargin={false}>\n            <Box position=\"relative\">{children}</Box>\n          </CollapsibleBody>\n        </Collapsible>\n      ) : (\n        <>\n          <StyledNavLinkContainer position=\"relative\">\n            <TooltipifyNavItem tooltip={tooltip}>\n              <BaseBox\n                className={STYLED_NAV_LINK}\n                as={as ?? 'a'}\n                to={href}\n                href={as ? undefined : href}\n                target={target}\n                ref={refs.setReference}\n                onClick={() => {\n                  // Close the mobile nav when item is clicked and its not trigger for next menu\n                  if (!isL2Trigger) {\n                    closeMobileNav?.();\n                  }\n\n                  if (isActive) {\n                    onLinkActiveChange?.({\n                      level: currentLevel,\n                      title,\n                      isActive: Boolean(isActive),\n                      isL2Trigger,\n                      isFirstRender: false,\n                    });\n                  }\n                }}\n                onFocus={(e: { target: HTMLDivElement }) => {\n                  // FloatinFocusManager by default focusses on last clicked element when you move to different tab and come back to the original tab\n                  // Which can make L1 to expand when tabs / windows are changed\n                  // Adding focus-visible check ensures this behaviour of closing menus is only applicable when there is visible focus ring on it (while tabbing)\n                  const hasFocusRing = e.target?.matches(':focus-visible');\n                  if (isL1Collapsed && currentLevel === 1 && hasFocusRing) {\n                    setIsL1Collapsed?.(false);\n                  }\n                }}\n                aria-current={isActive ? 'page' : undefined}\n                data-level={currentLevel}\n                data-l2trigger={isL2Trigger}\n              >\n                <NavLinkIconTitle\n                  icon={icon}\n                  title={title}\n                  isL1Item={currentLevel === 1}\n                  titleSuffix={titleSuffix}\n                />\n                {isL2Trigger ? (\n                  <BaseBox className={HIDE_WHEN_COLLAPSED} display=\"flex\" alignItems=\"center\">\n                    <ChevronRightIcon size=\"medium\" color=\"currentColor\" />\n                  </BaseBox>\n                ) : null}\n              </BaseBox>\n            </TooltipifyNavItem>\n            {trailing && !isL2Trigger ? (\n              <BaseBox\n                position=\"absolute\"\n                top=\"spacing.0\"\n                right=\"spacing.2\"\n                height=\"100%\"\n                display=\"flex\"\n                alignItems=\"center\"\n                className={`${HIDE_WHEN_COLLAPSED} ${SHOW_ON_LINK_HOVER}`}\n              >\n                {trailing}\n              </BaseBox>\n            ) : null}\n            {currentLevel === 3 && isActive ? <CurvedVerticalLine /> : null}\n          </StyledNavLinkContainer>\n\n          {children ? (\n            <FloatingPortal root={l2PortalContainerRef}>\n              {isActive && isL1Collapsed ? (\n                <FloatingFocusManager modal={false} context={context} initialFocus={-1} returnFocus>\n                  <BaseBox ref={refs.setFloating}>{children}</BaseBox>\n                </FloatingFocusManager>\n              ) : null}\n            </FloatingPortal>\n          ) : null}\n        </>\n      )}\n    </NavLinkContext.Provider>\n  );\n};\n\nexport { SideNavLink };\n"],"names":["SHOW_ON_LINK_HOVER","classes","HIDE_WHEN_COLLAPSED","STYLED_NAV_LINK","StyledNavLinkContainer","styled","BaseBox","withConfig","displayName","componentId","props","_defineProperty","width","concat","opacity","color","theme","colors","interactive","text","gray","normal","backgroundColor","background","position","display","flexDirection","alignItems","justifyContent","height","makeSize","NAV_ITEM_HEIGHT","textDecoration","overflow","flexWrap","cursor","padding","makeSpace","spacing","margin","subtle","borderRadius","border","radius","medium","borderWidth","makeBorderSize","none","transparent","transition","getNavItemTransition","primary","faded","fadedHighlighted","_objectSpread","getFocusRingStyles","NavLinkIconTitle","_ref2","Icon","icon","title","titleSuffix","isL1Item","_jsxs","Box","gap","children","_jsx","size","BaseText","truncateAfterLines","fontWeight","fontSize","lineHeight","as","className","L3Trigger","_ref3","href","target","tooltip","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","toggleCollapse","iconProps","TooltipifyNavItem","to","onClick","makeAccessible","expanded","controls","ChevronUpIcon","ChevronDownIcon","CurvedVerticalLine","_props$theme","thin","borderColor","surface","muted","borderStyle","top","left","SideNavLink","_ref4","trailing","isActive","_useSideNav","useSideNav","l2PortalContainerRef","onLinkActiveChange","closeMobileNav","isL1Collapsed","setIsL1Collapsed","_useNavLink","useNavLink","_prevLevel","level","prevLevel","currentLevel","isL2Trigger","Boolean","isL3Trigger","throwBladeError","message","moduleName","isFirstRender","useFirstRender","_useFloating","useFloating","open","refs","context","useIsomorphicLayoutEffect","NavLinkContext","Provider","value","Collapsible","defaultIsExpanded","_dangerouslyDisableValidations","_shouldApplyWidthRestrictions","CollapsibleBody","_hasMargin","_Fragment","undefined","ref","setReference","onFocus","e","_e$target","hasFocusRing","matches","ChevronRightIcon","right","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","setFloating"],"mappings":"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"}

package/build/lib/web/production/components/SideNav/SideNavItems/TooltipifyNavItem.js

@@ -0,0 +1,22 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'react';
+import '../../Tooltip/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../../Tooltip/Tooltip.web.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TooltipifyNavItem = function TooltipifyNavItem(_ref) {
+  var children = _ref.children,
+    tooltip = _ref.tooltip;
+  if (!tooltip) {
+    return children;
+  }
+  return /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
+    placement: "top",
+    children: children
+  }));
+};
+
+export { TooltipifyNavItem };
+//# sourceMappingURL=TooltipifyNavItem.js.map

package/build/lib/web/production/components/SideNav/SideNavItems/TooltipifyNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipifyNavItem.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/TooltipifyNavItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { SideNavLinkProps } from '../types';\nimport { Tooltip } from '~components/Tooltip';\n\nconst TooltipifyNavItem = ({\n  children,\n  tooltip,\n}: {\n  children: React.ReactElement;\n  tooltip: SideNavLinkProps['tooltip'];\n}): React.ReactElement => {\n  if (!tooltip) {\n    return children;\n  }\n\n  return (\n    <Tooltip {...tooltip} placement=\"top\">\n      {children}\n    </Tooltip>\n  );\n};\n\nexport { TooltipifyNavItem };\n"],"names":["TooltipifyNavItem","_ref","children","tooltip","_jsx","Tooltip","_objectSpread","placement"],"mappings":";;;;;;;;AAIA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA,EAMG;AAAA,EAAA,IALxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,OAAO,GAAAF,IAAA,CAAPE,OAAO,CAAA;EAKP,IAAI,CAACA,OAAO,EAAE;AACZ,IAAA,OAAOD,QAAQ,CAAA;AACjB,GAAA;EAEA,oBACEE,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,KAAKH,OAAO,CAAA,EAAA,EAAA,EAAA;AAAEI,IAAAA,SAAS,EAAC,KAAK;AAAAL,IAAAA,QAAA,EAClCA,QAAAA;AAAQ,GAAA,CACF,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/SideNav/SideNavLevel.web.js

@@ -0,0 +1,65 @@
+import 'react';
+import { useNavLink } from './SideNavContext.js';
+import { COLLAPSED_L1_WIDTH } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import '../../utils/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { Text } from '../Typography/Text/Text.js';
+
+var SideNavLevel = function SideNavLevel(_ref) {
+  var children = _ref.children;
+  var _useNavLink = useNavLink(),
+    _prevLevel = _useNavLink.level,
+    headingTitle = _useNavLink.title;
+  var prevLevel = _prevLevel !== null && _prevLevel !== void 0 ? _prevLevel : 0;
+  var currentLevel = prevLevel + 1;
+  return /*#__PURE__*/jsxs(BaseBox, {
+    marginLeft: currentLevel === 3 ? {
+      base: 'spacing.7',
+      m: 'spacing.6'
+    } : {
+      base: 'spacing.0',
+      m: makeSize(COLLAPSED_L1_WIDTH)
+    }
+    // When we're in level 2 or 3, we want to stop propagation of hover from its items.
+    // L1 is only expected to open / close on hover of L1 menu and L1 items
+    ,
+    onMouseOver: function onMouseOver(e) {
+      e.stopPropagation();
+    }
+    // Although we don't use `onMouseOut` on SideNav, keeping it here in case we start using it in future as stopping propagation in child
+    // is expected behaviour for us. Checkout https://react.dev/reference/react-dom/createPortal#caveats
+    ,
+    onMouseOut: function onMouseOut(e) {
+      e.stopPropagation();
+    },
+    children: [currentLevel === 2 && headingTitle ? /*#__PURE__*/jsx(BaseBox
+    // In mobile, we use DrawerHeader for this heading
+    , {
+      display: {
+        base: 'none',
+        m: 'block'
+      },
+      padding: "spacing.4",
+      borderBottomWidth: "thin",
+      borderBottomColor: "surface.border.gray.muted",
+      children: /*#__PURE__*/jsx(Text, {
+        size: "large",
+        weight: "semibold",
+        children: headingTitle
+      })
+    }) : null, /*#__PURE__*/jsx(BaseBox, {
+      padding: {
+        base: 'spacing.0',
+        m: 'spacing.3'
+      },
+      children: children
+    })]
+  });
+};
+
+export { SideNavLevel };
+//# sourceMappingURL=SideNavLevel.web.js.map

package/build/lib/web/production/components/SideNav/SideNavLevel.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavLevel.web.js","sources":["../../../../../../src/components/SideNav/SideNavLevel.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useNavLink } from './SideNavContext';\nimport { COLLAPSED_L1_WIDTH } from './tokens';\nimport type { SideNavLevelProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\n\nconst SideNavLevel = ({ children }: SideNavLevelProps): React.ReactElement => {\n  const { level: _prevLevel, title: headingTitle } = useNavLink();\n  const prevLevel = _prevLevel ?? 0;\n  const currentLevel = prevLevel + 1;\n  return (\n    <BaseBox\n      marginLeft={\n        currentLevel === 3\n          ? { base: 'spacing.7', m: 'spacing.6' }\n          : { base: 'spacing.0', m: makeSize(COLLAPSED_L1_WIDTH) }\n      }\n      // When we're in level 2 or 3, we want to stop propagation of hover from its items.\n      // L1 is only expected to open / close on hover of L1 menu and L1 items\n      onMouseOver={(e) => {\n        e.stopPropagation();\n      }}\n      // Although we don't use `onMouseOut` on SideNav, keeping it here in case we start using it in future as stopping propagation in child\n      // is expected behaviour for us. Checkout https://react.dev/reference/react-dom/createPortal#caveats\n      onMouseOut={(e) => {\n        e.stopPropagation();\n      }}\n    >\n      {currentLevel === 2 && headingTitle ? (\n        <BaseBox\n          // In mobile, we use DrawerHeader for this heading\n          display={{ base: 'none', m: 'block' }}\n          padding=\"spacing.4\"\n          borderBottomWidth=\"thin\"\n          borderBottomColor=\"surface.border.gray.muted\"\n        >\n          <Text size=\"large\" weight=\"semibold\">\n            {headingTitle}\n          </Text>\n        </BaseBox>\n      ) : null}\n      <BaseBox padding={{ base: 'spacing.0', m: 'spacing.3' }}>{children}</BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { SideNavLevel };\n"],"names":["SideNavLevel","_ref","children","_useNavLink","useNavLink","_prevLevel","level","headingTitle","title","prevLevel","currentLevel","_jsxs","BaseBox","marginLeft","base","m","makeSize","COLLAPSED_L1_WIDTH","onMouseOver","e","stopPropagation","onMouseOut","_jsx","display","padding","borderBottomWidth","borderBottomColor","Text","size","weight"],"mappings":";;;;;;;;;;;AAQA,IAAMA,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAA4D;AAAA,EAAA,IAAtDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC9B,EAAA,IAAAC,WAAA,GAAmDC,UAAU,EAAE;IAAhDC,UAAU,GAAAF,WAAA,CAAjBG,KAAK;IAAqBC,YAAY,GAAAJ,WAAA,CAAnBK,KAAK,CAAA;EAChC,IAAMC,SAAS,GAAGJ,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,UAAU,GAAI,CAAC,CAAA;AACjC,EAAA,IAAMK,YAAY,GAAGD,SAAS,GAAG,CAAC,CAAA;EAClC,oBACEE,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,UAAU,EACRH,YAAY,KAAK,CAAC,GACd;AAAEI,MAAAA,IAAI,EAAE,WAAW;AAAEC,MAAAA,CAAC,EAAE,WAAA;AAAY,KAAC,GACrC;AAAED,MAAAA,IAAI,EAAE,WAAW;MAAEC,CAAC,EAAEC,QAAQ,CAACC,kBAAkB,CAAA;AAAE,KAAA;AAE3D;AACA;AAAA;AACAC,IAAAA,WAAW,EAAE,SAAAA,WAACC,CAAAA,CAAC,EAAK;MAClBA,CAAC,CAACC,eAAe,EAAE,CAAA;AACrB,KAAA;AACA;AACA;AAAA;AACAC,IAAAA,UAAU,EAAE,SAAAA,UAACF,CAAAA,CAAC,EAAK;MACjBA,CAAC,CAACC,eAAe,EAAE,CAAA;KACnB;IAAAlB,QAAA,EAAA,CAEDQ,YAAY,KAAK,CAAC,IAAIH,YAAY,gBACjCe,GAAA,CAACV,OAAAA;AACC;AAAA,MAAA;AACAW,MAAAA,OAAO,EAAE;AAAET,QAAAA,IAAI,EAAE,MAAM;AAAEC,QAAAA,CAAC,EAAE,OAAA;OAAU;AACtCS,MAAAA,OAAO,EAAC,WAAW;AACnBC,MAAAA,iBAAiB,EAAC,MAAM;AACxBC,MAAAA,iBAAiB,EAAC,2BAA2B;MAAAxB,QAAA,eAE7CoB,GAAA,CAACK,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAO;AAACC,QAAAA,MAAM,EAAC,UAAU;AAAA3B,QAAAA,QAAA,EACjCK,YAAAA;OACG,CAAA;AAAC,KACA,CAAC,GACR,IAAI,eACRe,GAAA,CAACV,OAAO,EAAA;AAACY,MAAAA,OAAO,EAAE;AAAEV,QAAAA,IAAI,EAAE,WAAW;AAAEC,QAAAA,CAAC,EAAE,WAAA;OAAc;AAAAb,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAU,CAAC,CAAA;AAAA,GACtE,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/production/components/SideNav/SideNavSection.web.js

@@ -0,0 +1,141 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import styled from 'styled-components';
+import { classes } from './tokens.js';
+import '../Box/index.js';
+import '../Typography/index.js';
+import '../Collapsible/index.js';
+import '../Box/BaseBox/index.js';
+import { useCollapsible } from '../Collapsible/CollapsibleContext.js';
+import '../Icons/index.js';
+import '../../utils/index.js';
+import '../Link/BaseLink/index.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+import BaseLink from '../Link/BaseLink/BaseLink.js';
+import ChevronUpIcon from '../Icons/ChevronUpIcon/ChevronUpIcon.js';
+import ChevronDownIcon from '../Icons/ChevronDownIcon/ChevronDownIcon.js';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Typography/Text/Text.js';
+import { Collapsible } from '../Collapsible/Collapsible.js';
+import { CollapsibleBody } from '../Collapsible/CollapsibleBody.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SideNavTitleDivider = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavSectionweb__SideNavTitleDivider",
+  componentId: "sc-1nb7ytk-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: makeBorderSize(theme.border.width.thicker),
+    width: '100%',
+    background: "linear-gradient(90deg, ".concat(theme.colors.transparent, " 0%, ").concat(theme.colors.surface.border.gray.muted, " 50%, ").concat(theme.colors.transparent, " 100%)")
+  };
+});
+var FullWidthLink = /*#__PURE__*/styled(BaseLink).withConfig({
+  displayName: "SideNavSectionweb__FullWidthLink",
+  componentId: "sc-1nb7ytk-1"
+})(function () {
+  return {
+    width: '100%'
+  };
+});
+var ShowMoreLink = function ShowMoreLink(_ref2) {
+  var collapsedItemsCount = _ref2.collapsedItemsCount;
+  var _useCollapsible = useCollapsible(),
+    isExpanded = _useCollapsible.isExpanded,
+    onExpandChange = _useCollapsible.onExpandChange;
+  var toggleCollapse = function toggleCollapse() {
+    return onExpandChange(!isExpanded);
+  };
+  var linkProps = {
+    size: 'small',
+    color: 'neutral',
+    variant: 'button',
+    onClick: toggleCollapse,
+    marginY: 'spacing.2'
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(BaseBox, {
+      className: classes.SHOW_WHEN_COLLAPSED,
+      width: "100%",
+      justifyContent: "center",
+      children: /*#__PURE__*/jsx(FullWidthLink, _objectSpread(_objectSpread({}, linkProps), {}, {
+        marginX: "spacing.4",
+        icon: isExpanded ? ChevronUpIcon : undefined,
+        iconPosition: "right",
+        children: isExpanded ? "" : "+".concat(collapsedItemsCount)
+      }))
+    }), /*#__PURE__*/jsx(BaseBox, {
+      className: classes.HIDE_WHEN_COLLAPSED,
+      width: "100%",
+      children: /*#__PURE__*/jsx(FullWidthLink, _objectSpread(_objectSpread({}, linkProps), {}, {
+        marginX: "spacing.4",
+        icon: isExpanded ? ChevronUpIcon : ChevronDownIcon,
+        iconPosition: "right",
+        children: isExpanded ? 'Show Less' : "+".concat(collapsedItemsCount, " More")
+      }))
+    })]
+  });
+};
+var StyledSectionTitleContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavSectionweb__StyledSectionTitleContainer",
+  componentId: "sc-1nb7ytk-2"
+})(function (_props) {
+  return _defineProperty({}, ".".concat(classes.COLLAPSED, ":not(.").concat(classes.TRANSITIONING, ") & p"), {
+    // We only make it opacity 0 to maintain the height of the title in collapsed state
+    opacity: 0
+  });
+});
+var SideNavSection = function SideNavSection(_ref4) {
+  var children = _ref4.children,
+    title = _ref4.title,
+    defaultIsExpanded = _ref4.defaultIsExpanded,
+    maxVisibleItems = _ref4.maxVisibleItems,
+    onExpandChange = _ref4.onExpandChange;
+  var totalItemsCount = React__default.Children.count(children);
+  var collapsedItemsCount = maxVisibleItems ? totalItemsCount - maxVisibleItems : undefined;
+  return /*#__PURE__*/jsxs(Box, {
+    paddingY: "spacing.3",
+    children: [title ? /*#__PURE__*/jsxs(StyledSectionTitleContainer, {
+      position: "relative",
+      padding: ['spacing.2', 'spacing.4'],
+      children: [/*#__PURE__*/jsx(Text, {
+        size: "xsmall",
+        weight: "medium",
+        truncateAfterLines: 1,
+        color: "surface.text.gray.muted",
+        children: title === null || title === void 0 ? void 0 : title.toUpperCase()
+      }), /*#__PURE__*/jsx(BaseBox, {
+        className: classes.SHOW_WHEN_COLLAPSED,
+        position: "absolute",
+        top: "50%",
+        margin: "auto",
+        left: "spacing.0",
+        right: "spacing.0",
+        transform: "translateY(-50%)",
+        children: /*#__PURE__*/jsx(SideNavTitleDivider, {})
+      })]
+    }) : null, /*#__PURE__*/jsx(Box, {
+      children: maxVisibleItems ? children.slice(0, maxVisibleItems) : children
+    }), maxVisibleItems ? /*#__PURE__*/jsxs(Collapsible, {
+      direction: "top",
+      _dangerouslyDisableValidations: true,
+      _shouldApplyWidthRestrictions: false,
+      onExpandChange: onExpandChange,
+      defaultIsExpanded: defaultIsExpanded,
+      children: [/*#__PURE__*/jsx(ShowMoreLink, {
+        collapsedItemsCount: collapsedItemsCount
+      }), /*#__PURE__*/jsx(CollapsibleBody, {
+        width: "100%",
+        _hasMargin: false,
+        children: children.slice(maxVisibleItems)
+      })]
+    }) : null]
+  });
+};
+
+export { SideNavSection };
+//# sourceMappingURL=SideNavSection.web.js.map