@razorpay/blade 11.21.9 → 11.23.0

package/build/lib/web/development/components/Menu/MenuItem.web.js

@@ -0,0 +1,63 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useListItem, useFloatingTree, useMergeRefs } from '@floating-ui/react';
+import React__default from 'react';
+import { useMenu } from './useMenu.js';
+import '../BaseMenu/index.js';
+import '../Icons/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseMenuItem } from '../BaseMenu/BaseMenuItem/BaseMenuItem.js';
+import ChevronRightIcon from '../Icons/ChevronRightIcon/ChevronRightIcon.js';
+
+var _excluded = ["title", "isDisabled", "description", "leading", "trailing", "_isMenuTrigger", "_hasFocusInside", "href", "target", "children", "as"];
+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 MenuItem = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef) {
+  var title = _ref.title,
+    isDisabled = _ref.isDisabled,
+    description = _ref.description,
+    leading = _ref.leading,
+    trailing = _ref.trailing,
+    _isMenuTrigger = _ref._isMenuTrigger,
+    _hasFocusInside = _ref._hasFocusInside,
+    href = _ref.href,
+    target = _ref.target,
+    children = _ref.children,
+    as = _ref.as,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var menu = useMenu();
+  var item = useListItem({
+    label: isDisabled && Boolean(children) ? null : title
+  });
+  var tree = useFloatingTree();
+  var isLink = Boolean(href);
+  var defaultAs = isLink ? 'a' : 'button';
+  return /*#__PURE__*/jsx(BaseMenuItem, _objectSpread(_objectSpread(_objectSpread({
+    title: title,
+    description: description,
+    leading: leading,
+    trailing: _isMenuTrigger ? /*#__PURE__*/jsx(ChevronRightIcon, {
+      color: "interactive.icon.gray.muted"
+    }) : trailing,
+    as: as !== null && as !== void 0 ? as : defaultAs,
+    href: href,
+    ref: useMergeRefs([item.ref, forwardedRef]),
+    isDisabled: isDisabled
+  }, props), _isMenuTrigger ? {} : menu.getItemProps({
+    onClick: function onClick(event) {
+      var _props$onClick;
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event);
+      tree === null || tree === void 0 ? void 0 : tree.events.emit('click');
+    },
+    onFocus: function onFocus(event) {
+      var _props$onFocus;
+      (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event);
+      menu.setHasFocusInside(true);
+    }
+  })), {}, {
+    children: children
+  }));
+});
+
+export { MenuItem };
+//# sourceMappingURL=MenuItem.web.js.map

