@razorpay/blade 11.20.0 → 11.21.0

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

@@ -0,0 +1,360 @@
+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 { SideNavContext } from './SideNavContext.js';
+import { classes, COLLAPSED_L1_WIDTH, TRANSITION_CLEANUP_DELAY, HOVER_AGAIN_DELAY, EXPANDED_L1_WIDTH, L1_EXIT_HOVER_DELAY, SKIP_NAV_ID } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import '../Drawer/index.js';
+import { SkipNavLink, SkipNavContent } from '../SkipNav/SkipNav.web.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../Box/styledProps/index.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 { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { Drawer } from '../Drawer/Drawer.web.js';
+import { DrawerHeader, DrawerBody } from '../Drawer/DrawerSubcomponents.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+
+var _excluded = ["children", "isOpen", "onDismiss", "banner", "testID"];
+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; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var COLLAPSED = classes.COLLAPSED,
+  SHOW_WHEN_COLLAPSED = classes.SHOW_WHEN_COLLAPSED,
+  HIDE_WHEN_COLLAPSED = classes.HIDE_WHEN_COLLAPSED,
+  TRANSITIONING = classes.TRANSITIONING,
+  L1_ITEM_WRAPPER = classes.L1_ITEM_WRAPPER;
+var MobileL1Container = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavweb__MobileL1Container",
+  componentId: "sc-1obm5ij-0"
+})(function () {
+  return _defineProperty({}, ".".concat(SHOW_WHEN_COLLAPSED), {
+    display: 'none'
+  });
+});
+var StyledL1Menu = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavweb__StyledL1Menu",
+  componentId: "sc-1obm5ij-1"
+})(function (props) {
+  var moderate = makeMotionTime(props.theme.motion.duration.moderate);
+  var gentle = makeMotionTime(props.theme.motion.duration.gentle);
+  var easing = props.theme.motion.easing;
+  var l1Expand = "width ".concat(gentle, " ").concat(easing.entrance.revealing);
+  var l1Collapse = "width ".concat(moderate, " ").concat(easing.exit.revealing);
+  return _defineProperty(_defineProperty(_defineProperty({
+    width: '100%',
+    transition: l1Expand
+  }, "& > .".concat(L1_ITEM_WRAPPER), {
+    padding: makeSpace(props.theme.spacing[3])
+  }), ".".concat(SHOW_WHEN_COLLAPSED), {
+    display: 'none'
+  }), "&.".concat(COLLAPSED), _defineProperty(_defineProperty(_defineProperty({
+    width: makeSize(COLLAPSED_L1_WIDTH),
+    transition: l1Collapse
+  }, "& > .".concat(L1_ITEM_WRAPPER), {
+    padding: "".concat(makeSpace(props.theme.spacing[3]), " ").concat(makeSpace(props.theme.spacing[3]))
+  }), "&:not(.".concat(TRANSITIONING, ") .").concat(HIDE_WHEN_COLLAPSED), {
+    display: 'none'
+  }), "&:not(.".concat(TRANSITIONING, ") .").concat(SHOW_WHEN_COLLAPSED), {
+    display: 'initial'
+  }));
+});
+var getL1MenuClassName = function getL1MenuClassName(_ref3) {
+  var isL1Collapsed = _ref3.isL1Collapsed,
+    isL1Hovered = _ref3.isL1Hovered,
+    isTransitioning = _ref3.isTransitioning;
+  var isMenuCollapsed = isL1Collapsed && !isL1Hovered;
+  if (isMenuCollapsed) {
+    if (isTransitioning) {
+      return "".concat(COLLAPSED, " ").concat(TRANSITIONING);
+    }
+    return COLLAPSED;
+  }
+  return '';
+};
+
+/**
+ * ### SideNav component
+ *
+ * The side navigation is positioned along the left side of the screen that provides quick access to different sections or functionalities of the application.
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)
+ *
+ */
+var SideNav = function SideNav(_ref4) {
+  var children = _ref4.children,
+    isOpen = _ref4.isOpen,
+    onDismiss = _ref4.onDismiss,
+    banner = _ref4.banner,
+    testID = _ref4.testID,
+    styledProps = _objectWithoutProperties(_ref4, _excluded);
+  var l2PortalContainerRef = React__default.useRef(null);
+  var l1ContainerRef = React__default.useRef(null);
+  var timeoutIdsRef = React__default.useRef([]);
+  var mouseOverTimeoutRef = React__default.useRef();
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isL1Collapsed = _React$useState2[0],
+    setIsL1Collapsed = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isMobileL2Open = _React$useState4[0],
+    setIsMobileL2Open = _React$useState4[1];
+  var _React$useState5 = React__default.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isL1Hovered = _React$useState6[0],
+    setIsL1Hovered = _React$useState6[1];
+  var _React$useState7 = React__default.useState(true),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isHoverAgainEnabled = _React$useState8[0],
+    setIsHoverAgainEnabled = _React$useState8[1];
+  var _React$useState9 = React__default.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isTransitioning = _React$useState10[0],
+    setIsTransitioning = _React$useState10[1];
+  var _React$useState11 = React__default.useState(''),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    l2DrawerTitle = _React$useState12[0],
+    setL2DrawerTitle = _React$useState12[1];
+  var isMobile = useIsMobile();
+  var closeMobileNav = function closeMobileNav() {
+    if (isMobile) {
+      setIsMobileL2Open(false);
+      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    }
+  };
+  var cleanupTransition = function cleanupTransition() {
+    var clearTransitionTimeout = setTimeout(function () {
+      if (isTransitioning) {
+        setIsTransitioning(false);
+      }
+    }, TRANSITION_CLEANUP_DELAY);
+    timeoutIdsRef.current.push(clearTransitionTimeout);
+  };
+
+  /**
+   * Handles L1 -> L2 menu changes based on active item
+   */
+  var onLinkActiveChange = function onLinkActiveChange(args) {
+    var isL1ItemActive = args.level === 1 && args.isActive;
+    if (isL1ItemActive) {
+      if (args.isL2Trigger) {
+        // Click on L2 Trigger
+        if (isMobile) {
+          setL2DrawerTitle(args.title);
+          setIsMobileL2Open(true);
+          return;
+        }
+        setIsL1Collapsed(true);
+
+        // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change
+        if (!args.isFirstRender) {
+          setIsTransitioning(true);
+          cleanupTransition();
+          setIsL1Hovered(false);
+          setIsHoverAgainEnabled(false);
+          // For some delay, we disable hover to expand behaviour to avoid buggy flicker when cursor is on L1 while its trying to close
+          var hoverAgainTimeout = setTimeout(function () {
+            setIsHoverAgainEnabled(true);
+          }, HOVER_AGAIN_DELAY);
+          timeoutIdsRef.current.push(hoverAgainTimeout);
+        }
+      } else {
+        // Click on normal L1 Item
+        // eslint-disable-next-line no-lonely-if
+        if (isMobile) {
+          setIsMobileL2Open(false);
+        }
+        // Ensures that if Normal L1 item is clicked, the L1 stays expanded
+        setIsL1Collapsed(false);
+      }
+    }
+  };
+  var contextValue = React__default.useMemo(function () {
+    return {
+      l2PortalContainerRef: l2PortalContainerRef,
+      onLinkActiveChange: onLinkActiveChange,
+      closeMobileNav: closeMobileNav,
+      isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,
+      setIsL1Collapsed: setIsL1Collapsed
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isL1Collapsed, isMobile, isMobileL2Open]);
+  React__default.useEffect(function () {
+    return function () {
+      var _iterator = _createForOfIteratorHelper(timeoutIdsRef.current),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var timeoutId = _step.value;
+          clearTimeout(timeoutId);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      timeoutIdsRef.current = [];
+    };
+  }, []);
+  return /*#__PURE__*/jsx(SideNavContext.Provider, {
+    value: contextValue,
+    children: isMobile && onDismiss ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(Drawer, {
+        isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false,
+        onDismiss: onDismiss,
+        children: [/*#__PURE__*/jsx(DrawerHeader, {
+          title: "Main Menu"
+        }), /*#__PURE__*/jsx(DrawerBody, {
+          children: /*#__PURE__*/jsx(MobileL1Container, _objectSpread(_objectSpread({
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            className: "mobile-l1-container",
+            height: "100%"
+          }, metaAttribute({
+            name: MetaConstants.SideNav,
+            testID: testID
+          })), {}, {
+            children: children
+          }))
+        })]
+      }), /*#__PURE__*/jsxs(Drawer, {
+        isOpen: isMobileL2Open,
+        onDismiss: function onDismiss() {
+          return setIsMobileL2Open(false);
+        },
+        isLazy: false,
+        children: [/*#__PURE__*/jsx(DrawerHeader, {
+          title: l2DrawerTitle
+        }), /*#__PURE__*/jsx(DrawerBody, {
+          children: /*#__PURE__*/jsx(BaseBox, {
+            ref: l2PortalContainerRef
+          })
+        })]
+      })]
+    }) : /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+      position: "fixed",
+      backgroundColor: "surface.background.gray.moderate",
+      height: "100%",
+      top: "spacing.0",
+      left: "spacing.0",
+      display: {
+        base: 'none',
+        m: 'flex'
+      },
+      flexDirection: "column",
+      width: makeSize(EXPANDED_L1_WIDTH),
+      as: "nav"
+    }, metaAttribute({
+      name: MetaConstants.SideNav,
+      testID: testID
+    })), getStyledProps(styledProps)), {}, {
+      children: [banner ? /*#__PURE__*/jsx(BaseBox, {
+        borderBottom: "thin",
+        borderBottomColor: "surface.border.gray.muted",
+        borderRight: "thin",
+        borderRightColor: "surface.border.gray.muted",
+        padding: "spacing.3",
+        maxHeight: "100px",
+        width: "100%",
+        children: banner
+      }) : null, /*#__PURE__*/jsxs(BaseBox, {
+        position: "relative",
+        display: "block",
+        flex: "1",
+        width: "100%",
+        children: [/*#__PURE__*/jsx(BaseBox, {
+          position: "absolute",
+          backgroundColor: "surface.background.gray.moderate",
+          height: "100%",
+          width: "100%",
+          top: "spacing.0",
+          left: "spacing.0",
+          id: "blade-sidenav-l2",
+          borderRightWidth: "thin",
+          borderRightColor: "surface.border.gray.muted",
+          ref: l2PortalContainerRef
+        }), /*#__PURE__*/jsxs(StyledL1Menu, {
+          ref: l1ContainerRef,
+          id: "blade-sidenav-l1",
+          className: getL1MenuClassName({
+            isL1Collapsed: isL1Collapsed,
+            isL1Hovered: isL1Hovered,
+            isTransitioning: isTransitioning
+          }),
+          position: "absolute",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          backgroundColor: "surface.background.gray.moderate",
+          height: "100%",
+          overflow: "hidden",
+          top: "spacing.0",
+          left: "spacing.0",
+          borderRightWidth: "thin",
+          borderRightColor: "surface.border.gray.muted",
+          onTransitionEnd: function onTransitionEnd(e) {
+            // This check ensures transitioning is set to false only when its true
+            // And only the l1Container element's transitions are considered and other transitions of l1 expand or child elements are ignored
+            if (isTransitioning && l1ContainerRef.current === e.target) {
+              setIsTransitioning(false);
+            }
+          }
+          // Hmm you might be wondering, why is `onMouseOver` paired with `onMouseLeave`? A sane person would pair `onMouseOver` with `onMouseOut`, and `onMouseEnter` with `onMouseLeave`
+          // since they are logical equivalents of each other. So why don't we do that? Hold tight, you're in for a ride ☕️.
+          //
+          // 1. In an ideal scenario, we would put `onMouseEnter` and `onMouseLeave` here and expect things to work.
+          // 2. The L2 menu of our SideNav is React Portalled out of the L1 child
+          // 3. React considers its own children as true children for JS events and not DOM children (Checkout React Portal Caveats - https://react.dev/reference/react-dom/createPortal#caveats)
+          // 3. In the next ideal scenario, we would put `e.stopPropagation` on child component of portal like React recommends, except mouseenter, mouseleave events don't propagate at all (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes)
+          // 4. So `onMouseEnter` gets triggered on L2 enter. But we don't want to open L1 menu on L2 hover
+          // 5. Thus we use `onMouseOver` for hover part and call e.stopPropagation in portal child (SideNavLevel).
+          // 6. But in case of unhover/leave, we don't want to trigger mouseOut for all child components individually. We want 1 hover out of L1 menu. Thus we use `onMouseLeave`
+          ,
+          onMouseOver: function onMouseOver() {
+            if (mouseOverTimeoutRef.current) {
+              clearTimeout(mouseOverTimeoutRef.current);
+            }
+            if (isL1Collapsed && isHoverAgainEnabled) {
+              setIsL1Hovered(true);
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            if (isL1Collapsed && isL1Hovered) {
+              mouseOverTimeoutRef.current = setTimeout(function () {
+                setIsL1Hovered(false);
+                setIsTransitioning(true);
+                cleanupTransition();
+              }, L1_EXIT_HOVER_DELAY);
+            }
+          },
+          children: [/*#__PURE__*/jsx(SkipNavLink, {
+            id: SKIP_NAV_ID,
+            _hasBackground: true
+          }), children]
+        }), /*#__PURE__*/jsx(SkipNavContent, {
+          id: SKIP_NAV_ID
+        })]
+      })]
+    }))
+  });
+};
+
+export { SideNav };
+//# sourceMappingURL=SideNav.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.web.js","sources":["../../../../../../src/components/SideNav/SideNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { SideNavContext } from './SideNavContext';\nimport type { SideNavContextType, SideNavProps } from './types';\nimport {\n  classes,\n  COLLAPSED_L1_WIDTH,\n  EXPANDED_L1_WIDTH,\n  HOVER_AGAIN_DELAY,\n  L1_EXIT_HOVER_DELAY,\n  SKIP_NAV_ID,\n  TRANSITION_CLEANUP_DELAY,\n} from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { Drawer, DrawerBody, DrawerHeader } from '~components/Drawer';\nimport { SkipNavContent, SkipNavLink } from '~components/SkipNav/SkipNav';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst {\n  COLLAPSED,\n  SHOW_WHEN_COLLAPSED,\n  HIDE_WHEN_COLLAPSED,\n  TRANSITIONING,\n  L1_ITEM_WRAPPER,\n} = classes;\n\nconst MobileL1Container = styled(BaseBox)(() => {\n  return {\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n  };\n});\n\nconst StyledL1Menu = styled(BaseBox)((props) => {\n  const moderate = makeMotionTime(props.theme.motion.duration.moderate);\n  const gentle = makeMotionTime(props.theme.motion.duration.gentle);\n  const easing = props.theme.motion.easing;\n\n  const l1Expand = `width ${gentle} ${easing.entrance.revealing}`;\n  const l1Collapse = `width ${moderate} ${easing.exit.revealing}`;\n\n  return {\n    width: '100%',\n    transition: l1Expand,\n    [`& > .${L1_ITEM_WRAPPER}`]: {\n      padding: makeSpace(props.theme.spacing[3]),\n    },\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n    [`&.${COLLAPSED}`]: {\n      width: makeSize(COLLAPSED_L1_WIDTH),\n      transition: l1Collapse,\n      [`& > .${L1_ITEM_WRAPPER}`]: {\n        padding: `${makeSpace(props.theme.spacing[3])} ${makeSpace(props.theme.spacing[3])}`,\n      },\n      [`&:not(.${TRANSITIONING}) .${HIDE_WHEN_COLLAPSED}`]: {\n        display: 'none',\n      },\n      [`&:not(.${TRANSITIONING}) .${SHOW_WHEN_COLLAPSED}`]: {\n        display: 'initial',\n      },\n    },\n  };\n});\n\nconst getL1MenuClassName = ({\n  isL1Collapsed,\n  isL1Hovered,\n  isTransitioning,\n}: {\n  isL1Collapsed: boolean;\n  isL1Hovered: boolean;\n  isTransitioning: boolean;\n}): string => {\n  const isMenuCollapsed = isL1Collapsed && !isL1Hovered;\n\n  if (isMenuCollapsed) {\n    if (isTransitioning) {\n      return `${COLLAPSED} ${TRANSITIONING}`;\n    }\n\n    return COLLAPSED;\n  }\n\n  return '';\n};\n\n/**\n * ### SideNav component\n *\n * The side navigation is positioned along the left side of the screen that provides quick access to different sections or functionalities of the application.\n *\n * ---\n *\n * #### Usage\n *\n * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)\n *\n */\nconst SideNav = ({\n  children,\n  isOpen,\n  onDismiss,\n  banner,\n  testID,\n  ...styledProps\n}: SideNavProps): React.ReactElement => {\n  const l2PortalContainerRef = React.useRef(null);\n  const l1ContainerRef = React.useRef<HTMLDivElement>(null);\n  const timeoutIdsRef = React.useRef<NodeJS.Timeout[]>([]);\n  const mouseOverTimeoutRef = React.useRef<NodeJS.Timeout>();\n  const [isL1Collapsed, setIsL1Collapsed] = React.useState(false);\n  const [isMobileL2Open, setIsMobileL2Open] = React.useState(false);\n  const [isL1Hovered, setIsL1Hovered] = React.useState(false);\n  const [isHoverAgainEnabled, setIsHoverAgainEnabled] = React.useState(true);\n  const [isTransitioning, setIsTransitioning] = React.useState(false);\n  const [l2DrawerTitle, setL2DrawerTitle] = React.useState('');\n\n  const isMobile = useIsMobile();\n\n  const closeMobileNav = (): void => {\n    if (isMobile) {\n      setIsMobileL2Open(false);\n      onDismiss?.();\n    }\n  };\n\n  const cleanupTransition = (): void => {\n    const clearTransitionTimeout = setTimeout(() => {\n      if (isTransitioning) {\n        setIsTransitioning(false);\n      }\n    }, TRANSITION_CLEANUP_DELAY);\n    timeoutIdsRef.current.push(clearTransitionTimeout);\n  };\n\n  /**\n   * Handles L1 -> L2 menu changes based on active item\n   */\n  const onLinkActiveChange: SideNavContextType['onLinkActiveChange'] = (args) => {\n    const isL1ItemActive = args.level === 1 && args.isActive;\n\n    if (isL1ItemActive) {\n      if (args.isL2Trigger) {\n        // Click on L2 Trigger\n        if (isMobile) {\n          setL2DrawerTitle(args.title);\n          setIsMobileL2Open(true);\n          return;\n        }\n\n        setIsL1Collapsed(true);\n\n        // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change\n        if (!args.isFirstRender) {\n          setIsTransitioning(true);\n          cleanupTransition();\n          setIsL1Hovered(false);\n          setIsHoverAgainEnabled(false);\n          // For some delay, we disable hover to expand behaviour to avoid buggy flicker when cursor is on L1 while its trying to close\n          const hoverAgainTimeout = setTimeout(() => {\n            setIsHoverAgainEnabled(true);\n          }, HOVER_AGAIN_DELAY);\n          timeoutIdsRef.current.push(hoverAgainTimeout);\n        }\n      } else {\n        // Click on normal L1 Item\n        // eslint-disable-next-line no-lonely-if\n        if (isMobile) {\n          setIsMobileL2Open(false);\n        }\n        // Ensures that if Normal L1 item is clicked, the L1 stays expanded\n        setIsL1Collapsed(false);\n      }\n    }\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      l2PortalContainerRef,\n      onLinkActiveChange,\n      closeMobileNav,\n      isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,\n      setIsL1Collapsed,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isL1Collapsed, isMobile, isMobileL2Open],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const timeoutId of timeoutIdsRef.current) {\n        clearTimeout(timeoutId);\n      }\n      timeoutIdsRef.current = [];\n    };\n  }, []);\n\n  return (\n    <SideNavContext.Provider value={contextValue}>\n      {isMobile && onDismiss ? (\n        <>\n          {/* L1 */}\n          <Drawer isOpen={isOpen ?? false} onDismiss={onDismiss}>\n            <DrawerHeader title=\"Main Menu\" />\n            <DrawerBody>\n              <MobileL1Container\n                display=\"flex\"\n                flexDirection=\"column\"\n                justifyContent=\"space-between\"\n                className=\"mobile-l1-container\"\n                height=\"100%\"\n                {...metaAttribute({\n                  name: MetaConstants.SideNav,\n                  testID,\n                })}\n              >\n                {children}\n              </MobileL1Container>\n            </DrawerBody>\n          </Drawer>\n          {/* L2 */}\n          <Drawer isOpen={isMobileL2Open} onDismiss={() => setIsMobileL2Open(false)} isLazy={false}>\n            <DrawerHeader title={l2DrawerTitle} />\n            <DrawerBody>\n              <BaseBox ref={l2PortalContainerRef} />\n            </DrawerBody>\n          </Drawer>\n        </>\n      ) : (\n        <BaseBox\n          position=\"fixed\"\n          backgroundColor=\"surface.background.gray.moderate\"\n          height=\"100%\"\n          top=\"spacing.0\"\n          left=\"spacing.0\"\n          display={{ base: 'none', m: 'flex' }}\n          flexDirection=\"column\"\n          width={makeSize(EXPANDED_L1_WIDTH)}\n          as=\"nav\"\n          {...metaAttribute({\n            name: MetaConstants.SideNav,\n            testID,\n          })}\n          {...getStyledProps(styledProps)}\n        >\n          {banner ? (\n            <BaseBox\n              borderBottom=\"thin\"\n              borderBottomColor=\"surface.border.gray.muted\"\n              borderRight=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              padding=\"spacing.3\"\n              maxHeight=\"100px\"\n              width=\"100%\"\n            >\n              {banner}\n            </BaseBox>\n          ) : null}\n          <BaseBox position=\"relative\" display=\"block\" flex=\"1\" width=\"100%\">\n            <BaseBox\n              position=\"absolute\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              width=\"100%\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              id=\"blade-sidenav-l2\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              ref={l2PortalContainerRef}\n            />\n            <StyledL1Menu\n              ref={l1ContainerRef}\n              id=\"blade-sidenav-l1\"\n              className={getL1MenuClassName({ isL1Collapsed, isL1Hovered, isTransitioning })}\n              position=\"absolute\"\n              display=\"flex\"\n              flexDirection=\"column\"\n              justifyContent=\"space-between\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              overflow=\"hidden\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              onTransitionEnd={(e) => {\n                // This check ensures transitioning is set to false only when its true\n                // And only the l1Container element's transitions are considered and other transitions of l1 expand or child elements are ignored\n                if (isTransitioning && l1ContainerRef.current === e.target) {\n                  setIsTransitioning(false);\n                }\n              }}\n              // Hmm you might be wondering, why is `onMouseOver` paired with `onMouseLeave`? A sane person would pair `onMouseOver` with `onMouseOut`, and `onMouseEnter` with `onMouseLeave`\n              // since they are logical equivalents of each other. So why don't we do that? Hold tight, you're in for a ride ☕️.\n              //\n              // 1. In an ideal scenario, we would put `onMouseEnter` and `onMouseLeave` here and expect things to work.\n              // 2. The L2 menu of our SideNav is React Portalled out of the L1 child\n              // 3. React considers its own children as true children for JS events and not DOM children (Checkout React Portal Caveats - https://react.dev/reference/react-dom/createPortal#caveats)\n              // 3. In the next ideal scenario, we would put `e.stopPropagation` on child component of portal like React recommends, except mouseenter, mouseleave events don't propagate at all (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes)\n              // 4. So `onMouseEnter` gets triggered on L2 enter. But we don't want to open L1 menu on L2 hover\n              // 5. Thus we use `onMouseOver` for hover part and call e.stopPropagation in portal child (SideNavLevel).\n              // 6. But in case of unhover/leave, we don't want to trigger mouseOut for all child components individually. We want 1 hover out of L1 menu. Thus we use `onMouseLeave`\n              onMouseOver={() => {\n                if (mouseOverTimeoutRef.current) {\n                  clearTimeout(mouseOverTimeoutRef.current);\n                }\n                if (isL1Collapsed && isHoverAgainEnabled) {\n                  setIsL1Hovered(true);\n                }\n              }}\n              onMouseLeave={() => {\n                if (isL1Collapsed && isL1Hovered) {\n                  mouseOverTimeoutRef.current = setTimeout(() => {\n                    setIsL1Hovered(false);\n                    setIsTransitioning(true);\n                    cleanupTransition();\n                  }, L1_EXIT_HOVER_DELAY);\n                }\n              }}\n            >\n              <SkipNavLink id={SKIP_NAV_ID} _hasBackground={true} />\n              {children}\n            </StyledL1Menu>\n            <SkipNavContent id={SKIP_NAV_ID} />\n          </BaseBox>\n        </BaseBox>\n      )}\n    </SideNavContext.Provider>\n  );\n};\n\nexport { SideNav };\n"],"names":["COLLAPSED","classes","SHOW_WHEN_COLLAPSED","HIDE_WHEN_COLLAPSED","TRANSITIONING","L1_ITEM_WRAPPER","MobileL1Container","styled","BaseBox","withConfig","displayName","componentId","_defineProperty","concat","display","StyledL1Menu","props","moderate","makeMotionTime","theme","motion","duration","gentle","easing","l1Expand","entrance","revealing","l1Collapse","exit","width","transition","padding","makeSpace","spacing","makeSize","COLLAPSED_L1_WIDTH","getL1MenuClassName","_ref3","isL1Collapsed","isL1Hovered","isTransitioning","isMenuCollapsed","SideNav","_ref4","children","isOpen","onDismiss","banner","testID","styledProps","_objectWithoutProperties","_excluded","l2PortalContainerRef","React","useRef","l1ContainerRef","timeoutIdsRef","mouseOverTimeoutRef","_React$useState","useState","_React$useState2","_slicedToArray","setIsL1Collapsed","_React$useState3","_React$useState4","isMobileL2Open","setIsMobileL2Open","_React$useState5","_React$useState6","setIsL1Hovered","_React$useState7","_React$useState8","isHoverAgainEnabled","setIsHoverAgainEnabled","_React$useState9","_React$useState10","setIsTransitioning","_React$useState11","_React$useState12","l2DrawerTitle","setL2DrawerTitle","isMobile","useIsMobile","closeMobileNav","cleanupTransition","clearTransitionTimeout","setTimeout","TRANSITION_CLEANUP_DELAY","current","push","onLinkActiveChange","args","isL1ItemActive","level","isActive","isL2Trigger","title","isFirstRender","hoverAgainTimeout","HOVER_AGAIN_DELAY","contextValue","useMemo","useEffect","_iterator","_createForOfIteratorHelper","_step","s","n","done","timeoutId","value","clearTimeout","err","e","f","_jsx","SideNavContext","Provider","_jsxs","_Fragment","Drawer","DrawerHeader","DrawerBody","_objectSpread","flexDirection","justifyContent","className","height","metaAttribute","name","MetaConstants","isLazy","ref","position","backgroundColor","top","left","base","m","EXPANDED_L1_WIDTH","as","getStyledProps","borderBottom","borderBottomColor","borderRight","borderRightColor","maxHeight","flex","id","borderRightWidth","overflow","onTransitionEnd","target","onMouseOver","onMouseLeave","L1_EXIT_HOVER_DELAY","SkipNavLink","SKIP_NAV_ID","_hasBackground","SkipNavContent"],"mappings":"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"}

