carbon-react 154.3.2 → 154.3.3-beta.1

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.js

@@ -1,196 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResponsiveVerticalMenu = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _responsiveVerticalMenu = require("./responsive-vertical-menu.context");
-var _responsiveVerticalMenu2 = require("./responsive-vertical-menu.style");
-var _box = _interopRequireDefault(require("../../box"));
-var _modal = _interopRequireDefault(require("../../modal"));
-var _useIsAboveBreakpoint = _interopRequireDefault(require("../../../hooks/__internal__/useIsAboveBreakpoint"));
-var _useMediaQuery = _interopRequireDefault(require("../../../hooks/useMediaQuery"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
-var _depth = require("./__internal__/depth.context");
-var _focus = require("./__internal__/focus.context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const BaseMenu = ({
-  children,
-  height,
-  responsiveBreakpoint = 700,
-  width,
-  ...rest
-}) => {
-  const {
-    activeMenuItem,
-    buttonRef,
-    containerRef,
-    menuRef,
-    responsiveMode,
-    setActiveMenuItem,
-    setReducedMotion,
-    setResponsiveMode
-  } = (0, _responsiveVerticalMenu.useResponsiveVerticalMenu)();
-  const [active, setActive] = (0, _react.useState)(false);
-  const largeScreen = (0, _useIsAboveBreakpoint.default)(responsiveBreakpoint);
-  const [left, setLeft] = (0, _react.useState)("auto");
-  const [responsiveWidth, setResponsiveWidth] = (0, _react.useState)("100%");
-  const [top, setTop] = (0, _react.useState)("auto");
-  const subMenuRef = (0, _react.useRef)(null);
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
-  const {
-    current: menu
-  } = menuRef;
-  const {
-    current: button
-  } = buttonRef;
-  const measureDimensions = (0, _react.useCallback)(() => {
-    // Only calculate the width of the menu if the menu is open in responsive mode
-    if (active && responsiveMode) {
-      // Get the width of the menu container. The ref might not be set yet, hence
-      // the use of `document.querySelector` to find the menu container.
-      const menuContainer = menu || document.querySelector("[id='responsive-vertical-menu-primary']");
-      /* istanbul ignore else */
-      if (menuContainer) {
-        setResponsiveWidth(`${menuContainer.getBoundingClientRect().width - 16}px`);
-      }
-    }
-    if (activeMenuItem && menu) {
-      setLeft(`${menu.getBoundingClientRect().right}px`);
-    } else {
-      setLeft("auto");
-    }
-    if (activeMenuItem && button) {
-      setTop(`${button.getBoundingClientRect().bottom}px`);
-    } else {
-      setTop("auto");
-    }
-  }, [active, menu, responsiveMode, activeMenuItem, button]);
-  const handleOutsideClick = (0, _react.useCallback)(event => {
-    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
-    if (notInContainer) {
-      setActive(false);
-    }
-  }, [containerRef]);
-  const handleActiveToggle = (0, _react.useCallback)(() => {
-    setActive(previousState => !previousState);
-    // Make sure the menu is closed when the button is clicked (prevents historic menu items being retained in memory)
-    setActiveMenuItem(null);
-  }, [setActiveMenuItem]);
-  (0, _react.useLayoutEffect)(() => {
-    measureDimensions();
-  }, [active, measureDimensions, menu, responsiveMode]);
-  (0, _react.useEffect)(() => {
-    const handleBlur = () => {
-      setTimeout(() => {
-        if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
-          setActive(false);
-        }
-      }, 0);
-    };
-    const handleClose = e => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        setActive(false);
-      }
-    };
-    const currentContainer = containerRef.current;
-    if (active && !responsiveMode) {
-      document.addEventListener("keydown", handleClose);
-      window.addEventListener("click", handleOutsideClick);
-      currentContainer?.addEventListener("focusout", handleBlur);
-    }
-    return () => {
-      document.removeEventListener("keydown", handleClose);
-      window.removeEventListener("click", handleOutsideClick);
-      currentContainer?.removeEventListener("focusout", handleBlur);
-    };
-  }, [active, containerRef, handleOutsideClick, responsiveMode]);
-  (0, _react.useEffect)(() => {
-    setReducedMotion?.(reduceMotion);
-    setResponsiveMode?.(!largeScreen);
-  }, [largeScreen, reduceMotion, setReducedMotion, setResponsiveMode]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledButton, {
-    active: active,
-    buttonType: "tertiary",
-    "data-component": "responsive-vertical-menu-launcher",
-    "data-role": "responsive-vertical-menu-launcher",
-    iconType: "squares_nine",
-    id: "responsive-vertical-menu-launcher",
-    onClick: handleActiveToggle,
-    ref: buttonRef
-  }), responsiveMode ? /*#__PURE__*/_react.default.createElement(_modal.default, {
-    open: active
-  }, /*#__PURE__*/_react.default.createElement(_box.default, {
-    position: "fixed",
-    top: 0,
-    width: responsiveWidth
-  }, /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "flex",
-    justifyContent: "flex-end",
-    width: "100%",
-    backgroundColor: "var(--colorsGray850)",
-    p: 1
-  }, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledCloseButton, {
-    "aria-label": "close-menu",
-    "data-component": "responsive-vertical-menu-close",
-    "data-role": "responsive-vertical-menu-close",
-    iconType: "close",
-    size: "small",
-    buttonType: "tertiary",
-    onClick: () => {
-      setActive(false);
-      setActiveMenuItem(null);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
-    height: height,
-    id: "responsive-vertical-menu-primary",
-    menu: "primary",
-    reduceMotion: reduceMotion,
-    ref: menuRef,
-    responsive: true,
-    tabIndex: -1,
-    top: "48px",
-    width: width
-  }, children))) : /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledGlobalVerticalMenuWrapper, _extends({}, rest, (0, _tags.default)("responsive-vertical-menu", rest)), active && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
-    childOpen: !!activeMenuItem,
-    "data-component": "responsive-vertical-menu-primary",
-    "data-role": "responsive-vertical-menu-primary",
-    height: height || "100%",
-    id: "responsive-vertical-menu-primary",
-    menu: "primary",
-    reduceMotion: reduceMotion,
-    ref: menuRef,
-    responsive: false,
-    tabIndex: -1,
-    top: top,
-    width: width
-  }, children), activeMenuItem ? /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenu2.StyledResponsiveMenu, {
-    "data-component": "responsive-vertical-menu-secondary",
-    "data-role": "responsive-vertical-menu-secondary",
-    height: height || "100%",
-    id: "responsive-vertical-menu-secondary",
-    left: left,
-    menu: "secondary",
-    reduceMotion: reduceMotion,
-    ref: subMenuRef,
-    responsive: false,
-    tabIndex: -1,
-    top: top,
-    width: width
-  }, activeMenuItem.children) : null)));
-};
-const ResponsiveVerticalMenu = ({
-  children,
-  ...props
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_depth.DepthProvider, null, /*#__PURE__*/_react.default.createElement(_focus.MenuFocusProvider, null, /*#__PURE__*/_react.default.createElement(BaseMenu, props, children)));
-};
-exports.ResponsiveVerticalMenu = ResponsiveVerticalMenu;
-var _default = exports.default = ResponsiveVerticalMenu;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./responsive-vertical-menu.context.js"),n=require("./responsive-vertical-menu.style.js"),o=require("../../box/box.component.js"),i=require("../../modal/modal.component.js"),s=require("../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js"),c=require("../../../hooks/useMediaQuery/useMediaQuery.js"),u=require("../../../__internal__/utils/helpers/tags/tags.js"),l=require("./__internal__/depth.context.js"),a=require("./__internal__/focus.context.js");function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){d(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const f=l=>{var{children:a,height:d,responsiveBreakpoint:f=700,width:y}=l,h=m(l,["children","height","responsiveBreakpoint","width"]);const{activeMenuItem:b,buttonRef:j,containerRef:x,menuRef:O,responsiveMode:g,setActiveMenuItem:w,setReducedMotion:k,setResponsiveMode:_}=r.useResponsiveVerticalMenu(),[M,S]=t.useState(!1),P=s.default(f),[E,R]=t.useState("auto"),[q,B]=t.useState("100%"),[C,I]=t.useState("auto"),L=t.useRef(null),D=!c.default("screen and (prefers-reduced-motion: no-preference)"),{current:T}=O,{current:A}=j,V=t.useCallback((()=>{if(M&&g){const e=T||document.querySelector("[id='responsive-vertical-menu-primary']");e&&B(e.getBoundingClientRect().width-16+"px")}R(b&&T?`${T.getBoundingClientRect().right}px`:"auto"),I(b&&A?`${A.getBoundingClientRect().bottom}px`:"auto")}),[M,T,g,b,A]),F=t.useCallback((e=>{x.current&&!x.current.contains(e.target)&&S(!1)}),[x]),G=t.useCallback((()=>{S((e=>!e)),w(null)}),[w]);return t.useLayoutEffect((()=>{V()}),[M,V,T,g]),t.useEffect((()=>{const e=()=>{setTimeout((()=>{x.current&&!x.current.contains(document.activeElement)&&S(!1)}),0)},t=e=>{"Escape"===e.key&&(e.preventDefault(),S(!1))},r=x.current;return M&&!g&&(document.addEventListener("keydown",t),window.addEventListener("click",F),null==r||r.addEventListener("focusout",e)),()=>{document.removeEventListener("keydown",t),window.removeEventListener("click",F),null==r||r.removeEventListener("focusout",e)}}),[M,x,F,g]),t.useEffect((()=>{null==k||k(D),null==_||_(!P)}),[P,D,k,_]),e.jsxs("div",{ref:x,children:[e.jsx(n.StyledButton,{active:M,buttonType:"tertiary","data-component":"responsive-vertical-menu-launcher","data-role":"responsive-vertical-menu-launcher",iconType:"squares_nine",id:"responsive-vertical-menu-launcher",onClick:G,ref:j}),g?e.jsx(i.default,{open:M,children:e.jsxs(o.Box,{position:"fixed",top:0,width:q,children:[e.jsx(o.Box,{display:"flex",justifyContent:"flex-end",width:"100%",backgroundColor:"var(--colorsGray850)",p:1,children:e.jsx(n.StyledCloseButton,{"aria-label":"close-menu","data-component":"responsive-vertical-menu-close","data-role":"responsive-vertical-menu-close",iconType:"close",size:"small",buttonType:"tertiary",onClick:()=>{S(!1),w(null)}})}),e.jsx(n.StyledResponsiveMenu,{height:d,id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:D,ref:O,responsive:!0,tabIndex:-1,top:"48px",width:y,children:a})]})}):e.jsx(n.StyledGlobalVerticalMenuWrapper,v(p({},h,u.default("responsive-vertical-menu",h)),{children:M&&e.jsxs(e.Fragment,{children:[e.jsx(n.StyledResponsiveMenu,{childOpen:!!b,"data-component":"responsive-vertical-menu-primary","data-role":"responsive-vertical-menu-primary",height:d||"100%",id:"responsive-vertical-menu-primary",menu:"primary",reduceMotion:D,ref:O,responsive:!1,tabIndex:-1,top:C,width:y,children:a}),b?e.jsx(n.StyledResponsiveMenu,{"data-component":"responsive-vertical-menu-secondary","data-role":"responsive-vertical-menu-secondary",height:d||"100%",id:"responsive-vertical-menu-secondary",left:E,menu:"secondary",reduceMotion:D,ref:L,responsive:!1,tabIndex:-1,top:C,width:y,children:b.children}):null]})}))]})},y=t=>{var{children:r}=t,n=m(t,["children"]);return e.jsx(l.DepthProvider,{children:e.jsx(a.MenuFocusProvider,{children:e.jsx(f,v(p({},n),{children:r}))})})};exports.ResponsiveVerticalMenu=y,exports.default=y;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.context.js