package/build/lib/web/development/components/Menu/MenuItem.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.web.js","sources":["../../../../../../src/components/Menu/MenuItem.web.tsx"],"sourcesContent":["import { useFloatingTree, useListItem, useMergeRefs } from '@floating-ui/react';\nimport React from 'react';\nimport type { MenuItemProps } from './types';\nimport { useMenu } from './useMenu';\nimport { BaseMenuItem } from '~components/BaseMenu';\nimport { ChevronRightIcon } from '~components/Icons';\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(\n  (\n    {\n      title,\n      isDisabled,\n      description,\n      leading,\n      trailing,\n      _isMenuTrigger,\n      _hasFocusInside,\n      href,\n      target,\n      children,\n      as,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const menu = useMenu();\n    const item = useListItem({ label: isDisabled && Boolean(children) ? null : title });\n    const tree = useFloatingTree();\n\n    const isLink = Boolean(href);\n\n    const defaultAs = isLink ? 'a' : 'button';\n\n    return (\n      <BaseMenuItem\n        title={title}\n        description={description}\n        leading={leading}\n        trailing={\n          _isMenuTrigger ? <ChevronRightIcon color=\"interactive.icon.gray.muted\" /> : trailing\n        }\n        as={as ?? defaultAs}\n        href={href}\n        ref={useMergeRefs([item.ref, forwardedRef])}\n        isDisabled={isDisabled}\n        {...props}\n        {...(_isMenuTrigger\n          ? {}\n          : menu.getItemProps({\n              onClick(event: React.MouseEvent<HTMLButtonElement>) {\n                props.onClick?.(event);\n                tree?.events.emit('click');\n              },\n              onFocus(event: React.FocusEvent<HTMLButtonElement>) {\n                props.onFocus?.(event);\n                menu.setHasFocusInside(true);\n              },\n            }))}\n      >\n        {children}\n      </BaseMenuItem>\n    );\n  },\n);\n\nexport { MenuItem };\n"],"names":["MenuItem","React","forwardRef","_ref","forwardedRef","title","isDisabled","description","leading","trailing","_isMenuTrigger","_hasFocusInside","href","target","children","as","props","_objectWithoutProperties","_excluded","menu","useMenu","item","useListItem","label","Boolean","tree","useFloatingTree","isLink","defaultAs","_jsx","BaseMenuItem","_objectSpread","ChevronRightIcon","color","ref","useMergeRefs","getItemProps","onClick","event","_props$onClick","call","events","emit","onFocus","_props$onFocus","setHasFocusInside"],"mappings":"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"}

package/build/lib/web/development/components/Menu/MenuOverlay.web.js

@@ -0,0 +1,59 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import styled from 'styled-components';
+import { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingY } from './tokens.js';
+import '../Box/BaseBox/index.js';
+import { componentZIndices } from '../../utils/componentZIndices.js';
+import '../../utils/metaAttribute/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+
+var _excluded = ["children", "zIndex", "_transitionStyle", "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; }
+var UnfocussableOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "MenuOverlayweb__UnfocussableOverlay",
+  componentId: "sc-1nhzg4x-0"
+})(function (_props) {
+  return {
+    '&:focus-visible': {
+      outline: 'none'
+    }
+  };
+});
+var _MenuOverlay = function _MenuOverlay(_ref, ref) {
+  var children = _ref.children,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref$zIndex,
+    _transitionStyle = _ref._transitionStyle,
+    testID = _ref.testID,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(UnfocussableOverlay, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    minWidth: MENU_MIN_WIDTH,
+    zIndex: zIndex
+  }, metaAttribute({
+    name: MetaConstants.Menu,
+    testID: testID
+  })), {}, {
+    children: /*#__PURE__*/jsx(BaseBox, {
+      backgroundColor: "popup.background.subtle",
+      paddingX: overlayPaddingX,
+      paddingY: overlayPaddingY,
+      elevation: "midRaised",
+      borderWidth: "thin",
+      borderColor: "surface.border.gray.muted",
+      borderRadius: "medium",
+      style: _transitionStyle,
+      children: children
+    })
+  }));
+};
+var MenuOverlay = /*#__PURE__*/React__default.forwardRef(_MenuOverlay);
+
+export { MenuOverlay };
+//# sourceMappingURL=MenuOverlay.web.js.map