package/build/lib/web/development/components/SideNav/SideNavBody.web.js

@@ -0,0 +1,17 @@
+import { classes } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+
+var SideNavBody = function SideNavBody(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(BaseBox, {
+    className: classes.L1_ITEM_WRAPPER,
+    overflowY: "auto",
+    overflowX: "hidden",
+    children: children
+  });
+};
+
+export { SideNavBody };
+//# sourceMappingURL=SideNavBody.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavBody.web.js","sources":["../../../../../../src/components/SideNav/SideNavBody.web.tsx"],"sourcesContent":["import { classes } from './tokens';\nimport type { SideNavBodyProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst SideNavBody = ({ children }: SideNavBodyProps): React.ReactElement => {\n  return (\n    <BaseBox className={classes.L1_ITEM_WRAPPER} overflowY=\"auto\" overflowX=\"hidden\">\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { SideNavBody };\n"],"names":["SideNavBody","_ref","children","_jsx","BaseBox","className","classes","L1_ITEM_WRAPPER","overflowY","overflowX"],"mappings":";;;;;AAIA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAA2D;AAAA,EAAA,IAArDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;EAC7B,oBACEC,GAAA,CAACC,OAAO,EAAA;IAACC,SAAS,EAAEC,OAAO,CAACC,eAAgB;AAACC,IAAAA,SAAS,EAAC,MAAM;AAACC,IAAAA,SAAS,EAAC,QAAQ;AAAAP,IAAAA,QAAA,EAC7EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/development/components/SideNav/SideNavContext.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import '../../utils/logger/index.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+
+var SideNavContext = /*#__PURE__*/React__default.createContext({});
+var useSideNav = function useSideNav() {
+  var value = React__default.useContext(SideNavContext);
+  if (!value) {
+    throwBladeError({
+      moduleName: 'SideNavContext',
+      message: 'SideNav* components cannot be used outside SideNav'
+    });
+  }
+  return value;
+};
+var NavLinkContext = /*#__PURE__*/React__default.createContext({});
+var useNavLink = function useNavLink() {
+  var value = React__default.useContext(NavLinkContext);
+  return value;
+};
+
+export { NavLinkContext, SideNavContext, useNavLink, useSideNav };
+//# sourceMappingURL=SideNavContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavContext.js","sources":["../../../../../../src/components/SideNav/SideNavContext.ts"],"sourcesContent":["import React from 'react';\nimport type { NavLinkContextType, SideNavContextType } from './types';\nimport { throwBladeError } from '~utils/logger';\n\nconst SideNavContext = React.createContext<SideNavContextType>({});\n\nconst useSideNav = (): SideNavContextType => {\n  const value = React.useContext(SideNavContext);\n  if (!value) {\n    throwBladeError({\n      moduleName: 'SideNavContext',\n      message: 'SideNav* components cannot be used outside SideNav',\n    });\n  }\n  return value;\n};\n\nconst NavLinkContext = React.createContext<NavLinkContextType>({});\nconst useNavLink = (): NavLinkContextType => {\n  const value = React.useContext(NavLinkContext);\n  return value;\n};\n\nexport { SideNavContext, useSideNav, NavLinkContext, useNavLink };\n"],"names":["SideNavContext","React","createContext","useSideNav","value","useContext","throwBladeError","moduleName","message","NavLinkContext","useNavLink"],"mappings":";;;;AAIMA,IAAAA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAqB,EAAE,EAAC;AAElE,IAAMC,UAAU,GAAG,SAAbA,UAAUA,GAA6B;AAC3C,EAAA,IAAMC,KAAK,GAAGH,cAAK,CAACI,UAAU,CAACL,cAAc,CAAC,CAAA;EAC9C,IAAI,CAACI,KAAK,EAAE;AACVE,IAAAA,eAAe,CAAC;AACdC,MAAAA,UAAU,EAAE,gBAAgB;AAC5BC,MAAAA,OAAO,EAAE,oDAAA;AACX,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAOJ,KAAK,CAAA;AACd,EAAC;AAEKK,IAAAA,cAAc,gBAAGR,cAAK,CAACC,aAAa,CAAqB,EAAE,EAAC;AAClE,IAAMQ,UAAU,GAAG,SAAbA,UAAUA,GAA6B;AAC3C,EAAA,IAAMN,KAAK,GAAGH,cAAK,CAACI,UAAU,CAACI,cAAc,CAAC,CAAA;AAC9C,EAAA,OAAOL,KAAK,CAAA;AACd;;;;"}