@@ -1,42 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useResponsiveVerticalMenu = exports.ResponsiveVerticalMenuProvider = exports.ResponsiveVerticalMenuContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ResponsiveVerticalMenuContext = exports.ResponsiveVerticalMenuContext = /*#__PURE__*/(0, _react.createContext)(null);
-const useResponsiveVerticalMenu = () => {
-  const context = (0, _react.useContext)(ResponsiveVerticalMenuContext);
-  if (context === null) {
-    throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");
-  }
-  return context;
-};
-exports.useResponsiveVerticalMenu = useResponsiveVerticalMenu;
-const ResponsiveVerticalMenuProvider = ({
-  children
-}) => {
-  const [activeMenuItem, setActiveMenuItem] = (0, _react.useState)(null);
-  const buttonRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  const menuRef = (0, _react.useRef)(null);
-  const [responsiveMode, setResponsiveMode] = (0, _react.useState)(false);
-  const [reducedMotion, setReducedMotion] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(ResponsiveVerticalMenuContext.Provider, {
-    value: {
-      activeMenuItem,
-      buttonRef,
-      containerRef,
-      menuRef,
-      reducedMotion,
-      responsiveMode,
-      setActiveMenuItem,
-      setReducedMotion,
-      setResponsiveMode
-    }
-  }, children);
-};
-exports.ResponsiveVerticalMenuProvider = ResponsiveVerticalMenuProvider;
+"use strict";var e=require("react/jsx-runtime"),t=require("react");const n=t.createContext(null);exports.ResponsiveVerticalMenuContext=n,exports.ResponsiveVerticalMenuProvider=({children:s})=>{const[r,u]=t.useState(null),i=t.useRef(null),o=t.useRef(null),l=t.useRef(null),[c,a]=t.useState(!1),[v,R]=t.useState(!1);return e.jsx(n.Provider,{value:{activeMenuItem:r,buttonRef:i,containerRef:o,menuRef:l,reducedMotion:v,responsiveMode:c,setActiveMenuItem:u,setReducedMotion:R,setResponsiveMode:a},children:s})},exports.useResponsiveVerticalMenu=()=>{const e=t.useContext(n);if(null===e)throw new Error("useResponsiveVerticalMenu must be used within a ResponsiveVerticalMenuProvider");return e};

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.js