package/build/lib/web/development/components/Menu/MenuOverlay.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuOverlay.web.js","sources":["../../../../../../src/components/Menu/MenuOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { MenuOverlayProps } from './types';\nimport { MENU_MIN_WIDTH, overlayPaddingX, overlayPaddingY } from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { componentZIndices } from '~utils/componentZIndices';\nimport type { BladeElementRef } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst UnfocussableOverlay = styled(BaseBox)((_props) => {\n  return {\n    '&:focus-visible': {\n      outline: 'none',\n    },\n  };\n});\n\nconst _MenuOverlay: React.ForwardRefRenderFunction<BladeElementRef, MenuOverlayProps> = (\n  { children, zIndex = componentZIndices.dropdownOverlay, _transitionStyle, testID, ...props },\n  ref,\n): React.ReactElement => {\n  return (\n    <UnfocussableOverlay\n      ref={ref as never}\n      {...props}\n      minWidth={MENU_MIN_WIDTH}\n      zIndex={zIndex}\n      {...metaAttribute({ name: MetaConstants.Menu, testID })}\n    >\n      {/* \n        Requires another nested div since floatingStyles clash with floatingTransitionStyles \n\n        https://floating-ui.com/docs/usetransition#usetransitionstyles\n      */}\n      <BaseBox\n        backgroundColor=\"popup.background.subtle\"\n        paddingX={overlayPaddingX}\n        paddingY={overlayPaddingY}\n        elevation=\"midRaised\"\n        borderWidth=\"thin\"\n        borderColor=\"surface.border.gray.muted\"\n        borderRadius=\"medium\"\n        style={_transitionStyle}\n      >\n        {children}\n      </BaseBox>\n    </UnfocussableOverlay>\n  );\n};\n\nconst MenuOverlay = React.forwardRef(_MenuOverlay);\n\nexport { MenuOverlay };\n"],"names":["UnfocussableOverlay","styled","BaseBox","withConfig","displayName","componentId","_props","outline","_MenuOverlay","_ref","ref","children","_ref$zIndex","zIndex","componentZIndices","dropdownOverlay","_transitionStyle","testID","props","_objectWithoutProperties","_excluded","_jsx","_objectSpread","minWidth","MENU_MIN_WIDTH","metaAttribute","name","MetaConstants","Menu","backgroundColor","paddingX","overlayPaddingX","paddingY","overlayPaddingY","elevation","borderWidth","borderColor","borderRadius","style","MenuOverlay","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAMA,mBAAmB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAC,CAAA,CAAA,UAACC,MAAM,EAAK;EACtD,OAAO;AACL,IAAA,iBAAiB,EAAE;AACjBC,MAAAA,OAAO,EAAE,MAAA;AACX,KAAA;GACD,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAMC,YAA+E,GAAG,SAAlFA,YAA+EA,CAAAC,IAAA,EAEnFC,GAAG,EACoB;AAAA,EAAA,IAFrBC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CAAEI,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,KAAA,CAAA,GAAGE,iBAAiB,CAACC,eAAe,GAAAH,WAAA;IAAEI,gBAAgB,GAAAP,IAAA,CAAhBO,gBAAgB;IAAEC,MAAM,GAAAR,IAAA,CAANQ,MAAM;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA,CAAA,CAAA;EAG1F,oBACEC,GAAA,CAACrB,mBAAmB,EAAAsB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AAClBZ,IAAAA,GAAG,EAAEA,GAAAA;AAAa,GAAA,EACdQ,KAAK,CAAA,EAAA,EAAA,EAAA;AACTK,IAAAA,QAAQ,EAAEC,cAAe;AACzBX,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXY,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,IAAI;AAAEX,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAN,QAAA,eAOvDU,GAAA,CAACnB,OAAO,EAAA;AACN2B,MAAAA,eAAe,EAAC,yBAAyB;AACzCC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBC,MAAAA,WAAW,EAAC,MAAM;AAClBC,MAAAA,WAAW,EAAC,2BAA2B;AACvCC,MAAAA,YAAY,EAAC,QAAQ;AACrBC,MAAAA,KAAK,EAAEtB,gBAAiB;AAAAL,MAAAA,QAAA,EAEvBA,QAAAA;KACM,CAAA;AAAC,GAAA,CACS,CAAC,CAAA;AAE1B,CAAC,CAAA;AAED,IAAM4B,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAACjC,YAAY;;;;"}

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuDivider.web.js

@@ -0,0 +1,18 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { getDividerMarginTokens } from '../tokens.js';
+import '../../Divider/index.js';
+import '../../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { Divider } from '../../Divider/Divider.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 MenuDivider = function MenuDivider(styledProps) {
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  return /*#__PURE__*/jsx(Divider, _objectSpread(_objectSpread({}, getDividerMarginTokens(theme)), styledProps));
+};
+
+export { MenuDivider };
+//# sourceMappingURL=MenuDivider.web.js.map

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuDivider.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDivider.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuDivider.web.tsx"],"sourcesContent":["import { getDividerMarginTokens } from '../tokens';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { Divider } from '~components/Divider';\nimport { useTheme } from '~utils';\n\nconst MenuDivider = (styledProps: StyledPropsBlade): React.ReactElement => {\n  const { theme } = useTheme();\n  return <Divider {...getDividerMarginTokens(theme)} {...styledProps} />;\n};\n\nexport { MenuDivider };\n"],"names":["MenuDivider","styledProps","_useTheme","useTheme","theme","_jsx","Divider","_objectSpread","getDividerMarginTokens"],"mappings":";;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,WAA6B,EAAyB;AACzE,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,oBAAOC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAKC,EAAAA,EAAAA,sBAAsB,CAACJ,KAAK,CAAC,CAAMH,EAAAA,WAAW,CAAG,CAAC,CAAA;AACxE;;;;"}

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js

@@ -0,0 +1,65 @@
+import 'react';
+import { overlayPaddingX, headerMarginBottom, footerPaddingTop } from '../tokens.js';
+import { MenuDivider } from './MenuDivider.web.js';
+import { BaseFooter } from '../../BaseHeaderFooter/BaseFooter.js';
+import { BaseHeader } from '../../BaseHeaderFooter/BaseHeader.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
+import '../../Box/index.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { Box } from '../../Box/Box.js';
+
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+var _MenuHeader = function _MenuHeader(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    leading = _ref.leading,
+    titleSuffix = _ref.titleSuffix,
+    trailing = _ref.trailing,
+    testID = _ref.testID;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(BaseHeader, {
+      title: title,
+      subtitle: subtitle,
+      leading: leading,
+      trailing: trailing,
+      titleSuffix: titleSuffix,
+      metaComponentName: MetaConstants.MenuHeader,
+      testID: testID
+      // back button
+      ,
+      showBackButton: false
+      // close button
+      ,
+      showCloseButton: false,
+      paddingX: overlayPaddingX,
+      marginTop: "spacing.0",
+      marginBottom: headerMarginBottom,
+      showDivider: false
+    }), /*#__PURE__*/jsx(MenuDivider, {})]
+  });
+};
+var MenuHeader = /*#__PURE__*/assignWithoutSideEffects(_MenuHeader, {
+  componentId: 'MenuHeader'
+});
+var _MenuFooter = function _MenuFooter(_ref2) {
+  var children = _ref2.children,
+    testID = _ref2.testID;
+  return /*#__PURE__*/jsxs(Box, {
+    marginTop: "spacing.2",
+    children: [/*#__PURE__*/jsx(MenuDivider, {}), /*#__PURE__*/jsx(BaseFooter, {
+      metaComponentName: MetaConstants.MenuFooter,
+      showDivider: false,
+      padding: [footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX],
+      testID: testID,
+      children: children
+    })]
+  });
+};
+var MenuFooter = /*#__PURE__*/assignWithoutSideEffects(_MenuFooter, {
+  componentId: 'MenuFooter'
+});
+
+export { MenuFooter, MenuHeader };
+//# sourceMappingURL=MenuHeaderFooter.web.js.map