package/build/lib/web/development/components/SideNav/SideNavFooter.web.js

@@ -0,0 +1,55 @@
+import 'react';
+import { classes } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import '../Drawer/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { drawerPadding } from '../Drawer/DrawerSubcomponents.web.js';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+
+var getDrawerPadding = function getDrawerPadding(theme) {
+  var negativePaddingValue = getIn(theme, drawerPadding);
+  return makeSpace(negativePaddingValue);
+};
+var SideNavFooter = function SideNavFooter(_ref) {
+  var children = _ref.children;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/jsx(BaseBox, {
+    className: classes.L1_ITEM_WRAPPER,
+    width: {
+      base: "calc(100% + ".concat(getDrawerPadding(theme), " + ").concat(getDrawerPadding(theme), ")"),
+      m: '100%'
+    },
+    borderTopWidth: "thin",
+    borderTopColor: "surface.border.gray.muted",
+    backgroundColor: "surface.background.gray.moderate",
+    position: "relative",
+    elevation: "lowRaised",
+    bottom: {
+      base: "-".concat(getDrawerPadding(theme)),
+      m: 'spacing.0'
+    },
+    left: {
+      base: "-".concat(getDrawerPadding(theme)),
+      m: 'spacing.0'
+    },
+    right: {
+      base: "-".concat(getDrawerPadding(theme)),
+      m: 'spacing.0'
+    }
+    // in Desktop, padding is set on SideNav component
+    ,
+    padding: {
+      base: 'spacing.4',
+      m: undefined
+    },
+    children: children
+  });
+};
+
+export { SideNavFooter };
+//# sourceMappingURL=SideNavFooter.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavFooter.web.js","sources":["../../../../../../src/components/SideNav/SideNavFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { SideNavFooterProps } from './types';\nimport { classes } from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { drawerPadding } from '~components/Drawer';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { makeSpace, useTheme } from '~utils';\n\nconst getDrawerPadding = (theme: Theme): `${number}px` => {\n  const negativePaddingValue = getIn(theme, drawerPadding);\n  return makeSpace(negativePaddingValue);\n};\n\nconst SideNavFooter = ({ children }: SideNavFooterProps): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      className={classes.L1_ITEM_WRAPPER}\n      width={{\n        base: `calc(100% + ${getDrawerPadding(theme)} + ${getDrawerPadding(theme)})`,\n        m: '100%',\n      }}\n      borderTopWidth=\"thin\"\n      borderTopColor=\"surface.border.gray.muted\"\n      backgroundColor=\"surface.background.gray.moderate\"\n      position=\"relative\"\n      elevation=\"lowRaised\"\n      bottom={{ base: `-${getDrawerPadding(theme)}`, m: 'spacing.0' }}\n      left={{ base: `-${getDrawerPadding(theme)}`, m: 'spacing.0' }}\n      right={{ base: `-${getDrawerPadding(theme)}`, m: 'spacing.0' }}\n      // in Desktop, padding is set on SideNav component\n      padding={{ base: 'spacing.4', m: undefined }}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nexport { SideNavFooter };\n"],"names":["getDrawerPadding","theme","negativePaddingValue","getIn","drawerPadding","makeSpace","SideNavFooter","_ref","children","_useTheme","useTheme","_jsx","BaseBox","className","classes","L1_ITEM_WRAPPER","width","base","concat","m","borderTopWidth","borderTopColor","backgroundColor","position","elevation","bottom","left","right","padding","undefined"],"mappings":";;;;;;;;;;;;AASA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAY,EAAoB;AACxD,EAAA,IAAMC,oBAAoB,GAAGC,KAAK,CAACF,KAAK,EAAEG,aAAa,CAAC,CAAA;EACxD,OAAOC,SAAS,CAACH,oBAAoB,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAA6D;AAAA,EAAA,IAAvDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC/B,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBT,KAAK,GAAAQ,SAAA,CAALR,KAAK,CAAA;EACb,oBACEU,GAAA,CAACC,OAAO,EAAA;IACNC,SAAS,EAAEC,OAAO,CAACC,eAAgB;AACnCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAAC,cAAAA,CAAAA,MAAA,CAAiBlB,gBAAgB,CAACC,KAAK,CAAC,EAAAiB,KAAAA,CAAAA,CAAAA,MAAA,CAAMlB,gBAAgB,CAACC,KAAK,CAAC,EAAG,GAAA,CAAA;AAC5EkB,MAAAA,CAAC,EAAE,MAAA;KACH;AACFC,IAAAA,cAAc,EAAC,MAAM;AACrBC,IAAAA,cAAc,EAAC,2BAA2B;AAC1CC,IAAAA,eAAe,EAAC,kCAAkC;AAClDC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,SAAS,EAAC,WAAW;AACrBC,IAAAA,MAAM,EAAE;AAAER,MAAAA,IAAI,MAAAC,MAAA,CAAMlB,gBAAgB,CAACC,KAAK,CAAC,CAAE;AAAEkB,MAAAA,CAAC,EAAE,WAAA;KAAc;AAChEO,IAAAA,IAAI,EAAE;AAAET,MAAAA,IAAI,MAAAC,MAAA,CAAMlB,gBAAgB,CAACC,KAAK,CAAC,CAAE;AAAEkB,MAAAA,CAAC,EAAE,WAAA;KAAc;AAC9DQ,IAAAA,KAAK,EAAE;AAAEV,MAAAA,IAAI,MAAAC,MAAA,CAAMlB,gBAAgB,CAACC,KAAK,CAAC,CAAE;AAAEkB,MAAAA,CAAC,EAAE,WAAA;AAAY,KAAA;AAC7D;AAAA;AACAS,IAAAA,OAAO,EAAE;AAAEX,MAAAA,IAAI,EAAE,WAAW;AAAEE,MAAAA,CAAC,EAAEU,SAAAA;KAAY;AAAArB,IAAAA,QAAA,EAE5CA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/lib/web/development/components/SideNav/SideNavItems/SideNavItem.web.js

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import { getNavItemTransition, NAV_ITEM_HEIGHT, classes } from '../tokens.js';
+import { TooltipifyNavItem } from './TooltipifyNavItem.js';
+import '../../Box/index.js';
+import '../../Box/BaseBox/index.js';
+import '../../Typography/index.js';
+import '../../../utils/index.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { Box } from '../../Box/Box.js';
+import { Text } from '../../Typography/Text/Text.js';
+
+var SideNavItemContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "SideNavItemweb__SideNavItemContainer",
+  componentId: "nb93ri-0"
+})(function (props) {
+  return {
+    transition: getNavItemTransition(props.theme)
+  };
+});
+var SideNavItem = function SideNavItem(_ref) {
+  var leading = _ref.leading,
+    trailing = _ref.trailing,
+    title = _ref.title,
+    backgroundColor = _ref.backgroundColor,
+    tooltip = _ref.tooltip,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as;
+  return /*#__PURE__*/jsx(TooltipifyNavItem, {
+    tooltip: tooltip,
+    children: /*#__PURE__*/jsxs(SideNavItemContainer, {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingX: "spacing.3",
+      height: makeSize(NAV_ITEM_HEIGHT),
+      backgroundColor: backgroundColor,
+      borderRadius: "medium",
+      as: as,
+      cursor: as === 'label' ? 'pointer' : undefined,
+      children: [/*#__PURE__*/jsxs(Box, {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "spacing.3",
+        children: [leading, /*#__PURE__*/jsx(BaseBox, {
+          className: classes.HIDE_WHEN_COLLAPSED,
+          children: /*#__PURE__*/jsx(Text, {
+            truncateAfterLines: 1,
+            weight: "medium",
+            size: "medium",
+            color: "surface.text.gray.subtle",
+            children: title
+          })
+        })]
+      }), /*#__PURE__*/jsx(BaseBox, {
+        className: classes.HIDE_WHEN_COLLAPSED,
+        children: trailing
+      })]
+    })
+  });
+};
+
+export { SideNavItem };
+//# sourceMappingURL=SideNavItem.web.js.map