@@ -1,104 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledResponsiveMenu = exports.StyledGlobalVerticalMenuWrapper = exports.StyledCloseButton = exports.StyledButton = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _button = _interopRequireDefault(require("../../button"));
-var _addFocusStyling = _interopRequireDefault(require("../../../style/utils/add-focus-styling"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledButton = exports.StyledButton = (0, _styledComponents.default)(_button.default)`
-  border-radius: 0;
-  background-color: var(
-    ${({
-  active
-}) => active ? "--colorsActionMinorGray700" : "--colorsUtilityYin100"}
-  );
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-  }
-
-  &:focus {
-    appearance: none;
-    -webkit-appearance: none;
-    -webkit-box-shadow: ${(0, _addFocusStyling.default)(true)};
-    box-shadow: ${(0, _addFocusStyling.default)(true)};
-    border: 1px solid black;
-    outline: transparent 3px solid;
-  }
-`;
-const StyledCloseButton = exports.StyledCloseButton = (0, _styledComponents.default)(_button.default)`
-  border-radius: 0;
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-  }
-`;
-const StyledGlobalVerticalMenuWrapper = exports.StyledGlobalVerticalMenuWrapper = _styledComponents.default.div`
-  background-color: black;
-  color: white;
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  width: fit-content;
-`;
-const StyledResponsiveMenu = exports.StyledResponsiveMenu = _styledComponents.default.div`
-  align-items: center;
-  background-color: var(--colorsUtilityYin100);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: ${({
-  height
-}) => height || "100%"};
-  justify-content: flex-start;
-  overflow-y: auto;
-  padding-bottom: var(--spacing100);
-  ${({
-  responsive
-}) => !responsive && (0, _styledComponents.css)`
-      padding-left: var(--spacing200);
-      padding-right: var(--spacing200);
-    `};
-  padding-top: var(--spacing100);
-  position: fixed;
-  top: ${({
-  top
-}) => top};
-  width: ${({
-  width
-}) => width || "100%"};
-  max-width: 375px;
-  z-index: 1000;
-  border-right: ${({
-  childOpen,
-  menu
-}) => menu === "secondary" || !childOpen && menu === "primary" ? "2px solid var(--colorsGray850)" : "1px solid var(--colorsGray850)"};
-
-  ${({
-  childOpen
-}) => childOpen && (0, _styledComponents.css)`
-      padding-right: calc(var(--spacing200) + 1px);
-    `}
-
-  ${({
-  height,
-  left,
-  menu
-}) => menu === "secondary" && (0, _styledComponents.css)`
-      left: ${left};
-      min-height: ${height};
-    `}
-
-    ${({
-  responsive
-}) => !responsive && (0, _styledComponents.css)`
-      & > :last-child {
-        margin-bottom: 40px;
-      }
-    `}
-`;
+"use strict";var e=require("styled-components"),o=require("../../button/button.component.js"),t=require("../../../style/utils/add-focus-styling.js");function i(e){return e&&e.__esModule?e:{default:e}}var a=i(e);const n=a.default(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledButton",componentId:"sc-a548a029-0"})(["border-radius:0;background-color:var( ",' );[data-component="icon"]{color:var(--colorsUtilityYang100);}&:focus{appearance:none;-webkit-appearance:none;-webkit-box-shadow:',";box-shadow:",";border:1px solid black;outline:transparent 3px solid;}"],(({active:e})=>e?"--colorsActionMinorGray700":"--colorsUtilityYin100"),t.default(!0),t.default(!0)),r=a.default(o.default).withConfig({displayName:"responsive-vertical-menu.style__StyledCloseButton",componentId:"sc-a548a029-1"})(['border-radius:0;[data-component="icon"]{color:var(--colorsUtilityYang100);}']),s=a.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledGlobalVerticalMenuWrapper",componentId:"sc-a548a029-2"})(["background-color:black;color:white;display:flex;flex-direction:row;position:absolute;width:fit-content;"]),l=a.default.div.withConfig({displayName:"responsive-vertical-menu.style__StyledResponsiveMenu",componentId:"sc-a548a029-3"})(["align-items:center;background-color:var(--colorsUtilityYin100);box-sizing:border-box;display:flex;flex-direction:column;height:",";justify-content:flex-start;overflow-y:auto;padding-bottom:var(--spacing100);",";padding-top:var(--spacing100);position:fixed;top:",";width:",";max-width:375px;z-index:1000;border-right:",";"," "," ",""],(({height:e})=>e||"100%"),(({responsive:o})=>!o&&e.css(["padding-left:var(--spacing200);padding-right:var(--spacing200);"])),(({top:e})=>e),(({width:e})=>e||"100%"),(({childOpen:e,menu:o})=>"secondary"===o||!e&&"primary"===o?"2px solid var(--colorsGray850)":"1px solid var(--colorsGray850)"),(({childOpen:o})=>o&&e.css(["padding-right:calc(var(--spacing200) + 1px);"])),(({height:o,left:t,menu:i})=>"secondary"===i&&e.css(["left:",";min-height:",";"],t,o)),(({responsive:o})=>!o&&e.css(["& > :last-child{margin-bottom:40px;}"])));exports.StyledButton=n,exports.StyledCloseButton=r,exports.StyledGlobalVerticalMenuWrapper=s,exports.StyledResponsiveMenu=l;

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -1,83 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VerticalMenuFullScreen = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
-var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
-var _portal = _interopRequireDefault(require("../../portal"));
-var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap/focus-trap.component"));
-var _iconButton = _interopRequireDefault(require("../../icon-button"));
-var _icon = _interopRequireDefault(require("../../icon"));
-var _box = _interopRequireDefault(require("../../box"));
-var _verticalMenu = require("../vertical-menu.style");
-var _verticalMenu2 = require("../__internal__/vertical-menu.context");
-var _globals = require("../../../__internal__/dom/globals");
-var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
-var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
-var _useMediaQuery = _interopRequireDefault(require("../../../hooks/useMediaQuery"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const VerticalMenuFullScreen = ({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  children,
-  isOpen,
-  onClose,
-  ...rest
-}) => {
-  const l = (0, _useLocale.default)();
-  const menuWrapperRef = (0, _react.useRef)(null);
-  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
-  const handleKeyDown = (0, _react.useCallback)(ev => {
-    // istanbul ignore else
-    if (_events.default.isEscKey(ev)) {
-      onClose(ev);
-    }
-  }, [onClose]);
-  const safeDocument = (0, _globals.getDocument)();
-  (0, _useModalManager.default)({
-    open: isOpen,
-    closeModal: handleKeyDown,
-    modalRef: menuWrapperRef,
-    topModalOverride: true,
-    focusCallToActionElement: safeDocument?.activeElement
-  });
-  return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    isOpen: isOpen,
-    wrapperRef: menuWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuFullScreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    prefersReducedMotion: reduceMotion,
-    scrollVariant: "light",
-    as: "nav",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, (0, _tags.default)("vertical-menu-full-screen", rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "flex",
-    justifyContent: "flex-end",
-    height: "60px",
-    alignItems: "flex-start",
-    px: "20px",
-    pt: "20px",
-    boxSizing: "border-box"
-  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-    "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
-    onClick: onClose,
-    "data-element": "close"
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "close",
-    color: "var(--colorsComponentsLeftnavWinterStandardContent)"
-  }))), /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
-    value: {
-      isFullScreen: true
-    }
-  }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, children)))));
-};
-exports.VerticalMenuFullScreen = VerticalMenuFullScreen;
-var _default = exports.default = VerticalMenuFullScreen;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../__internal__/utils/helpers/tags/tags.js"),n=require("../../../hooks/__internal__/useLocale/useLocale.js"),l=require("../../portal/portal.js"),o=require("../../../__internal__/focus-trap/focus-trap.component.js"),a=require("../../icon-button/icon-button.component.js"),i=require("../../icon/icon.component.js"),s=require("../../box/box.component.js"),c=require("../vertical-menu.style.js"),u=require("../__internal__/vertical-menu.context.js"),p=require("../../../__internal__/dom/globals.js"),d=require("../../../__internal__/utils/helpers/events/events.js"),f=require("../../../hooks/__internal__/useModalManager/useModalManager.js"),b=require("../../../hooks/useMediaQuery/useMediaQuery.js");function j(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){j(e,r,t[r])}))}return e}const O=j=>{var{"aria-label":O,"aria-labelledby":_,children:x,isOpen:m,onClose:v}=j,g=function(e,r){if(null==e)return{};var t,n,l=function(e,r){if(null==e)return{};var t,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(l[t]=e[t]);return l}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}(j,["aria-label","aria-labelledby","children","isOpen","onClose"]);const h=n.default(),P=r.useRef(null),q=!b.default("screen and (prefers-reduced-motion: no-preference)"),M=r.useCallback((e=>{d.default.isEscKey(e)&&v(e)}),[v]),S=p.getDocument();return f.default({open:m,closeModal:M,modalRef:P,topModalOverride:!0,focusCallToActionElement:null==S?void 0:S.activeElement}),e.jsx(l.Portal,{children:e.jsx(o.default,{isOpen:m,wrapperRef:P,children:e.jsxs(c.StyledVerticalMenuFullScreen,(w=y({ref:P,isOpen:m,prefersReducedMotion:q,scrollVariant:"light",as:"nav","aria-label":O,"aria-labelledby":_},t.default("vertical-menu-full-screen",g)),k={children:[e.jsx(s.Box,{display:"flex",justifyContent:"flex-end",height:"60px",alignItems:"flex-start",px:"20px",pt:"20px",boxSizing:"border-box",children:e.jsx(a.default,{"aria-label":h.verticalMenuFullScreen.ariaLabels.close(),onClick:v,"data-element":"close",children:e.jsx(i.default,{type:"close",color:"var(--colorsComponentsLeftnavWinterStandardContent)"})})}),e.jsx(u.VerticalMenuProvider,{value:{isFullScreen:!0},children:e.jsx(c.StyledList,{children:x})})]},k=null!=k?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(k,e))})),w))})});var w,k};exports.VerticalMenuFullScreen=O,exports.default=O;

