carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,316 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResponsiveVerticalMenuItem = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _responsiveVerticalMenuItem = require("./responsive-vertical-menu-item.style");
-var _depth = require("../__internal__/depth.context");
-var _focus = require("../__internal__/focus.context");
-var _responsiveVerticalMenu = require("../responsive-vertical-menu.context");
-var _icon = _interopRequireDefault(require("../../../icon"));
-var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
-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); }
-// Standard TS pattern for overriding props
-
-// Context to hold the parent item ID
-const ParentItemContext = /*#__PURE__*/(0, _react.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.default.createElement(_responsiveVerticalMenuItem.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.default.createElement(_responsiveVerticalMenuItem.StyledMenuItemContent, {
-    "data-component": "responsive-vertical-menu-icon",
-    "data-role": "responsive-vertical-menu-icon",
-    depth: depth,
-    hasChildren: hasChildren,
-    icon: !!icon,
-    responsive: responsive
-  }, icon && /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: icon
-  }), label);
-};
-
-// Base component for the menu item
-const BaseItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  customIcon,
-  icon,
-  id,
-  href,
-  label,
-  ...rest
-}, ref) => {
-  const {
-    activeMenuItem,
-    containerRef,
-    responsiveMode,
-    setActiveMenuItem,
-    reducedMotion
-  } = (0, _responsiveVerticalMenu.useResponsiveVerticalMenu)();
-  const {
-    expandItem,
-    focusItem,
-    getRegisteredItems,
-    moveFocus,
-    registerMenuItem
-  } = (0, _focus.useMenuFocus)();
-  const depth = (0, _depth.useDepth)();
-  const isActive = activeMenuItem?.id === id;
-  const hasChildren = _react.default.Children.count(children) > 0;
-  const parentId = (0, _react.useContext)(ParentItemContext);
-  const responsiveDisplay = (0, _react.useMemo)(() => responsiveMode && depth === 0, [depth, responsiveMode]);
-  const [expanded, setExpanded] = (0, _react.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).
-  (0, _react.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.default.createElement(_react.default.Fragment, null, hasChildren ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenuItem.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.default.createElement(MenuItemContent, {
-    customIcon: customIcon,
-    depth: depth,
-    hasChildren: true,
-    icon: icon,
-    label: label,
-    responsive: responsiveMode
-  }), !responsiveDisplay && /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenuItem.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.default.createElement(_responsiveVerticalMenuItem.StyledNestedMenu, {
-    "data-component": `${id}-nested-menu`,
-    "data-role": `${id}-nested-menu`,
-    depth: depth,
-    hasIcon: !!icon || !!customIcon,
-    id: `${id}-nested-menu`,
-    responsive: responsiveMode
-  }, /*#__PURE__*/_react.default.createElement(ParentItemContext.Provider, {
-    value: id
-  }, children))) : /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenuItem.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.default.createElement(MenuItemContent, {
-    customIcon: customIcon,
-    depth: depth,
-    hasChildren: false,
-    icon: icon,
-    label: label,
-    responsive: responsiveMode
-  })));
-});
-
-// Main component for the responsive vertical menu item
-const ResponsiveVerticalMenuItem = ({
-  children,
-  id,
-  label,
-  ...props
-}) => {
-  const depth = (0, _depth.useDepth)();
-  const itemRef = (0, _react.useRef)(null);
-  const {
-    registerMenuItem
-  } = (0, _focus.useMenuFocus)();
-  const parentId = (0, _react.useContext)(ParentItemContext);
-  const uniqueId = (0, _react.useRef)(id || (0, _guid.default)());
-
-  // Register the menu item with the focus context
-  (0, _react.useEffect)(() => {
-    registerMenuItem(uniqueId.current, itemRef, parentId);
-  }, [id, registerMenuItem, parentId]);
-  return /*#__PURE__*/_react.default.createElement(BaseItem, _extends({
-    id: uniqueId.current,
-    label: label
-  }, props, {
-    "data-depth": depth,
-    ref: itemRef
-  }), children && /*#__PURE__*/_react.default.createElement(ParentItemContext.Provider, {
-    value: id
-  }, /*#__PURE__*/_react.default.createElement(_depth.IncreaseDepth, null, children)));
-};
-exports.ResponsiveVerticalMenuItem = ResponsiveVerticalMenuItem;
-var _default = exports.default = ResponsiveVerticalMenuItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./responsive-vertical-menu-item.style.js"),r=require("../__internal__/depth.context.js"),i=require("../__internal__/focus.context.js"),o=require("../responsive-vertical-menu.context.js"),s=require("../../../icon/icon.component.js"),c=require("../../../../__internal__/utils/helpers/guid/index.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(t);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}function p(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function f(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const v=t.createContext(void 0),h=({customIcon:t,depth:r,hasChildren:i,icon:o,label:c,responsive:l})=>t?e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-custom-icon","data-role":"responsive-vertical-menu-custom-icon",depth:r,hasChildren:i,icon:!0,responsive:l,children:[t,c]}):e.jsxs(n.StyledMenuItemContent,{"data-component":"responsive-vertical-menu-icon","data-role":"responsive-vertical-menu-icon",depth:r,hasChildren:i,icon:!!o,responsive:l,children:[o&&e.jsx(s.default,{type:o}),c]}),m=t.forwardRef(((s,c)=>{var{children:l,customIcon:a,icon:m,id:y,href:b,label:j}=s,x=f(s,["children","customIcon","icon","id","href","label"]);const{activeMenuItem:O,containerRef:I,responsiveMode:g,setActiveMenuItem:_,reducedMotion:M}=o.useResponsiveVerticalMenu(),{expandItem:w,focusItem:P,getRegisteredItems:S,moveFocus:C,registerMenuItem:D}=i.useMenuFocus(),q=r.useDepth(),k=(null==O?void 0:O.id)===y,R=d.default.Children.count(l)>0,$=t.useContext(v),E=t.useMemo((()=>g&&0===q),[q,g]),[F,A]=t.useState(E&&R);t.useEffect((()=>{D(y,c,$)}),[y,$,c,D]);const K=e=>{let t,n;switch(e.key){case"Tab":var r;if(n=(null===(r=I.current)||void 0===r?void 0:r.querySelectorAll(`[data-depth="${q}"]`))||[],t=Array.from(n),0===q&&R&&(null==O?void 0:O.id)===y&&(e.preventDefault(),C(e.shiftKey?"lastChild":"firstChild")),1===q){const n=t.findIndex((e=>e.id===y)),r=0===n;n===t.length-1&&(!R||R&&!F)&&(e.shiftKey||(e.preventDefault(),C("parent"))),r&&e.shiftKey&&(e.preventDefault(),C("parent"))}if(2===q&&t.findIndex((e=>e.id===y))===t.length-1){const t=S(),n=t.find((e=>e.id===$)),r=t.find((e=>e.id===(null==n?void 0:n.parentId)));if(r){var i;const t=Array.from((null===(i=I.current)||void 0===i?void 0:i.querySelectorAll(`[data-depth="${q-1}"]`))||[]);t.findIndex((e=>e.id===$))===t.length-1&&!e.shiftKey&&(e.preventDefault(),P(r.id))}}break;case"Enter":case" ":if(e.preventDefault(),E)return;if(R)if(0!==q||g)A(!F),w(y,!F);else{const e=(null==O?void 0:O.id)===y;_(e?null:{id:y,label:j,children:l})}else b&&"Enter"===e.key&&(window.location.href=b)}};return e.jsx(e.Fragment,{children:R?e.jsxs(e.Fragment,{children:[e.jsxs(n.StyledResponsiveMenuItem,p(u({active:k,"aria-expanded":k||F,"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":q,"data-role":`responsive-vertical-menu-item-${y}`,depth:q,hasIcon:!!m||!!a,id:y,onClick:()=>{if(!E){if(0!==q||g)A(!F),w(y,!F);else{const e=(null==O?void 0:O.id)===y;_(e?null:{id:y,label:j,children:l})}P(y)}},onKeyDown:e=>{g||K(e)},onFocus:()=>P(y),ref:c,responsive:g,tabIndex:E?-1:0,type:"button"},x),{children:[e.jsx(h,{customIcon:a,depth:q,hasChildren:!0,icon:m,label:j,responsive:g}),!E&&e.jsx(n.StyledIcon,{"data-component":"responsive-vertical-menu-expander-icon","data-role":"responsive-vertical-menu-expander-icon",depth:q,expanded:F||k,reduceMotion:!!M,type:q>=1?"chevron_down_thick":"chevron_right_thick"})]})),F&&e.jsx(n.StyledNestedMenu,{"data-component":`${y}-nested-menu`,"data-role":`${y}-nested-menu`,depth:q,hasIcon:!!m||!!a,id:`${y}-nested-menu`,responsive:g,children:e.jsx(v.Provider,{value:y,children:l})})]}):e.jsx(n.StyledResponsiveMenuAction,p(u({"data-component":`responsive-vertical-menu-item-${y}`,"data-depth":q,"data-role":`responsive-vertical-menu-item-${y}`,depth:q,href:b,id:y,onFocus:()=>P(y),onKeyDown:e=>{g||K(e)},ref:c,responsive:g,tabIndex:0},x),{children:e.jsx(h,{customIcon:a,depth:q,hasChildren:!1,icon:m,label:j,responsive:g})}))})})),y=n=>{var{children:o,id:s,label:l}=n,d=f(n,["children","id","label"]);const a=r.useDepth(),h=t.useRef(null),{registerMenuItem:y}=i.useMenuFocus(),b=t.useContext(v),j=t.useRef(s||c.default());return t.useEffect((()=>{y(j.current,h,b)}),[s,y,b]),e.jsx(m,p(u({id:j.current,label:l},d),{"data-depth":a,ref:h,children:o&&e.jsx(v.Provider,{value:s,children:e.jsx(r.IncreaseDepth,{children:o})})}))};exports.ResponsiveVerticalMenuItem=y,exports.default=y;

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

@@ -1,226 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledResponsiveMenuItem = exports.StyledResponsiveMenuAction = exports.StyledNestedMenu = exports.StyledMenuItemContent = exports.StyledIcon = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _icon = _interopRequireDefault(require("../../../icon"));
-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 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";
-};
-const StyledMenuItemContent = exports.StyledMenuItemContent = _styledComponents.default.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 (0, _styledComponents.css)`
-          width: 100%;
-        `;
-    }
-  }
-  if (depth === 0 && hasChildren && responsive) {
-    return (0, _styledComponents.css)`
-        color: #ffffffcc;
-        cursor: default;
-      `;
-  }
-  if (customIcon || icon) {
-    return (0, _styledComponents.css)`
-        width: 81%;
-      `;
-  }
-  return (0, _styledComponents.css)`
-      width: 92%;
-    `;
-}}
-`;
-const StyledResponsiveMenuItem = exports.StyledResponsiveMenuItem = _styledComponents.default.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;
-
-  ${_styledSystem.margin}
-  ${_styledSystem.padding}
-
-${({
-  depth,
-  responsive
-}) => depth > 0 && responsive && (0, _styledComponents.css)`
-      cursor: default;
-      justify-content: space-around;
-      width: 80%;
-    `}
-
-
-  ${({
-  depth,
-  responsive
-}) => depth === 0 && responsive && (0, _styledComponents.css)`
-      padding: 0;
-    `}
-
-  &:hover {
-    background-color: var(--colorsActionMajor500);
-  }
-
-  ${({
-  active,
-  responsive
-}) => active && !responsive && (0, _styledComponents.css)`
-      background-color: var(--colorsGray850);
-    `}
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-    margin-right: var(--spacing100);
-  }
-
-  &:focus {
-    ${(0, _addFocusStyling.default)(true)}
-  }
-`;
-const StyledResponsiveMenuAction = exports.StyledResponsiveMenuAction = _styledComponents.default.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 && (0, _styledComponents.css)`
-      cursor: default;
-      justify-content: space-around;
-      width: ${depth === 1 ? `${RESPONSIVE_ACTION_WIDTH_NO_NESTED_MENU}%` : `${RESPONSIVE_ACTION_WIDTH_NESTED_MENU}%`};
-    `}
-
-  ${_styledSystem.margin}
-  ${_styledSystem.padding}
-
-  &:hover {
-    background-color: var(--colorsActionMajor500);
-  }
-
-  [data-component="icon"] {
-    color: var(--colorsUtilityYang100);
-    margin-right: var(--spacing100);
-  }
-
-  &:focus {
-    ${(0, _addFocusStyling.default)(true)}
-  }
-`;
-const StyledNestedMenu = exports.StyledNestedMenu = _styledComponents.default.div`
-  width: ${({
-  responsive
-}) => responsive ? "72%" : "92%"};
-  ${({
-  hasIcon
-}) => hasIcon && (0, _styledComponents.css)`
-      margin-left: 80px;
-      width: 100%;
-    `};
-
-  ${({
-  responsive
-}) => responsive && (0, _styledComponents.css)`
-      align-items: center
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-    `}
-
-  a {
-    font-weight: 400;
-    ${({
-  hasIcon
-}) => hasIcon && `width: 81%;`};
-
-    ${({
-  depth,
-  responsive
-}) => responsive && (0, _styledComponents.css)`
-        font-weight: 500;
-        width: 70%;
-
-        ${depth && depth >= 1 && (0, _styledComponents.css)`
-          font-weight: 400;
-          margin-left: var(--spacing200);
-          margin-right: var(--spacing200);
-          width: 63%;
-        `}
-      `}
-  }
-`;
-const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default)`
-  rotate: ${({
-  depth,
-  expanded
-}) => getRotationData(depth, expanded)};
-  transition: rotate ${({
-  reduceMotion
-}) => reduceMotion ? 0 : "0.2s"}
-    ease-in;
-
-  ${({
-  depth,
-  expanded,
-  reduceMotion
-}) => expanded && (0, _styledComponents.css)`
-      rotate: ${getRotationData(depth, expanded)};
-      transition: rotate ${reduceMotion ? 0 : "0.2s"} ease-out;
-    `};
-`;
+"use strict";var e=require("styled-components"),t=require("styled-system"),i=require("../../../icon/icon.component.js"),n=require("../../../../style/utils/add-focus-styling.js");function o(e){return e&&e.__esModule?e:{default:e}}var s=o(e);const r=(e,t)=>e&&t?"180deg":"0deg",a=s.default.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:t,depth:i,hasChildren:n,icon:o,responsive:s})=>i>0&&s?e.css(["width:100%;"]):0===i&&n&&s?e.css(["color:#ffffffcc;cursor:default;"]):t||o?e.css(["width:81%;"]):e.css(["width:92%;"]))),d=s.default.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{',"}"],t.margin,t.padding,(({depth:t,responsive:i})=>t>0&&i&&e.css(["cursor:default;justify-content:space-around;width:80%;"])),(({depth:t,responsive:i})=>0===t&&i&&e.css(["padding:0;"])),(({active:t,responsive:i})=>t&&!i&&e.css(["background-color:var(--colorsGray850);"])),n.default(!0)),c=s.default.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:t,responsive:i})=>t>0&&i&&e.css(["cursor:default;justify-content:space-around;width:",";"],1===t?"78%":"72%")),t.margin,t.padding,n.default(!0)),l=s.default.div.withConfig({displayName:"responsive-vertical-menu-item.style__StyledNestedMenu",componentId:"sc-9874a804-3"})(["width:",";",";"," a{font-weight:400;",";","}"],(({responsive:e})=>e?"72%":"92%"),(({hasIcon:t})=>t&&e.css(["margin-left:80px;width:100%;"])),(({responsive:t})=>t&&e.css(["align-items:center display:flex;flex-direction:column;width:100%;"])),(({hasIcon:e})=>e&&"width: 81%;"),(({depth:t,responsive:i})=>i&&e.css(["font-weight:500;width:70%;",""],t&&t>=1&&e.css(["font-weight:400;margin-left:var(--spacing200);margin-right:var(--spacing200);width:63%;"])))),p=s.default(i.default).withConfig({displayName:"responsive-vertical-menu-item.style__StyledIcon",componentId:"sc-9874a804-4"})(["rotate:",";transition:rotate "," ease-in;",";"],(({depth:e,expanded:t})=>r(e,t)),(({reduceMotion:e})=>e?0:"0.2s"),(({depth:t,expanded:i,reduceMotion:n})=>i&&e.css(["rotate:",";transition:rotate "," ease-out;"],r(t,i),n?0:"0.2s")));exports.StyledIcon=p,exports.StyledMenuItemContent=a,exports.StyledNestedMenu=l,exports.StyledResponsiveMenuAction=c,exports.StyledResponsiveMenuItem=d;