package/build/lib/web/development/components/SideNav/SideNavItems/SideNavItem.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItem.web.js","sources":["../../../../../../../src/components/SideNav/SideNavItems/SideNavItem.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { classes, getNavItemTransition, NAV_ITEM_HEIGHT } from '../tokens';\nimport type { SideNavItemProps } from '../types';\nimport { TooltipifyNavItem } from './TooltipifyNavItem';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { makeSize } from '~utils';\n\nconst SideNavItemContainer = styled(BaseBox)((props) => {\n  return {\n    transition: getNavItemTransition(props.theme),\n  };\n});\n\nconst SideNavItem = ({\n  leading,\n  trailing,\n  title,\n  backgroundColor,\n  tooltip,\n  as = 'div',\n}: SideNavItemProps): React.ReactElement => {\n  return (\n    <TooltipifyNavItem tooltip={tooltip}>\n      <SideNavItemContainer\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        paddingX=\"spacing.3\"\n        height={makeSize(NAV_ITEM_HEIGHT)}\n        backgroundColor={backgroundColor}\n        borderRadius=\"medium\"\n        as={as}\n        cursor={as === 'label' ? 'pointer' : undefined}\n      >\n        <Box display=\"inline-flex\" alignItems=\"center\" gap=\"spacing.3\">\n          {leading}\n          <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>\n            <Text\n              truncateAfterLines={1}\n              weight=\"medium\"\n              size=\"medium\"\n              color=\"surface.text.gray.subtle\"\n            >\n              {title}\n            </Text>\n          </BaseBox>\n        </Box>\n        <BaseBox className={classes.HIDE_WHEN_COLLAPSED}>{trailing}</BaseBox>\n      </SideNavItemContainer>\n    </TooltipifyNavItem>\n  );\n};\n\nexport { SideNavItem };\n"],"names":["SideNavItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","transition","getNavItemTransition","theme","SideNavItem","_ref","leading","trailing","title","backgroundColor","tooltip","_ref$as","as","_jsx","TooltipifyNavItem","children","_jsxs","display","flexDirection","justifyContent","alignItems","paddingX","height","makeSize","NAV_ITEM_HEIGHT","borderRadius","cursor","undefined","Box","gap","className","classes","HIDE_WHEN_COLLAPSED","Text","truncateAfterLines","weight","size","color"],"mappings":";;;;;;;;;;;;;AASA,IAAMA,oBAAoB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAC,CAAA,CAAA,UAACC,KAAK,EAAK;EACtD,OAAO;AACLC,IAAAA,UAAU,EAAEC,oBAAoB,CAACF,KAAK,CAACG,KAAK,CAAA;GAC7C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IAN1CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,eAAe,GAAAJ,IAAA,CAAfI,eAAe;IACfC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAAC,OAAA,GAAAN,IAAA,CACPO,EAAE;AAAFA,IAAAA,EAAE,GAAAD,OAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,OAAA,CAAA;EAEV,oBACEE,GAAA,CAACC,iBAAiB,EAAA;AAACJ,IAAAA,OAAO,EAAEA,OAAQ;IAAAK,QAAA,eAClCC,IAAA,CAACtB,oBAAoB,EAAA;AACnBuB,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBC,MAAAA,cAAc,EAAC,eAAe;AAC9BC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,QAAQ,EAAC,WAAW;AACpBC,MAAAA,MAAM,EAAEC,QAAQ,CAACC,eAAe,CAAE;AAClCf,MAAAA,eAAe,EAAEA,eAAgB;AACjCgB,MAAAA,YAAY,EAAC,QAAQ;AACrBb,MAAAA,EAAE,EAAEA,EAAG;AACPc,MAAAA,MAAM,EAAEd,EAAE,KAAK,OAAO,GAAG,SAAS,GAAGe,SAAU;MAAAZ,QAAA,EAAA,cAE/CC,IAAA,CAACY,GAAG,EAAA;AAACX,QAAAA,OAAO,EAAC,aAAa;AAACG,QAAAA,UAAU,EAAC,QAAQ;AAACS,QAAAA,GAAG,EAAC,WAAW;AAAAd,QAAAA,QAAA,EAC3DT,CAAAA,OAAO,eACRO,GAAA,CAACjB,OAAO,EAAA;UAACkC,SAAS,EAAEC,OAAO,CAACC,mBAAoB;UAAAjB,QAAA,eAC9CF,GAAA,CAACoB,IAAI,EAAA;AACHC,YAAAA,kBAAkB,EAAE,CAAE;AACtBC,YAAAA,MAAM,EAAC,QAAQ;AACfC,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,KAAK,EAAC,0BAA0B;AAAAtB,YAAAA,QAAA,EAE/BP,KAAAA;WACG,CAAA;AAAC,SACA,CAAC,CAAA;AAAA,OACP,CAAC,eACNK,GAAA,CAACjB,OAAO,EAAA;QAACkC,SAAS,EAAEC,OAAO,CAACC,mBAAoB;AAAAjB,QAAAA,QAAA,EAAER,QAAAA;AAAQ,OAAU,CAAC,CAAA;KACjD,CAAA;AAAC,GACN,CAAC,CAAA;AAExB;;;;"}