package/lib/components/vertical-menu/vertical-menu-item/__internal__/menu-item.context.js

@@ -1,11 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = /*#__PURE__*/_react.default.createContext({
-  level: 0
-});
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")).default.createContext({level:0});exports.default=t;

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -1,81 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VerticalMenuItem = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
-var _utils = require("../../../style/utils");
-var _verticalMenu = require("../vertical-menu.style");
-var _menuItem = _interopRequireDefault(require("./__internal__/menu-item.context"));
-var _verticalMenu2 = require("../__internal__/vertical-menu.context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const VerticalMenuItem = ({
-  defaultOpen = false,
-  title,
-  iconType,
-  adornment,
-  children,
-  component,
-  active,
-  height = "56px",
-  href,
-  ...rest
-}) => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
-  const handleOnClick = () => {
-    setIsOpen(state => !state);
-  };
-  const {
-    level
-  } = (0, _react.useContext)(_menuItem.default);
-  const {
-    isFullScreen
-  } = (0, _verticalMenu2.useVerticalMenuContext)();
-  const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
-  const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
-  let itemProps = {};
-  if (href) {
-    itemProps = {
-      as: "a",
-      href
-    };
-  }
-  if (component) {
-    itemProps = {
-      as: component,
-      href,
-      tabIndex: 0,
-      ...rest
-    };
-  }
-  if (children) {
-    itemProps = {
-      as: "button",
-      type: "button",
-      "aria-expanded": isOpen,
-      onClick: handleOnClick
-    };
-  }
-  const paddingX = `calc(var(--spacing500) + (${level} * var(--spacing400)))`;
-  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuItem, _extends({
-    height: height,
-    px: paddingX,
-    py: 2,
-    active: shouldDisplayActiveState
-  }, itemProps, (0, _utils.filterStyledSystemPaddingProps)(rest), (0, _tags.default)("vertical-menu-item", rest)), iconType && /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledTitleIcon, {
-    type: iconType
-  }), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledTitle, null, title), adornment && /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledAdornment, null, renderAdornment()), children && !isFullScreen && /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledChevronIcon, {
-    type: isOpen ? "chevron_up_thick" : "chevron_down_thick"
-  })), (isOpen || isFullScreen) && /*#__PURE__*/_react.default.createElement(_menuItem.default.Provider, {
-    value: {
-      level: level + 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, children)));
-};
-exports.VerticalMenuItem = VerticalMenuItem;
-var _default = exports.default = VerticalMenuItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../__internal__/utils/helpers/tags/tags.js"),n=require("../../../style/utils/filter-styled-system-padding-props.js"),i=require("../vertical-menu.style.js"),c=require("./__internal__/menu-item.context.js"),l=require("../__internal__/vertical-menu.context.js");function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}const s=o=>{var{defaultOpen:s=!1,title:a,iconType:p,adornment:y,children:f,component:d,active:b,height:j="56px",href:O}=o,h=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["defaultOpen","title","iconType","adornment","children","component","active","height","href"]);const[v,m]=t.useState(s),{level:g}=t.useContext(c.default),{isFullScreen:x}=l.useVerticalMenuContext(),_="function"==typeof b?b(v):b;let P={};O&&(P={as:"a",href:O}),d&&(P=u({as:d,href:O,tabIndex:0},h)),f&&(P={as:"button",type:"button","aria-expanded":v,onClick:()=>{m((e=>!e))}});const S=`calc(var(--spacing500) + (${g} * var(--spacing400)))`;return e.jsxs("li",{children:[e.jsxs(i.StyledVerticalMenuItem,(w=u({height:j,px:S,py:2,active:_},P,n.default(h),r.default("vertical-menu-item",h)),q={children:[p&&e.jsx(i.StyledTitleIcon,{type:p}),e.jsx(i.StyledTitle,{children:a}),y&&e.jsx(i.StyledAdornment,{children:"function"==typeof y?y(v):y}),f&&!x&&e.jsx(i.StyledChevronIcon,{type:v?"chevron_up_thick":"chevron_down_thick"})]},q=null!=q?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(q,e))})),w)),(v||x)&&e.jsx(c.default.Provider,{value:{level:g+1},children:e.jsx(i.StyledList,{children:f})})]});var w,q};exports.VerticalMenuItem=s,exports.default=s;

