carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.js

@@ -1,307 +1 @@
-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); }
-import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { StyledIcon, StyledMenuItemContent, StyledNestedMenu, StyledResponsiveMenuAction, StyledResponsiveMenuItem } from "./responsive-vertical-menu-item.style";
-import { IncreaseDepth, useDepth } from "../__internal__/depth.context";
-import { useMenuFocus } from "../__internal__/focus.context";
-import { useResponsiveVerticalMenu } from "../responsive-vertical-menu.context";
-import Icon from "../../../icon";
-import guid from "../../../../__internal__/utils/helpers/guid";
-
-// Standard TS pattern for overriding props
-
-// Context to hold the parent item ID
-const ParentItemContext = /*#__PURE__*/createContext(undefined);
-// Renders the actual content of the menu item
-const MenuItemContent = ({
-  customIcon,
-  depth,
-  hasChildren,
-  icon,
-  label,
-  responsive
-}) => {
-  // If a custom icon is provided, render it with the label
-  // Otherwise, render the provided icon with the label.
-  // If no icon is provided, render the label only.
-  return customIcon ? /*#__PURE__*/React.createElement(StyledMenuItemContent, {
-    "data-component": "responsive-vertical-menu-custom-icon",
-    "data-role": "responsive-vertical-menu-custom-icon",
-    depth: depth,
-    hasChildren: hasChildren,
-    icon: true,
-    responsive: responsive
-  }, customIcon, label) : /*#__PURE__*/React.createElement(StyledMenuItemContent, {
-    "data-component": "responsive-vertical-menu-icon",
-    "data-role": "responsive-vertical-menu-icon",
-    depth: depth,
-    hasChildren: hasChildren,
-    icon: !!icon,
-    responsive: responsive
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    type: icon
-  }), label);
-};
-
-// Base component for the menu item
-const BaseItem = /*#__PURE__*/forwardRef(({
-  children,
-  customIcon,
-  icon,
-  id,
-  href,
-  label,
-  ...rest
-}, ref) => {
-  const {
-    activeMenuItem,
-    containerRef,
-    responsiveMode,
-    setActiveMenuItem,
-    reducedMotion
-  } = useResponsiveVerticalMenu();
-  const {
-    expandItem,
-    focusItem,
-    getRegisteredItems,
-    moveFocus,
-    registerMenuItem
-  } = useMenuFocus();
-  const depth = useDepth();
-  const isActive = activeMenuItem?.id === id;
-  const hasChildren = React.Children.count(children) > 0;
-  const parentId = useContext(ParentItemContext);
-  const responsiveDisplay = useMemo(() => responsiveMode && depth === 0, [depth, responsiveMode]);
-  const [expanded, setExpanded] = useState(responsiveDisplay && hasChildren);
-
-  // Register the menu item with the focus context
-  // We can do this here as well as in the wrapping component to ensure
-  // that the item is registered even if it is used as-is (as opposed to
-  // via ResponsiveVerticalMenuItem).
-  useEffect(() => {
-    registerMenuItem(id, ref, parentId);
-  }, [id, parentId, ref, registerMenuItem]);
-
-  // Handle keyboard navigation
-  const handleKeyDown = e => {
-    // Store a list of siblings
-    let siblings;
-    let siblingsAtDepth;
-    switch (e.key) {
-      case "Tab":
-        siblingsAtDepth = containerRef.current?.querySelectorAll(`[data-depth="${depth}"]`) || /* istanbul ignore next */[];
-        siblings = Array.from(siblingsAtDepth);
-
-        // Primary-level menu items
-        if (depth === 0 && hasChildren && activeMenuItem?.id === id) {
-          e.preventDefault();
-          // If the item is active and has children, move focus to the first/last child, based on whether the Shift key is pressed or not
-          moveFocus(!e.shiftKey ? "firstChild" : "lastChild");
-        }
-
-        // Secondary-level menu items
-        if (depth === 1) {
-          const currentIndex = siblings.findIndex(el => el.id === id);
-          const isLastSibling = currentIndex === siblings.length - 1;
-          const isFirstSibling = currentIndex === 0;
-
-          // If the item is the last sibling and has no children (or it does but isn't expanded), move focus to the parent when forward-tabbing
-          /* istanbul ignore else */
-          if (isLastSibling && (!hasChildren || hasChildren && !expanded)) {
-            if (!e.shiftKey) {
-              e.preventDefault();
-              moveFocus("parent");
-            }
-          }
-
-          // If the item is the first sibling and shift is pressed, move focus to the parent
-          if (isFirstSibling && e.shiftKey) {
-            e.preventDefault();
-            moveFocus("parent");
-          }
-        }
-
-        // Tertiary-level menu items
-        if (depth === 2) {
-          const currentIndex = siblings.findIndex(el => el.id === id);
-          const isLastSibling = currentIndex === siblings.length - 1;
-
-          /* istanbul ignore else */
-          if (isLastSibling) {
-            // If the item is the last sibling, find the grand-parent in the menu hierarchy
-            const allMenuItems = getRegisteredItems();
-            const parent = allMenuItems.find(item => item.id === parentId);
-            const grandParent = allMenuItems.find(item => item.id === parent?.parentId);
-
-            /* istanbul ignore else */
-            if (grandParent) {
-              // Check if the parent is the last sibling under the grand-parent
-              const parentSiblings = Array.from(containerRef.current?.querySelectorAll(`[data-depth="${depth - 1}"]`) || /* istanbul ignore next */[]);
-              const parentIsLastSibling = parentSiblings.findIndex(el => el.id === parentId) === parentSiblings.length - 1;
-
-              // If the parent is the last sibling and shift is not pressed, move focus to the grand-parent
-              if (parentIsLastSibling && !e.shiftKey) {
-                e.preventDefault();
-                focusItem(grandParent.id);
-              }
-            }
-          }
-        }
-        break;
-
-      // Handle activation keys
-      case "Enter":
-      case " ":
-        e.preventDefault();
-
-        // If in responsive mode, do not toggle the menu
-        /* istanbul ignore if */
-        if (responsiveDisplay) return;
-
-        /* istanbul ignore else */
-        if (hasChildren) {
-          // Toggle expanded state if not in responsive mode
-          if (depth === 0 && !responsiveMode) {
-            const itemToggled = activeMenuItem?.id === id;
-            const newActiveMenuItem = itemToggled ? null : {
-              id,
-              label,
-              children
-            };
-            // Set the active menu item
-            setActiveMenuItem(newActiveMenuItem);
-          } else {
-            // Expand the menu
-            setExpanded(!expanded);
-            expandItem(id, !expanded);
-          }
-        } else if (href && e.key === "Enter") {
-          // If no children, navigate to the href. Can only be activated with Enter key,
-          // as per accessibility guidelines.
-          window.location.href = href;
-        }
-        break;
-      default:
-        break;
-    }
-  };
-  const handleClick = () => {
-    // If in responsive mode, do not toggle the menu
-    if (responsiveDisplay) return;
-
-    // Mimic the behavior of the Enter key as defined in the handleKeyDown function
-    if (depth === 0 && !responsiveMode) {
-      const itemToggled = activeMenuItem?.id === id;
-      const newActiveMenuItem = itemToggled ? null : {
-        id,
-        label,
-        children
-      };
-      setActiveMenuItem(newActiveMenuItem);
-    } else {
-      setExpanded(!expanded);
-      expandItem(id, !expanded);
-    }
-    // Focus the clicked item
-    focusItem(id);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasChildren ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledResponsiveMenuItem, _extends({
-    active: isActive,
-    "aria-expanded": isActive || expanded,
-    "data-component": `responsive-vertical-menu-item-${id}`,
-    "data-depth": depth,
-    "data-role": `responsive-vertical-menu-item-${id}`,
-    depth: depth,
-    hasIcon: !!icon || !!customIcon,
-    id: id,
-    onClick: handleClick,
-    onKeyDown: e => {
-      /* istanbul ignore else */
-      if (!responsiveMode) {
-        handleKeyDown(e);
-      }
-    },
-    onFocus: () => focusItem(id),
-    ref: ref,
-    responsive: responsiveMode,
-    tabIndex: responsiveDisplay ? -1 : 0,
-    type: "button"
-  }, rest), /*#__PURE__*/React.createElement(MenuItemContent, {
-    customIcon: customIcon,
-    depth: depth,
-    hasChildren: true,
-    icon: icon,
-    label: label,
-    responsive: responsiveMode
-  }), !responsiveDisplay && /*#__PURE__*/React.createElement(StyledIcon, {
-    "data-component": "responsive-vertical-menu-expander-icon",
-    "data-role": "responsive-vertical-menu-expander-icon",
-    depth: depth,
-    expanded: expanded || isActive,
-    reduceMotion: !!reducedMotion,
-    type: depth >= 1 ? "chevron_down_thick" : "chevron_right_thick"
-  })), expanded && /*#__PURE__*/React.createElement(StyledNestedMenu, {
-    "data-component": `${id}-nested-menu`,
-    "data-role": `${id}-nested-menu`,
-    depth: depth,
-    hasIcon: !!icon || !!customIcon,
-    id: `${id}-nested-menu`,
-    responsive: responsiveMode
-  }, /*#__PURE__*/React.createElement(ParentItemContext.Provider, {
-    value: id
-  }, children))) : /*#__PURE__*/React.createElement(StyledResponsiveMenuAction, _extends({
-    "data-component": `responsive-vertical-menu-item-${id}`,
-    "data-depth": depth,
-    "data-role": `responsive-vertical-menu-item-${id}`,
-    depth: depth,
-    href: href,
-    id: id,
-    onFocus: () => focusItem(id),
-    onKeyDown: e => {
-      /* istanbul ignore else */
-      if (!responsiveMode) {
-        handleKeyDown(e);
-      }
-    },
-    ref: ref,
-    responsive: responsiveMode,
-    tabIndex: 0
-  }, rest), /*#__PURE__*/React.createElement(MenuItemContent, {
-    customIcon: customIcon,
-    depth: depth,
-    hasChildren: false,
-    icon: icon,
-    label: label,
-    responsive: responsiveMode
-  })));
-});
-
-// Main component for the responsive vertical menu item
-export const ResponsiveVerticalMenuItem = ({
-  children,
-  id,
-  label,
-  ...props
-}) => {
-  const depth = useDepth();
-  const itemRef = useRef(null);
-  const {
-    registerMenuItem
-  } = useMenuFocus();
-  const parentId = useContext(ParentItemContext);
-  const uniqueId = useRef(id || guid());
-
-  // Register the menu item with the focus context
-  useEffect(() => {
-    registerMenuItem(uniqueId.current, itemRef, parentId);
-  }, [id, registerMenuItem, parentId]);
-  return /*#__PURE__*/React.createElement(BaseItem, _extends({
-    id: uniqueId.current,
-    label: label
-  }, props, {
-    "data-depth": depth,
-    ref: itemRef
-  }), children && /*#__PURE__*/React.createElement(ParentItemContext.Provider, {
-    value: id
-  }, /*#__PURE__*/React.createElement(IncreaseDepth, null, children)));
-};
-export default ResponsiveVerticalMenuItem;
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useRef as i,useContext as o,useEffect as c,createContext as l,forwardRef as d,useMemo as a,useState as s}from"react";import{StyledResponsiveMenuItem as p,StyledIcon as u,StyledNestedMenu as f,StyledResponsiveMenuAction as h,StyledMenuItemContent as m}from"./responsive-vertical-menu-item.style.js";import{useDepth as v,IncreaseDepth as b}from"../__internal__/depth.context.js";import{useMenuFocus as y}from"../__internal__/focus.context.js";import{useResponsiveVerticalMenu as O}from"../responsive-vertical-menu.context.js";import j from"../../../icon/icon.component.js";import g from"../../../../__internal__/utils/helpers/guid/index.js";function I(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){I(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function _(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const P=l(void 0),D=({customIcon:n,depth:r,hasChildren:i,icon:o,label:c,responsive:l})=>t(m,n?{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:l,children:[n,c]}:{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:l,children:[o&&e(j,{type:o}),c]}),k=d(((i,l)=>{var{children:d,customIcon:m,icon:b,id:j,href:g,label:I}=i,k=_(i,["children","customIcon","icon","id","href","label"]);const{activeMenuItem:C,containerRef:$,responsiveMode:S,setActiveMenuItem:M,reducedMotion:K}=O(),{expandItem:A,focusItem:E,getRegisteredItems:F,moveFocus:q,registerMenuItem:R}=y(),T=v(),z=(null==C?void 0:C.id)===j,B=r.Children.count(d)>0,G=o(P),H=a((()=>S&&0===T),[T,S]),[J,L]=s(H&&B);c((()=>{R(j,l,G)}),[j,G,l,R]);const N=e=>{let n,t;switch(e.key){case"Tab":var r;if(t=(null===(r=$.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${T}"]`))||[],n=Array.from(t),0===T&&B&&(null==C?void 0:C.id)===j&&(e.preventDefault(),q(e.shiftKey?"lastChild":"firstChild")),1===T){const t=n.findIndex((e=>e.id===j)),r=0===t;t===n.length-1&&(!B||B&&!J)&&(e.shiftKey||(e.preventDefault(),q("parent"))),r&&e.shiftKey&&(e.preventDefault(),q("parent"))}if(2===T&&n.findIndex((e=>e.id===j))===n.length-1){const n=F(),t=n.find((e=>e.id===G)),r=n.find((e=>e.id===(null==t?void 0:t.parentId)));if(r){var i;const n=Array.from((null===(i=$.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${T-1}"]`))||[]);n.findIndex((e=>e.id===G))===n.length-1&&!e.shiftKey&&(e.preventDefault(),E(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),H)return;if(B)if(0!==T||S)L(!J),A(j,!J);else{const e=(null==C?void 0:C.id)===j;M(e?null:{id:j,label:I,children:d})}else g&&"Enter"===e.key&&(window.location.href=g)}};return e(n,{children:B?t(n,{children:[t(p,w(x({active:z,"aria-expanded":z||J,"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":T,"data-role":`responsive-vertical-menu-item-${j}`,depth:T,hasIcon:!!b||!!m,id:j,onClick:()=>{if(!H){if(0!==T||S)L(!J),A(j,!J);else{const e=(null==C?void 0:C.id)===j;M(e?null:{id:j,label:I,children:d})}E(j)}},onKeyDown:e=>{S||N(e)},onFocus:()=>E(j),ref:l,responsive:S,tabIndex:H?-1:0,type:"button"},k),{children:[e(D,{customIcon:m,depth:T,hasChildren:!0,icon:b,label:I,responsive:S}),!H&&e(u,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:T,expanded:J||z,reduceMotion:!!K,type:T>=1?"chevron_down_thick":"chevron_right_thick"})]})),J&&e(f,{"data-component":`${j}-nested-menu`,"data-role":`${j}-nested-menu`,depth:T,hasIcon:!!b||!!m,id:`${j}-nested-menu`,responsive:S,children:e(P.Provider,{value:j,children:d})})]}):e(h,w(x({"data-component":`responsive-vertical-menu-item-${j}`,"data-depth":T,"data-role":`responsive-vertical-menu-item-${j}`,depth:T,href:g,id:j,onFocus:()=>E(j),onKeyDown:e=>{S||N(e)},ref:l,responsive:S,tabIndex:0},k),{children:e(D,{customIcon:m,depth:T,hasChildren:!1,icon:b,label:I,responsive:S})}))})})),C=n=>{var{children:t,id:r,label:l}=n,d=_(n,["children","id","label"]);const a=v(),s=i(null),{registerMenuItem:p}=y(),u=o(P),f=i(r||g());return c((()=>{p(f.current,s,u)}),[r,p,u]),e(k,w(x({id:f.current,label:l},d),{"data-depth":a,ref:s,children:t&&e(P.Provider,{value:r,children:e(b,{children:t})})}))};export{C as ResponsiveVerticalMenuItem,C as default};

package/esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.js

@@ -1,217 +1 @@
-import styled, { css } from "styled-components";
-import { margin, padding } from "styled-system";
-import Icon from "../../../icon";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-const BASE_ACTION_WIDTH = 92;
-const RESPONSIVE_ACTION_WIDTH_NO_NESTED_MENU = BASE_ACTION_WIDTH - 14;
-const RESPONSIVE_ACTION_WIDTH_NESTED_MENU = BASE_ACTION_WIDTH - 20;
-const getRotationData = (depth, expanded) => {
-  if (!depth || !expanded) {
-    return "0deg";
-  }
-  return "180deg";
-};
-export const StyledMenuItemContent = styled.span`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing100);
-
-  svg {
-    margin-right: var(--spacing100);
-    max-width: var(--sizing300);
-    min-width: var(--sizing300);
-  }
-
-  ${({
-  customIcon,
-  depth,
-  hasChildren,
-  icon,
-  responsive
-}) => {
-  if (depth > 0) {
-    if (responsive) {
-      return css`
-          width: 100%;
-        `;
-    }
-  }
-  if (depth === 0 && hasChildren && responsive) {
-    return css`
-        color: #ffffffcc;
-        cursor: default;
-      `;
-  }
-  if (customIcon || icon) {
-    return css`
-        width: 81%;
-      `;
-  }
-  return css`
-      width: 92%;
-    `;
-}}
-`;
-export const StyledResponsiveMenuItem = styled.button`
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--borderRadius100);
-  color: var(--colorsUtilityYang100);
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  font-weight: 500;
-  justify-content: space-between;
-  min-height: var(--sizing500);
-  padding: 0 15px;
-  width: 100%;
-  max-width: 340px;
-
-  ${margin}
-  ${padding}
-
-${({
-  depth,
-  responsive
-}) => depth > 0 && responsive && css`
-      cursor: default;
-      justify-content: space-around;
-      width: 80%;
-    `}
-
-
-  ${({
-  depth,
-  responsive
-}) => depth === 0 && responsive && css`
-      padding: 0;
-    `}
-
-  &:hover {
-    background-color: var(--colorsActionMajor500);
-  }
-
-  ${({
-  active,
-  responsive
-}) => active && !responsive && css`
-      background-color: var(--colorsGray850);
-    `}
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-    margin-right: var(--spacing100);
-  }
-
-  &:focus {
-    ${addFocusStyling(true)}
-  }
-`;
-export const StyledResponsiveMenuAction = styled.a`
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--borderRadius100);
-  color: var(--colorsUtilityYang100);
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  font-weight: 500;
-  justify-content: space-between;
-  min-height: var(--sizing500);
-  padding: 0 var(--spacing200);
-  text-decoration: none;
-  width: 92%;
-  max-width: 92%;
-
-  ${({
-  depth,
-  responsive
-}) => depth > 0 && responsive && css`
-      cursor: default;
-      justify-content: space-around;
-      width: ${depth === 1 ? `${RESPONSIVE_ACTION_WIDTH_NO_NESTED_MENU}%` : `${RESPONSIVE_ACTION_WIDTH_NESTED_MENU}%`};
-    `}
-
-  ${margin}
-  ${padding}
-
-  &:hover {
-    background-color: var(--colorsActionMajor500);
-  }
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-    margin-right: var(--spacing100);
-  }
-
-  &:focus {
-    ${addFocusStyling(true)}
-  }
-`;
-export const StyledNestedMenu = styled.div`
-  width: ${({
-  responsive
-}) => responsive ? "72%" : "92%"};
-  ${({
-  hasIcon
-}) => hasIcon && css`
-      margin-left: 80px;
-      width: 100%;
-    `};
-
-  ${({
-  responsive
-}) => responsive && css`
-      align-items: center
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-    `}
-
-  a {
-    font-weight: 400;
-    ${({
-  hasIcon
-}) => hasIcon && `width: 81%;`};
-
-    ${({
-  depth,
-  responsive
-}) => responsive && css`
-        font-weight: 500;
-        width: 70%;
-
-        ${depth && depth >= 1 && css`
-          font-weight: 400;
-          margin-left: var(--spacing200);
-          margin-right: var(--spacing200);
-          width: 63%;
-        `}
-      `}
-  }
-`;
-export const StyledIcon = styled(Icon)`
-  rotate: ${({
-  depth,
-  expanded
-}) => getRotationData(depth, expanded)};
-  transition: rotate ${({
-  reduceMotion
-}) => reduceMotion ? 0 : "0.2s"}
-    ease-in;
-
-  ${({
-  depth,
-  expanded,
-  reduceMotion
-}) => expanded && css`
-      rotate: ${getRotationData(depth, expanded)};
-      transition: rotate ${reduceMotion ? 0 : "0.2s"} ease-out;
-    `};
-`;
+import e,{css as t}from"styled-components";import{margin as i,padding as o}from"styled-system";import n from"../../../icon/icon.component.js";import r from"../../../../style/utils/add-focus-styling.js";const a=(e,t)=>e&&t?"180deg":"0deg",s=e.span.withConfig({displayName:"responsive-vertical-menu-item.style__StyledMenuItemContent",componentId:"sc-9874a804-0"})(["align-items:center;display:flex;flex-direction:row;gap:var(--spacing100);svg{margin-right:var(--spacing100);max-width:var(--sizing300);min-width:var(--sizing300);}",""],(({customIcon:e,depth:i,hasChildren:o,icon:n,responsive:r})=>t(i>0&&r?["width:100%;"]:0===i&&o&&r?["color:#ffffffcc;cursor:default;"]:e||n?["width:81%;"]:["width:92%;"]))),c=e.button.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuItem",componentId:"sc-9874a804-1"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 15px;width:100%;max-width:340px;"," "," "," "," &:hover{background-color:var(--colorsActionMajor500);}",' [data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],i,o,(({depth:e,responsive:i})=>e>0&&i&&t(["cursor:default;justify-content:space-around;width:80%;"])),(({depth:e,responsive:i})=>0===e&&i&&t(["padding:0;"])),(({active:e,responsive:i})=>e&&!i&&t(["background-color:var(--colorsGray850);"])),r(!0)),d=e.a.withConfig({displayName:"responsive-vertical-menu-item.style__StyledResponsiveMenuAction",componentId:"sc-9874a804-2"})(["align-items:center;background-color:transparent;border:none;border-radius:var(--borderRadius100);color:var(--colorsUtilityYang100);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-weight:500;justify-content:space-between;min-height:var(--sizing500);padding:0 var(--spacing200);text-decoration:none;width:92%;max-width:92%;"," "," ",' &:hover{background-color:var(--colorsActionMajor500);}[data-component="icon"]{color:var(--colorsUtilityYang100);margin-right:var(--spacing100);}&:focus{',"}"],(({depth:e,responsive:i})=>e>0&&i&&t(["cursor:default;justify-content:space-around;width:",";"],1===e?"78%":"72%")),i,o,r(!0)),p=e.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-9874a804-3"})(["width:",";",";"," a{font-weight:400;",";","}"],(({responsive:e})=>e?"72%":"92%"),(({hasIcon:e})=>e&&t(["margin-left:80px;width:100%;"])),(({responsive:e})=>e&&t(["align-items:center display:flex;flex-direction:column;width:100%;"])),(({hasIcon:e})=>e&&"width: 81%;"),(({depth:e,responsive:i})=>i&&t(["font-weight:500;width:70%;",""],e&&e>=1&&t(["font-weight:400;margin-left:var(--spacing200);margin-right:var(--spacing200);width:63%;"])))),l=e(n).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-9874a804-4"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>a(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:e,expanded:i,reduceMotion:o})=>i&&t(["rotate:",";transition:rotate "," ease-out;"],a(e,i),o?0:"0.2s")));export{l as StyledIcon,s as StyledMenuItemContent,p as StyledNestedMenu,d as StyledResponsiveMenuAction,c as StyledResponsiveMenuItem};