package/build/lib/web/development/components/Menu/VisualSubComponents/MenuHeaderFooter.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuHeaderFooter.web.js","sources":["../../../../../../../src/components/Menu/VisualSubComponents/MenuHeaderFooter.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\nimport { footerPaddingTop, headerMarginBottom, overlayPaddingX } from '../tokens';\nimport type { MenuFooterProps, MenuHeaderProps } from '../types';\nimport { MenuDivider } from './MenuDivider';\nimport { BaseFooter } from '~components/BaseHeaderFooter/BaseFooter';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { MetaConstants } from '~utils/metaAttribute/metaConstants';\nimport { Box } from '~components/Box';\n\nconst _MenuHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  testID,\n}: MenuHeaderProps): React.ReactElement => {\n  return (\n    <>\n      <BaseHeader\n        title={title}\n        subtitle={subtitle}\n        leading={leading}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        metaComponentName={MetaConstants.MenuHeader}\n        testID={testID}\n        // back button\n        showBackButton={false}\n        // close button\n        showCloseButton={false}\n        paddingX={overlayPaddingX}\n        marginTop=\"spacing.0\"\n        marginBottom={headerMarginBottom}\n        showDivider={false}\n      />\n      <MenuDivider />\n    </>\n  );\n};\n\nconst MenuHeader = assignWithoutSideEffects(_MenuHeader, {\n  componentId: 'MenuHeader',\n});\n\nconst _MenuFooter = ({ children, testID }: MenuFooterProps): React.ReactElement => {\n  return (\n    <Box marginTop=\"spacing.2\">\n      <MenuDivider />\n      <BaseFooter\n        metaComponentName={MetaConstants.MenuFooter}\n        showDivider={false}\n        padding={[footerPaddingTop, overlayPaddingX, 'spacing.0', overlayPaddingX]}\n        testID={testID}\n      >\n        {children}\n      </BaseFooter>\n    </Box>\n  );\n};\n\nconst MenuFooter = assignWithoutSideEffects(_MenuFooter, {\n  componentId: 'MenuFooter',\n});\n\nexport { MenuHeader, MenuFooter };\n"],"names":["_MenuHeader","_ref","title","subtitle","leading","titleSuffix","trailing","testID","_jsxs","_Fragment","children","_jsx","BaseHeader","metaComponentName","MetaConstants","MenuHeader","showBackButton","showCloseButton","paddingX","overlayPaddingX","marginTop","marginBottom","headerMarginBottom","showDivider","MenuDivider","assignWithoutSideEffects","componentId","_MenuFooter","_ref2","Box","BaseFooter","MenuFooter","padding","footerPaddingTop"],"mappings":";;;;;;;;;;;;AAAA;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO0B;AAAA,EAAA,IANzCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM,CAAA;EAEN,oBACEC,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTV,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,WAAW,EAAEA,WAAY;MACzBQ,iBAAiB,EAAEC,aAAa,CAACC,UAAW;AAC5CR,MAAAA,MAAM,EAAEA,MAAAA;AACR;AAAA;AACAS,MAAAA,cAAc,EAAE,KAAA;AAChB;AAAA;AACAC,MAAAA,eAAe,EAAE,KAAM;AACvBC,MAAAA,QAAQ,EAAEC,eAAgB;AAC1BC,MAAAA,SAAS,EAAC,WAAW;AACrBC,MAAAA,YAAY,EAAEC,kBAAmB;AACjCC,MAAAA,WAAW,EAAE,KAAA;AAAM,KACpB,CAAC,eACFZ,GAAA,CAACa,WAAW,IAAE,CAAC,CAAA;AAAA,GACf,CAAC,CAAA;AAEP,CAAC,CAAA;AAED,IAAMT,UAAU,gBAAGU,wBAAwB,CAACzB,WAAW,EAAE;AACvD0B,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC,EAAC;AAEF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAAkE;AAAA,EAAA,IAA5DlB,QAAQ,GAAAkB,KAAA,CAARlB,QAAQ;IAAEH,MAAM,GAAAqB,KAAA,CAANrB,MAAM,CAAA;EACrC,oBACEC,IAAA,CAACqB,GAAG,EAAA;AAACT,IAAAA,SAAS,EAAC,WAAW;IAAAV,QAAA,EAAA,cACxBC,GAAA,CAACa,WAAW,IAAE,CAAC,eACfb,GAAA,CAACmB,UAAU,EAAA;MACTjB,iBAAiB,EAAEC,aAAa,CAACiB,UAAW;AAC5CR,MAAAA,WAAW,EAAE,KAAM;MACnBS,OAAO,EAAE,CAACC,gBAAgB,EAAEd,eAAe,EAAE,WAAW,EAAEA,eAAe,CAAE;AAC3EZ,MAAAA,MAAM,EAAEA,MAAO;AAAAG,MAAAA,QAAA,EAEdA,QAAAA;AAAQ,KACC,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMqB,UAAU,gBAAGN,wBAAwB,CAACE,WAAW,EAAE;AACvDD,EAAAA,WAAW,EAAE,YAAA;AACf,CAAC;;;;"}

package/build/lib/web/development/components/Menu/index.js

@@ -0,0 +1,6 @@
+export { Menu } from './Menu.web.js';
+export { MenuItem } from './MenuItem.web.js';
+export { MenuOverlay } from './MenuOverlay.web.js';
+export { MenuDivider } from './VisualSubComponents/MenuDivider.web.js';
+export { MenuFooter, MenuHeader } from './VisualSubComponents/MenuHeaderFooter.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/Menu/index.js.map

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

package/build/lib/web/development/components/Menu/tokens.js

@@ -0,0 +1,26 @@
+import '../../tokens/global/index.js';
+import '../../utils/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { size } from '../../tokens/global/size.js';
+
+var overlayPaddingX = 'spacing.3';
+var overlayPaddingY = 'spacing.4';
+var headerMarginBottom = 'spacing.3';
+var footerPaddingTop = 'spacing.3';
+var getDividerMarginTokens = function getDividerMarginTokens(theme) {
+  var overlayPaddingXValue = getIn(theme, overlayPaddingX);
+  return {
+    marginLeft: "-".concat(makeSpace(overlayPaddingXValue)),
+    marginRight: "-".concat(makeSpace(overlayPaddingXValue)),
+    marginY: 'spacing.1'
+  };
+};
+var MENU_MIN_WIDTH = {
+  base: makeSize(size['200']),
+  s: makeSize(size['240'])
+};
+
+export { MENU_MIN_WIDTH, footerPaddingTop, getDividerMarginTokens, headerMarginBottom, overlayPaddingX, overlayPaddingY };
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../src/components/Menu/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SpacingValueType } from '~components/Box/BaseBox';\nimport { size } from '~tokens/global';\nimport { makeSize, makeSpace } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst overlayPaddingX = 'spacing.3';\nconst overlayPaddingY = 'spacing.4';\nconst headerMarginBottom = 'spacing.3';\nconst footerPaddingTop = 'spacing.3';\n\ntype GetDividerMarginTokensReturnType = {\n  marginLeft: SpacingValueType;\n  marginRight: SpacingValueType;\n  marginY: SpacingValueType;\n};\n\nconst getDividerMarginTokens = (theme: Theme): GetDividerMarginTokensReturnType => {\n  const overlayPaddingXValue = getIn(theme, overlayPaddingX);\n  return {\n    marginLeft: `-${makeSpace(overlayPaddingXValue)}`,\n    marginRight: `-${makeSpace(overlayPaddingXValue)}`,\n    marginY: 'spacing.1',\n  };\n};\n\nconst MENU_MIN_WIDTH = {\n  base: makeSize(size['200']),\n  s: makeSize(size['240']),\n} as const;\n\nexport {\n  overlayPaddingX,\n  overlayPaddingY,\n  MENU_MIN_WIDTH,\n  getDividerMarginTokens,\n  headerMarginBottom,\n  footerPaddingTop,\n};\n"],"names":["overlayPaddingX","overlayPaddingY","headerMarginBottom","footerPaddingTop","getDividerMarginTokens","theme","overlayPaddingXValue","getIn","marginLeft","concat","makeSpace","marginRight","marginY","MENU_MIN_WIDTH","base","makeSize","size","s"],"mappings":";;;;;;;AAMMA,IAAAA,eAAe,GAAG,YAAW;AAC7BC,IAAAA,eAAe,GAAG,YAAW;AAC7BC,IAAAA,kBAAkB,GAAG,YAAW;AAChCC,IAAAA,gBAAgB,GAAG,YAAW;AAQpC,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,KAAY,EAAuC;AACjF,EAAA,IAAMC,oBAAoB,GAAGC,KAAK,CAACF,KAAK,EAAEL,eAAe,CAAC,CAAA;EAC1D,OAAO;AACLQ,IAAAA,UAAU,MAAAC,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AACjDK,IAAAA,WAAW,MAAAF,MAAA,CAAMC,SAAS,CAACJ,oBAAoB,CAAC,CAAE;AAClDM,IAAAA,OAAO,EAAE,WAAA;GACV,CAAA;AACH,EAAC;AAED,IAAMC,cAAc,GAAG;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC3BC,EAAAA,CAAC,EAAEF,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC,CAAA;AACzB;;;;"}

package/build/lib/web/development/components/Menu/useMenu.js

@@ -0,0 +1,178 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import { useFloatingTree, useFloatingNodeId, useFloatingParentNodeId, useListItem, useFloating, offset, flip, shift, size, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useInteractions, useTransitionStyles } from '@floating-ui/react';
+import { useControllableState } from '../../utils/useControllable.js';
+import { OVERLAY_OFFSET, OVERLAY_TRANSITION_OFFSET } from '../BaseMenu/tokens.js';
+import '../../utils/index.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+
+var MenuContext = /*#__PURE__*/React__default.createContext({
+  getItemProps: function getItemProps() {
+    return {};
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHasFocusInside: function setHasFocusInside() {},
+  isOpen: false
+});
+var useMenu = function useMenu() {
+  var contextValue = React__default.useContext(MenuContext);
+  return contextValue;
+};
+var useFloatingMenuSetup = function useFloatingMenuSetup(_ref) {
+  var elementsRef = _ref.elementsRef,
+    openInteraction = _ref.openInteraction,
+    onOpenChange = _ref.onOpenChange,
+    isOpen = _ref.isOpen;
+  var _useControllableState = useControllableState({
+      value: isOpen,
+      defaultValue: false,
+      onChange: function onChange(isOpen) {
+        return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
+          isOpen: isOpen
+        });
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    isControllableOpen = _useControllableState2[0],
+    setIsControllableOpen = _useControllableState2[1];
+  var _React$useState = React__default.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeIndex = _React$useState2[0],
+    setActiveIndex = _React$useState2[1];
+  var tree = useFloatingTree();
+  var nodeId = useFloatingNodeId();
+  var parentId = useFloatingParentNodeId();
+  var item = useListItem();
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var isNested = parentId != null;
+  var _useFloating = useFloating({
+      nodeId: nodeId,
+      open: isControllableOpen,
+      onOpenChange: function onOpenChange(_isOpen) {
+        return setIsControllableOpen(function () {
+          return _isOpen;
+        });
+      },
+      placement: isNested ? 'right-start' : 'bottom-start',
+      middleware: [offset({
+        mainAxis: isNested ? 12 : OVERLAY_OFFSET,
+        alignmentAxis: isNested ? -16 : 0
+      }), flip(), shift(), size({
+        apply: function apply(_ref2) {
+          var availableHeight = _ref2.availableHeight,
+            elements = _ref2.elements;
+          elements.floating.style.maxHeight = "".concat(availableHeight, "px");
+        }
+      })],
+      whileElementsMounted: autoUpdate
+    }),
+    floatingStyles = _useFloating.floatingStyles,
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var hover = useHover(context, {
+    enabled: isNested || openInteraction === 'hover',
+    delay: {
+      open: 75
+    },
+    handleClose: safePolygon({
+      blockPointerEvents: true
+    })
+  });
+  var click = useClick(context, {
+    event: 'mousedown',
+    toggle: !isNested,
+    ignoreMouse: isNested
+  });
+  var role = useRole(context, {
+    role: 'menu'
+  });
+  var dismiss = useDismiss(context, {
+    bubbles: true
+  });
+  var listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex: activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex,
+    focusItemOnHover: false
+  });
+  var _useInteractions = useInteractions([hover, click, role, dismiss, listNavigation]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var _useTransitionStyles = useTransitionStyles(context, {
+      duration: theme.motion.duration.quick,
+      initial: function initial(_ref3) {
+        var side = _ref3.side;
+        var transitionOffset = makeSize(OVERLAY_TRANSITION_OFFSET);
+        var transformMap = {
+          top: "translateY(".concat(transitionOffset, ")"),
+          right: "translateX(-".concat(transitionOffset, ")"),
+          left: "translateX(".concat(transitionOffset, ")"),
+          bottom: "translateY(-".concat(transitionOffset, ")")
+        };
+        return {
+          transform: transformMap[side !== null && side !== void 0 ? side : 'bottom'],
+          opacity: 0
+        };
+      }
+    }),
+    isMounted = _useTransitionStyles.isMounted,
+    floatingTransitionStyles = _useTransitionStyles.styles;
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere
+  // in the tree.
+  React__default.useEffect(function () {
+    if (!tree) return;
+    var handleTreeClick = function handleTreeClick() {
+      setIsControllableOpen(function () {
+        return false;
+      });
+    };
+    var onSubMenuOpen = function onSubMenuOpen(event) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsControllableOpen(function () {
+          return false;
+        });
+      }
+    };
+    tree.events.on('click', handleTreeClick);
+    tree.events.on('menuopen', onSubMenuOpen);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      // Cleanup
+      tree.events.off('click', handleTreeClick);
+      tree.events.off('menuopen', onSubMenuOpen);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tree, nodeId, parentId]);
+  React__default.useEffect(function () {
+    if (isOpen && tree) {
+      tree.events.emit('menuopen', {
+        parentId: parentId,
+        nodeId: nodeId
+      });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+  return {
+    getReferenceProps: getReferenceProps,
+    getFloatingProps: getFloatingProps,
+    getItemProps: getItemProps,
+    item: item,
+    context: context,
+    nodeId: nodeId,
+    isOpen: isControllableOpen,
+    floatingStyles: floatingStyles,
+    refs: refs,
+    isNested: isNested,
+    isMounted: isMounted,
+    floatingTransitionStyles: floatingTransitionStyles
+  };
+};
+
+export { MenuContext, useFloatingMenuSetup, useMenu };
+//# sourceMappingURL=useMenu.js.map

package/build/lib/web/development/components/Menu/useMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenu.js","sources":["../../../../../../src/components/Menu/useMenu.ts"],"sourcesContent":["import React from 'react';\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListNavigation,\n  useListItem,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport type { MenuContextType, UseFloatingMenuProps, UseFloatingMenuReturnType } from './types';\nimport { useControllableState } from '~utils/useControllable';\nimport { OVERLAY_OFFSET, OVERLAY_TRANSITION_OFFSET } from '~components/BaseMenu/tokens';\nimport { makeSize, useTheme } from '~utils';\n\nconst MenuContext = React.createContext<MenuContextType>({\n  getItemProps: () => ({}),\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setHasFocusInside: () => {},\n  isOpen: false,\n});\n\nconst useMenu = (): MenuContextType => {\n  const contextValue = React.useContext(MenuContext);\n  return contextValue;\n};\n\nconst useFloatingMenuSetup = ({\n  elementsRef,\n  openInteraction,\n  onOpenChange,\n  isOpen,\n}: UseFloatingMenuProps): UseFloatingMenuReturnType => {\n  const [isControllableOpen, setIsControllableOpen] = useControllableState({\n    value: isOpen,\n    defaultValue: false,\n    onChange: (isOpen) => onOpenChange?.({ isOpen }),\n  });\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const parentId = useFloatingParentNodeId();\n  const item = useListItem();\n  const { theme } = useTheme();\n\n  const isNested = parentId != null;\n\n  const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({\n    nodeId,\n    open: isControllableOpen,\n    onOpenChange: (_isOpen) => setIsControllableOpen(() => _isOpen),\n    placement: isNested ? 'right-start' : 'bottom-start',\n    middleware: [\n      offset({ mainAxis: isNested ? 12 : OVERLAY_OFFSET, alignmentAxis: isNested ? -16 : 0 }),\n      flip(),\n      shift(),\n      size({\n        apply({ availableHeight, elements }) {\n          elements.floating.style.maxHeight = `${availableHeight}px`;\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const hover = useHover(context, {\n    enabled: isNested || openInteraction === 'hover',\n    delay: { open: 75 },\n    handleClose: safePolygon({ blockPointerEvents: true }),\n  });\n  const click = useClick(context, {\n    event: 'mousedown',\n    toggle: !isNested,\n    ignoreMouse: isNested,\n  });\n  const role = useRole(context, { role: 'menu' });\n  const dismiss = useDismiss(context, { bubbles: true });\n  const listNavigation = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    nested: isNested,\n    onNavigate: setActiveIndex,\n    focusItemOnHover: false,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    hover,\n    click,\n    role,\n    dismiss,\n    listNavigation,\n  ]);\n\n  const { isMounted, styles: floatingTransitionStyles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: ({ side }) => {\n      const transitionOffset = makeSize(OVERLAY_TRANSITION_OFFSET);\n      const transformMap = {\n        top: `translateY(${transitionOffset})`,\n        right: `translateX(-${transitionOffset})`,\n        left: `translateX(${transitionOffset})`,\n        bottom: `translateY(-${transitionOffset})`,\n      } as const;\n\n      return {\n        transform: transformMap[side ?? 'bottom'],\n        opacity: 0,\n      };\n    },\n  });\n\n  // Event emitter allows you to communicate across tree components.\n  // This effect closes all menus when an item gets clicked anywhere\n  // in the tree.\n  React.useEffect(() => {\n    if (!tree) return;\n\n    const handleTreeClick = (): void => {\n      setIsControllableOpen(() => false);\n    };\n\n    const onSubMenuOpen = (event: { nodeId: string; parentId: string }): void => {\n      if (event.nodeId !== nodeId && event.parentId === parentId) {\n        setIsControllableOpen(() => false);\n      }\n    };\n\n    tree.events.on('click', handleTreeClick);\n    tree.events.on('menuopen', onSubMenuOpen);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      // Cleanup\n      tree.events.off('click', handleTreeClick);\n      tree.events.off('menuopen', onSubMenuOpen);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tree, nodeId, parentId]);\n\n  React.useEffect(() => {\n    if (isOpen && tree) {\n      tree.events.emit('menuopen', { parentId, nodeId });\n    }\n  }, [tree, isOpen, nodeId, parentId]);\n\n  return {\n    getReferenceProps,\n    getFloatingProps,\n    getItemProps,\n    item,\n    context,\n    nodeId,\n    isOpen: isControllableOpen,\n    floatingStyles,\n    refs,\n    isNested,\n    isMounted,\n    floatingTransitionStyles,\n  };\n};\n\nexport { MenuContext, useMenu, useFloatingMenuSetup };\n"],"names":["MenuContext","React","createContext","getItemProps","setHasFocusInside","isOpen","useMenu","contextValue","useContext","useFloatingMenuSetup","_ref","elementsRef","openInteraction","onOpenChange","_useControllableState","useControllableState","value","defaultValue","onChange","_useControllableState2","_slicedToArray","isControllableOpen","setIsControllableOpen","_React$useState","useState","_React$useState2","activeIndex","setActiveIndex","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","item","useListItem","_useTheme","useTheme","theme","isNested","_useFloating","useFloating","open","_isOpen","placement","middleware","offset","mainAxis","OVERLAY_OFFSET","alignmentAxis","flip","shift","size","apply","_ref2","availableHeight","elements","floating","style","maxHeight","concat","whileElementsMounted","autoUpdate","floatingStyles","refs","context","hover","useHover","enabled","delay","handleClose","safePolygon","blockPointerEvents","click","useClick","event","toggle","ignoreMouse","role","useRole","dismiss","useDismiss","bubbles","listNavigation","useListNavigation","listRef","nested","onNavigate","focusItemOnHover","_useInteractions","useInteractions","getReferenceProps","getFloatingProps","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","_ref3","side","transitionOffset","makeSize","OVERLAY_TRANSITION_OFFSET","transformMap","top","right","left","bottom","transform","opacity","isMounted","floatingTransitionStyles","styles","useEffect","handleTreeClick","onSubMenuOpen","events","on","off","emit"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ 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 { classes, COLLAPSED_L1_WIDTH, TRANSITION_CLEANUP_DELAY, HOVER_AGAIN_DELAY, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL, L1_EXIT_HOVER_DELAY, SKIP_NAV_ID } from './tokens.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/index.js';
 import '../Drawer/index.js';
@@ -259,7 +259,10 @@ var SideNav = function SideNav(_ref4) {
         m: 'flex'
       },
       flexDirection: "column",
-      width: makeSize(EXPANDED_L1_WIDTH),
+      width: {
+        base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),
+        xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL)
+      },
       as: "nav"
     }, metaAttribute({
       name: MetaConstants.SideNav,