package/lib/components/vertical-menu/vertical-menu-trigger/vertical-menu-trigger.component.js

@@ -1,30 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VerticalMenuTrigger = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
-var _utils = require("../../../style/utils");
-var _verticalMenu = require("../vertical-menu.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const VerticalMenuTrigger = ({
-  height = "40px",
-  p = 2,
-  onClick,
-  children,
-  ...rest
-}) => {
-  const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  return /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenuItem, _extends({
-    onClick: onClick,
-    as: "button",
-    height: height,
-    p: p,
-    tabIndex: 0
-  }, paddingProps, (0, _tags.default)("vertical-menu-trigger", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledTitle, null, children));
-};
-exports.VerticalMenuTrigger = VerticalMenuTrigger;
-var _default = exports.default = VerticalMenuTrigger;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("../../../__internal__/utils/helpers/tags/tags.js"),r=require("../../../style/utils/filter-styled-system-padding-props.js"),n=require("../vertical-menu.style.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=o=>{var{height:c="40px",p:l=2,onClick:u,children:s}=o,a=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["height","p","onClick","children"]);const p=r.default(a);return e.jsx(n.StyledVerticalMenuItem,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({onClick:u,as:"button",height:c,p:l,tabIndex:0},p,t.default("vertical-menu-trigger",a)),y=null!=(y={children:e.jsx(n.StyledTitle,{children:s})})?y:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(y)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(y)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(y,e))})),b));var b,y};exports.VerticalMenuTrigger=o,exports.default=o;

package/lib/components/vertical-menu/vertical-menu.component.js

@@ -1,39 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VerticalMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _verticalMenu = require("./vertical-menu.style");
-var _verticalMenu2 = require("./__internal__/vertical-menu.context");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const VerticalMenu = ({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  width = "322px",
-  children,
-  height = "100%",
-  ...rest
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledVerticalMenu, _extends({
-    boxSizing: "border-box",
-    scrollVariant: "light",
-    backgroundColor: "var(--colorsComponentsLeftnavWinterStandardBackground)",
-    width: width,
-    height: height,
-    py: 1,
-    as: "nav",
-    overflow: "auto",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, (0, _tags.default)("vertical-menu", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
-    value: {
-      isFullScreen: false
-    }
-  }, children)));
-};
-exports.VerticalMenu = VerticalMenu;
-var _default = exports.default = VerticalMenu;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("../../__internal__/utils/helpers/tags/tags.js"),t=require("./vertical-menu.style.js"),n=require("./__internal__/vertical-menu.context.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const i=i=>{var a,o,{"aria-label":c,"aria-labelledby":u,width:b="322px",children:s,height:p="100%"}=i,y=function(e,r){if(null==e)return{};var t,n,l=function(e,r){if(null==e)return{};var t,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(l[t]=e[t]);return l}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}(i,["aria-label","aria-labelledby","width","children","height"]);return e.jsx(t.StyledVerticalMenu,(a=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}({boxSizing:"border-box",scrollVariant:"light",backgroundColor:"var(--colorsComponentsLeftnavWinterStandardBackground)",width:b,height:p,py:1,as:"nav",overflow:"auto","aria-label":c,"aria-labelledby":u},r.default("vertical-menu",y)),o=null!=(o={children:e.jsx(t.StyledList,{children:e.jsx(n.VerticalMenuProvider,{value:{isFullScreen:!1},children:s})})})?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(o)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(o)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(o,e))})),a))};exports.VerticalMenu=i,exports.default=i;