@owp/core 2.1.6 → 2.2.0

package/dist/layout/components/navigation/NavigationMenu.js

@@ -0,0 +1,63 @@
+var m = Object.defineProperty;
+var o = (i, e) => m(i, "name", { value: e, configurable: !0 });
+import { jsxs as h, jsx as c, Fragment as u } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import f from "@mui/material/GlobalStyles";
+import { memo as g, useMemo as x } from "react";
+import { useLocation as v } from "react-router-dom";
+import { NavVerticalLayout as M } from "./vertical/NavVerticalLayout.js";
+const w = /* @__PURE__ */ c(
+  f,
+  {
+    styles: /* @__PURE__ */ o(() => ({
+      ".popper-navigation-list": {
+        "& .owp-list-item": {
+          padding: "8px 12px 8px 12px",
+          height: 36,
+          minHeight: 36,
+          "& .owp-list-item-text": {
+            padding: "0 0 0 8px"
+          }
+        },
+        "&.dense": {
+          "& .owp-list-item": {
+            minHeight: 32,
+            height: 32,
+            "& .owp-list-item-text": {
+              padding: "0 0 0 8px"
+            }
+          }
+        }
+      }
+    }), "styles")
+  }
+), y = /* @__PURE__ */ o((i, e) => {
+  const s = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ o((a) => {
+    let l = !1;
+    for (const t of a) {
+      const p = !!(t.url && (t.url === e || e.includes(t.url))), d = t.children ? n(t.children) : !1, r = p || d;
+      r && t.type === "collapse" && s.add(t.id), r && (l = !0);
+    }
+    return l;
+  }, "visitItems");
+  return n(i), s;
+}, "createOpenedCollapseIds");
+function I(i) {
+  const { navigation: e, layout: s = "vertical" } = i, { pathname: n } = v(), a = x(() => !e || e.length === 0 ? /* @__PURE__ */ new Set() : y(e, n), [e, n]);
+  return !e || e.length === 0 ? null : /* @__PURE__ */ h(u, { children: [
+    w,
+    s === "vertical" && /* @__PURE__ */ c(
+      M,
+      {
+        checkPermission: !1,
+        ...i,
+        openedCollapseIds: a
+      }
+    )
+  ] });
+}
+o(I, "NavigationMenu");
+const H = g(I);
+export {
+  H as NavigationMenu
+};
+//# sourceMappingURL=NavigationMenu.js.map

package/dist/layout/components/navigation/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","sources":["../../../../src/layout/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import GlobalStyles from '@mui/material/GlobalStyles';\nimport { memo, useMemo } from 'react';\nimport type { OwpNavItemType as NavItemType } from '@/types/OwpNavigationTypes';\nimport { useLocation } from 'react-router-dom';\nimport { NavVerticalLayout } from './vertical/NavVerticalLayout';\n\nconst inputGlobalStyles = (\n  <GlobalStyles\n    styles={() => ({\n      '.popper-navigation-list': {\n        '& .owp-list-item': {\n          padding: '8px 12px 8px 12px',\n          height: 36,\n          minHeight: 36,\n          '& .owp-list-item-text': {\n            padding: '0 0 0 8px',\n          },\n        },\n        '&.dense': {\n          '& .owp-list-item': {\n            minHeight: 32,\n            height: 32,\n            '& .owp-list-item-text': {\n              padding: '0 0 0 8px',\n            },\n          },\n        },\n      },\n    })}\n  />\n);\n\nexport type NavigationMenuProps = {\n  className?: string;\n  dense?: boolean;\n  active?: boolean;\n  onItemClick?: (item: NavItemType) => void;\n  navigation?: NavItemType[];\n  layout?: 'vertical';\n  firstLevel?: boolean;\n  selectedId?: string;\n  checkPermission?: boolean;\n  openedCollapseIds?: ReadonlySet<string>;\n};\n\n/**\n * 현재 경로 기준 자동 확장 대상 collapse ID 집합 생성\n * @param navigation 내비게이션 트리\n * @param pathname 현재 경로\n */\nconst createOpenedCollapseIds = (navigation: NavItemType[], pathname: string) => {\n  const openedCollapseIds = new Set<string>();\n\n  const visitItems = (items: NavItemType[]): boolean => {\n    let hasMatchedDescendant = false;\n\n    for (const item of items) {\n      const hasSelfMatch = Boolean(item.url && (item.url === pathname || pathname.includes(item.url)));\n      const hasChildMatch = item.children ? visitItems(item.children) : false;\n      const hasMatchedItem = hasSelfMatch || hasChildMatch;\n\n      if (hasMatchedItem && item.type === 'collapse') {\n        openedCollapseIds.add(item.id);\n      }\n\n      if (hasMatchedItem) {\n        hasMatchedDescendant = true;\n      }\n    }\n\n    return hasMatchedDescendant;\n  };\n\n  visitItems(navigation);\n\n  return openedCollapseIds;\n};\n\n/**\n * NavigationMenu\n * Component for displaying a navigation bar which contains nav items\n * and acts as parent for providing props to its children components\n */\nfunction NavigationMenu(props: NavigationMenuProps) {\n  const { navigation, layout = 'vertical' } = props;\n  const { pathname } = useLocation();\n\n  const openedCollapseIds = useMemo(() => {\n    if (!navigation || navigation.length === 0) {\n      return new Set<string>();\n    }\n\n    return createOpenedCollapseIds(navigation, pathname);\n  }, [navigation, pathname]);\n\n  if (!navigation || navigation.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {inputGlobalStyles}\n      {layout === 'vertical' && (\n        <NavVerticalLayout\n          checkPermission={false}\n          {...props}\n          openedCollapseIds={openedCollapseIds}\n        />\n      )}\n    </>\n  );\n}\n\n/**\n * Memoized navigation menu component.\n */\nconst MemoizedNavigationMenu = memo(NavigationMenu);\nexport { MemoizedNavigationMenu as NavigationMenu };\n"],"names":["inputGlobalStyles","jsx","GlobalStyles","__name","createOpenedCollapseIds","navigation","pathname","openedCollapseIds","visitItems","items","hasMatchedDescendant","item","hasSelfMatch","hasChildMatch","hasMatchedItem","NavigationMenu","props","layout","useLocation","useMemo","jsxs","Fragment","NavVerticalLayout","MemoizedNavigationMenu","memo"],"mappings":";;;;;;;AAMA,MAAMA,IACJ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,QAAQ,gBAAAC,EAAA,OAAO;AAAA,MACb,2BAA2B;AAAA,QACzB,oBAAoB;AAAA,UAClB,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,yBAAyB;AAAA,YACvB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,WAAW;AAAA,UACT,oBAAoB;AAAA,YAClB,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,yBAAyB;AAAA,cACvB,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF,IAnBM;AAAA,EAoBR;AACF,GAqBIC,IAA0B,gBAAAD,EAAA,CAACE,GAA2BC,MAAqB;AAC/E,QAAMC,wBAAwB,IAAA,GAExBC,IAAa,gBAAAL,EAAA,CAACM,MAAkC;AACpD,QAAIC,IAAuB;AAE3B,eAAWC,KAAQF,GAAO;AACxB,YAAMG,IAAe,GAAQD,EAAK,QAAQA,EAAK,QAAQL,KAAYA,EAAS,SAASK,EAAK,GAAG,KACvFE,IAAgBF,EAAK,WAAWH,EAAWG,EAAK,QAAQ,IAAI,IAC5DG,IAAiBF,KAAgBC;AAEvC,MAAIC,KAAkBH,EAAK,SAAS,cAClCJ,EAAkB,IAAII,EAAK,EAAE,GAG3BG,MACFJ,IAAuB;AAAA,IAE3B;AAEA,WAAOA;AAAA,EACT,GAlBmB;AAoBnB,SAAAF,EAAWH,CAAU,GAEdE;AACT,GA1BgC;AAiChC,SAASQ,EAAeC,GAA4B;AAClD,QAAM,EAAE,YAAAX,GAAY,QAAAY,IAAS,WAAA,IAAeD,GACtC,EAAE,UAAAV,EAAA,IAAaY,EAAA,GAEfX,IAAoBY,EAAQ,MAC5B,CAACd,KAAcA,EAAW,WAAW,wBAC5B,IAAA,IAGND,EAAwBC,GAAYC,CAAQ,GAClD,CAACD,GAAYC,CAAQ,CAAC;AAEzB,SAAI,CAACD,KAAcA,EAAW,WAAW,IAChC,OAIP,gBAAAe,EAAAC,GAAA,EACG,UAAA;AAAA,IAAArB;AAAA,IACAiB,MAAW,cACV,gBAAAhB;AAAA,MAACqB;AAAA,MAAA;AAAA,QACC,iBAAiB;AAAA,QAChB,GAAGN;AAAA,QACJ,mBAAAT;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AA5BSJ,EAAAY,GAAA;AAiCT,MAAMQ,IAAyBC,EAAKT,CAAc;"}

package/dist/layout/components/navigation/vertical/NavVerticalLayout.js

@@ -0,0 +1,76 @@
+var m = Object.defineProperty;
+var a = (t, i) => m(t, "name", { value: i, configurable: !0 });
+import { jsx as r } from "../../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import g from "@mui/material/List";
+import { styled as v } from "@mui/material/styles";
+import { clsx as u } from "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { NavItem as y } from "../NavItem.js";
+const b = v(g)(({ theme: t }) => ({
+  "& .owp-list-item": {
+    "&:hover": {
+      backgroundColor: "rgba(0,0,0,.04)",
+      ...t.applyStyles("dark", {
+        backgroundColor: "rgba(255, 255, 255, 0.05)"
+      })
+    },
+    "&:focus:not(.active)": {
+      backgroundColor: "rgba(0,0,0,.05)",
+      ...t.applyStyles("dark", {
+        backgroundColor: "rgba(255, 255, 255, 0.06)"
+      })
+    }
+  },
+  "& .owp-list-item-text": {
+    margin: 0
+  },
+  "& .owp-list-item-text-primary": {
+    lineHeight: "20px"
+  },
+  "&.active-square-list": {
+    "& .owp-list-item, & .active.owp-list-item": {
+      width: "100%",
+      borderRadius: "0"
+    }
+  },
+  "&.dense": {
+    "& .owp-list-item": {
+      paddingTop: 0,
+      paddingBottom: 0,
+      height: 32
+    }
+  }
+}));
+function L(t) {
+  const { navigation: i, active: s, dense: l, className: p, onItemClick: o, checkPermission: n, openedCollapseIds: c } = t;
+  function d(e) {
+    o == null || o(e);
+  }
+  return a(d, "handleItemClick"), /* @__PURE__ */ r(
+    b,
+    {
+      className: u(
+        "navigation whitespace-nowrap px-12 py-0",
+        `active-${s}-list`,
+        l && "dense",
+        p
+      ),
+      children: i.map((e) => /* @__PURE__ */ r(
+        y,
+        {
+          type: `vertical-${e.type}`,
+          item: e,
+          nestedLevel: 0,
+          onItemClick: d,
+          checkPermission: n,
+          openedCollapseIds: c
+        },
+        e.id
+      ))
+    }
+  );
+}
+a(L, "NavVerticalLayout");
+export {
+  L as NavVerticalLayout
+};
+//# sourceMappingURL=NavVerticalLayout.js.map

package/dist/layout/components/navigation/vertical/NavVerticalLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavVerticalLayout.js","sources":["../../../../../src/layout/components/navigation/vertical/NavVerticalLayout.tsx"],"sourcesContent":["import List from '@mui/material/List';\nimport { styled } from '@mui/material/styles';\nimport type { OwpNavItemType as NavItemType } from '@/types/OwpNavigationTypes';\nimport clsx from 'clsx';\nimport { NavItem } from '../NavItem';\nimport { NavigationMenuProps } from '../NavigationMenu';\n\nconst StyledList = styled(List)(({ theme }) => ({\n  '& .owp-list-item': {\n    '&:hover': {\n      backgroundColor: 'rgba(0,0,0,.04)',\n      ...theme.applyStyles('dark', {\n        backgroundColor: 'rgba(255, 255, 255, 0.05)',\n      }),\n    },\n    '&:focus:not(.active)': {\n      backgroundColor: 'rgba(0,0,0,.05)',\n      ...theme.applyStyles('dark', {\n        backgroundColor: 'rgba(255, 255, 255, 0.06)',\n      }),\n    },\n  },\n  '& .owp-list-item-text': {\n    margin: 0,\n  },\n  '& .owp-list-item-text-primary': {\n    lineHeight: '20px',\n  },\n  '&.active-square-list': {\n    '& .owp-list-item, & .active.owp-list-item': {\n      width: '100%',\n      borderRadius: '0',\n    },\n  },\n  '&.dense': {\n    '& .owp-list-item': {\n      paddingTop: 0,\n      paddingBottom: 0,\n      height: 32,\n    },\n  },\n}));\n\n/**\n * NavVerticalLayout\n * This component is used to render vertical navigations using\n * the Material-UI List component. It accepts the NavigationMenuProps props\n * and renders the nav items accordingly.\n */\nfunction NavVerticalLayout(props: NavigationMenuProps) {\n  const { navigation, active, dense, className, onItemClick, checkPermission, openedCollapseIds } =\n    props;\n\n  function handleItemClick(item: NavItemType) {\n    onItemClick?.(item);\n  }\n\n  return (\n    <StyledList\n      className={clsx(\n        'navigation whitespace-nowrap px-12 py-0',\n        `active-${active}-list`,\n        dense && 'dense',\n        className,\n      )}\n    >\n      {navigation.map((_item) => (\n        <NavItem\n          key={_item.id}\n          type={`vertical-${_item.type}`}\n          item={_item}\n          nestedLevel={0}\n          onItemClick={handleItemClick}\n          checkPermission={checkPermission}\n          openedCollapseIds={openedCollapseIds}\n        />\n      ))}\n    </StyledList>\n  );\n}\n\nexport { NavVerticalLayout };\n"],"names":["StyledList","styled","List","theme","NavVerticalLayout","props","navigation","active","dense","className","onItemClick","checkPermission","openedCollapseIds","handleItemClick","item","__name","jsx","clsx","_item","NavItem"],"mappings":";;;;;;;AAOA,MAAMA,IAAaC,EAAOC,CAAI,EAAE,CAAC,EAAE,OAAAC,SAAa;AAAA,EAC9C,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,iBAAiB;AAAA,MACjB,GAAGA,EAAM,YAAY,QAAQ;AAAA,QAC3B,iBAAiB;AAAA,MAAA,CAClB;AAAA,IAAA;AAAA,IAEH,wBAAwB;AAAA,MACtB,iBAAiB;AAAA,MACjB,GAAGA,EAAM,YAAY,QAAQ;AAAA,QAC3B,iBAAiB;AAAA,MAAA,CAClB;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,yBAAyB;AAAA,IACvB,QAAQ;AAAA,EAAA;AAAA,EAEV,iCAAiC;AAAA,IAC/B,YAAY;AAAA,EAAA;AAAA,EAEd,wBAAwB;AAAA,IACtB,6CAA6C;AAAA,MAC3C,OAAO;AAAA,MACP,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,WAAW;AAAA,IACT,oBAAoB;AAAA,MAClB,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,EAAE;AAQF,SAASC,EAAkBC,GAA4B;AACrD,QAAM,EAAE,YAAAC,GAAY,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,GAAW,aAAAC,GAAa,iBAAAC,GAAiB,mBAAAC,MAC1EP;AAEF,WAASQ,EAAgBC,GAAmB;AAC1C,IAAAJ,KAAA,QAAAA,EAAcI;AAAA,EAChB;AAFS,SAAAC,EAAAF,GAAA,oBAKP,gBAAAG;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,WAAWiB;AAAA,QACT;AAAA,QACA,UAAUV,CAAM;AAAA,QAChBC,KAAS;AAAA,QACTC;AAAA,MAAA;AAAA,MAGD,UAAAH,EAAW,IAAI,CAACY,MACf,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,MAAM,YAAYD,EAAM,IAAI;AAAA,UAC5B,MAAMA;AAAA,UACN,aAAa;AAAA,UACb,aAAaL;AAAA,UACb,iBAAAF;AAAA,UACA,mBAAAC;AAAA,QAAA;AAAA,QANKM,EAAM;AAAA,MAAA,CAQd;AAAA,IAAA;AAAA,EAAA;AAGP;AA9BSH,EAAAX,GAAA;"}

package/dist/layout/components/navigation/vertical/types/NavVerticalCollapse.js

@@ -0,0 +1,130 @@
+var v = Object.defineProperty;
+var a = (o, t) => v(o, "name", { value: t, configurable: !0 });
+import { jsxs as h, jsx as i } from "../../../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import N from "../../../../../components/OwpNavLinkAdapter/OwpNavLinkAdapter.js";
+import { ListItemButton as b } from "@mui/material";
+import L from "@mui/material/Collapse";
+import k from "@mui/material/IconButton";
+import R from "@mui/material/List";
+import z from "@mui/material/ListItemText";
+import { styled as B, alpha as C } from "@mui/material/styles";
+import { clsx as g } from "../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { useState as H, useEffect as I } from "react";
+import { NavBadge as O } from "../../NavBadge.js";
+import { NavItem as S } from "../../NavItem.js";
+import { OwpSvgIcon as f } from "../../../../../components/OwpSvgIcon/OwpSvgIcon.js";
+const P = B(R)(({ theme: o, ...t }) => ({
+  padding: 0,
+  "&.open": {},
+  "& > .owp-list-item": {
+    minHeight: 36,
+    width: "100%",
+    borderRadius: "8px",
+    margin: "0 0 4px 0",
+    paddingRight: 16,
+    paddingLeft: t.itempadding > 80 ? 80 : t.itempadding,
+    paddingTop: 10,
+    paddingBottom: 10,
+    color: C(o.palette.text.primary, 0.7),
+    "&:hover": {
+      color: o.palette.text.primary
+    },
+    "& > .owp-list-item-icon": {
+      marginRight: 16,
+      width: 22,
+      height: 22,
+      minWidth: 22,
+      minHeight: 22,
+      fontSize: 22,
+      lineHeight: "22px",
+      textAlign: "center",
+      color: "inherit"
+    }
+  }
+}));
+function Q(o) {
+  const { item: t, nestedLevel: s = 0, onItemClick: u, checkPermission: p, openedCollapseIds: n } = o, r = (n == null ? void 0 : n.has(t.id)) ?? !1, [x, l] = H(r), m = r || x, w = s > 0 ? 38 + s * 16 : 16;
+  I(() => {
+    r && l(!0);
+  }, [r]);
+  const c = t.url ? N : "li";
+  let d = {};
+  return typeof c != "string" && (d = {
+    disabled: t.disabled,
+    to: t.url,
+    end: t.end,
+    role: "button"
+  }), p && !(t != null && t.hasPermission) ? null : /* @__PURE__ */ h(P, { className: g(m && "open"), itempadding: w, sx: t.sx, children: [
+    /* @__PURE__ */ h(
+      b,
+      {
+        component: c,
+        className: "owp-list-item",
+        onClick: /* @__PURE__ */ a(() => {
+          l((e) => !e);
+        }, "onClick"),
+        ...d,
+        children: [
+          t.icon && /* @__PURE__ */ i(f, { className: g("owp-list-item-icon shrink-0", t.iconClass), color: "action", children: t.icon }),
+          /* @__PURE__ */ i(
+            z,
+            {
+              className: "owp-list-item-text",
+              primary: t.title,
+              secondary: t.subtitle,
+              sx: {
+                my: 0,
+                display: "flex",
+                flexDirection: "column",
+                gap: 0.25,
+                "& .owp-list-item-text-primary": {
+                  fontSize: 15,
+                  fontWeight: 600,
+                  lineHeight: 1.4
+                },
+                "& .owp-list-item-text-secondary": {
+                  fontSize: 14,
+                  fontWeight: 500,
+                  lineHeight: 1.4
+                }
+              },
+              classes: {
+                primary: "owp-list-item-text-primary truncate",
+                secondary: "owp-list-item-text-secondary truncate"
+              }
+            }
+          ),
+          t.badge && /* @__PURE__ */ i(O, { className: "mx-4", badge: t.badge }),
+          /* @__PURE__ */ i(
+            k,
+            {
+              disableRipple: !0,
+              className: "-mx-12 h-20 w-20 p-0 hover:bg-transparent focus:bg-transparent",
+              onClick: /* @__PURE__ */ a((e) => {
+                e.preventDefault(), e.stopPropagation(), l((y) => !y);
+              }, "onClick"),
+              children: /* @__PURE__ */ i(f, { size: 13, className: "arrow-icon", color: "inherit", children: m ? "heroicons-solid:chevron-down" : "heroicons-solid:chevron-right" })
+            }
+          )
+        ]
+      }
+    ),
+    t.children && /* @__PURE__ */ i(L, { in: m, className: "collapse-children", children: t.children.map((e) => /* @__PURE__ */ i(
+      S,
+      {
+        type: `vertical-${e.type}`,
+        item: e,
+        nestedLevel: s + 1,
+        onItemClick: u,
+        checkPermission: p,
+        openedCollapseIds: n
+      },
+      e.id
+    )) })
+  ] });
+}
+a(Q, "NavVerticalCollapse");
+export {
+  Q as NavVerticalCollapse
+};
+//# sourceMappingURL=NavVerticalCollapse.js.map

package/dist/layout/components/navigation/vertical/types/NavVerticalCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavVerticalCollapse.js","sources":["../../../../../../src/layout/components/navigation/vertical/types/NavVerticalCollapse.tsx"],"sourcesContent":["import NavLinkAdapter from '@/components/OwpNavLinkAdapter';\nimport { OwpSvgIcon as SvgIcon } from '@/components/OwpSvgIcon';\nimport { ListItemButton } from '@mui/material';\nimport Collapse from '@mui/material/Collapse';\nimport IconButton from '@mui/material/IconButton';\nimport List, { ListProps } from '@mui/material/List';\nimport ListItemText from '@mui/material/ListItemText';\nimport { alpha, styled } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { useEffect, useState } from 'react';\nimport { NavBadge } from '../../NavBadge';\nimport { NavItem, NavItemComponentProps } from '../../NavItem';\n\ntype ListComponentProps = ListProps & {\n  itempadding: number;\n};\n\nconst Root = styled(List)<ListComponentProps>(({ theme, ...props }) => ({\n  padding: 0,\n  '&.open': {},\n  '& > .owp-list-item': {\n    minHeight: 36,\n    width: '100%',\n    borderRadius: '8px',\n    margin: '0 0 4px 0',\n    paddingRight: 16,\n    paddingLeft: props.itempadding > 80 ? 80 : props.itempadding,\n    paddingTop: 10,\n    paddingBottom: 10,\n    color: alpha(theme.palette.text.primary, 0.7),\n    '&:hover': {\n      color: theme.palette.text.primary,\n    },\n    '& > .owp-list-item-icon': {\n      marginRight: 16,\n      width: 22,\n      height: 22,\n      minWidth: 22,\n      minHeight: 22,\n      fontSize: 22,\n      lineHeight: '22px',\n      textAlign: 'center',\n      color: 'inherit',\n    },\n  },\n}));\n\n/**\n * NavVerticalCollapse component used for vertical navigation items with collapsible children.\n */\nfunction NavVerticalCollapse(props: NavItemComponentProps) {\n  const { item, nestedLevel = 0, onItemClick, checkPermission, openedCollapseIds } = props;\n\n  const isRouteOpened = openedCollapseIds?.has(item.id) ?? false;\n  const [manualOpen, setManualOpen] = useState(isRouteOpened);\n  const open = isRouteOpened || manualOpen;\n\n  const itempadding = nestedLevel > 0 ? 38 + nestedLevel * 16 : 16;\n\n  useEffect(() => {\n    if (isRouteOpened) {\n      setManualOpen(true);\n    }\n  }, [isRouteOpened]);\n\n  const component = item.url ? NavLinkAdapter : 'li';\n\n  let itemProps = {};\n\n  if (typeof component !== 'string') {\n    itemProps = {\n      disabled: item.disabled,\n      to: item.url,\n      end: item.end,\n      role: 'button',\n    };\n  }\n\n  if (checkPermission && !item?.hasPermission) {\n    return null;\n  }\n\n  return (\n    <Root className={clsx(open && 'open')} itempadding={itempadding} sx={item.sx}>\n      <ListItemButton\n        component={component}\n        className=\"owp-list-item\"\n        onClick={() => {\n          setManualOpen((previousOpen) => !previousOpen);\n        }}\n        {...itemProps}\n      >\n        {item.icon && (\n          <SvgIcon className={clsx('owp-list-item-icon shrink-0', item.iconClass)} color=\"action\">\n            {item.icon}\n          </SvgIcon>\n        )}\n\n        <ListItemText\n          className=\"owp-list-item-text\"\n          primary={item.title}\n          secondary={item.subtitle}\n          sx={{\n            my: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 0.25,\n            '& .owp-list-item-text-primary': {\n              fontSize: 15,\n              fontWeight: 600,\n              lineHeight: 1.4,\n            },\n            '& .owp-list-item-text-secondary': {\n              fontSize: 14,\n              fontWeight: 500,\n              lineHeight: 1.4,\n            },\n          }}\n          classes={{\n            primary: 'owp-list-item-text-primary truncate',\n            secondary: 'owp-list-item-text-secondary truncate',\n          }}\n        />\n\n        {item.badge && <NavBadge className=\"mx-4\" badge={item.badge} />}\n\n        <IconButton\n          disableRipple\n          className=\"-mx-12 h-20 w-20 p-0 hover:bg-transparent focus:bg-transparent\"\n          onClick={(ev) => {\n            ev.preventDefault();\n            ev.stopPropagation();\n            setManualOpen((previousOpen) => !previousOpen);\n          }}\n        >\n          <SvgIcon size={13} className=\"arrow-icon\" color=\"inherit\">\n            {open ? 'heroicons-solid:chevron-down' : 'heroicons-solid:chevron-right'}\n          </SvgIcon>\n        </IconButton>\n      </ListItemButton>\n\n      {item.children && (\n        <Collapse in={open} className=\"collapse-children\">\n          {item.children.map((_item) => (\n            <NavItem\n              key={_item.id}\n              type={`vertical-${_item.type}`}\n              item={_item}\n              nestedLevel={nestedLevel + 1}\n              onItemClick={onItemClick}\n              checkPermission={checkPermission}\n              openedCollapseIds={openedCollapseIds}\n            />\n          ))}\n        </Collapse>\n      )}\n    </Root>\n  );\n}\n\nexport { NavVerticalCollapse };\n"],"names":["Root","styled","List","theme","props","alpha","NavVerticalCollapse","item","nestedLevel","onItemClick","checkPermission","openedCollapseIds","isRouteOpened","manualOpen","setManualOpen","useState","open","itempadding","useEffect","component","NavLinkAdapter","itemProps","jsxs","clsx","ListItemButton","__name","previousOpen","jsx","SvgIcon","ListItemText","NavBadge","IconButton","ev","Collapse","_item","NavItem"],"mappings":"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"}

package/dist/layout/components/navigation/vertical/types/NavVerticalGroup.js

@@ -0,0 +1,99 @@
+var g = Object.defineProperty;
+var o = (i, e) => g(i, "name", { value: e, configurable: !0 });
+import { jsxs as f, jsx as a, Fragment as x } from "../../../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import u from "../../../../../components/OwpNavLinkAdapter/OwpNavLinkAdapter.js";
+import { ListItemText as h, ListItem as y } from "@mui/material";
+import { styled as b, alpha as L } from "@mui/material/styles";
+import { clsx as S } from "../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { NavItem as T } from "../../NavItem.js";
+const v = b(y)(({ theme: i, ...e }) => ({
+  minHeight: 36,
+  width: "100%",
+  borderRadius: "8px",
+  margin: "28px 0 0 0",
+  "&:first-of-type": {
+    marginTop: 0
+  },
+  paddingRight: 16,
+  paddingLeft: e.itempadding > 80 ? 80 : e.itempadding,
+  paddingTop: 10,
+  paddingBottom: 10,
+  color: L(i.palette.text.primary, 0.7),
+  fontWeight: 600,
+  letterSpacing: "0.025em"
+}));
+function W(i) {
+  var d;
+  const { item: e, nestedLevel: n = 0, onItemClick: r, checkPermission: s, openedCollapseIds: m } = i, c = n > 0 ? 38 + n * 16 : 16, p = e.url ? u : "li";
+  let l = {};
+  return typeof p != "string" && (l = {
+    disabled: e.disabled,
+    to: e.url,
+    end: e.end,
+    role: "button"
+  }), s && !(e != null && e.hasPermission) ? null : /* @__PURE__ */ f(x, { children: [
+    /* @__PURE__ */ a(
+      v,
+      {
+        component: p,
+        itempadding: c,
+        className: S(
+          "owp-list-subheader flex items-center  py-10",
+          e.url ? "" : "cursor-default"
+        ),
+        onClick: /* @__PURE__ */ o(() => r == null ? void 0 : r(e), "onClick"),
+        sx: e.sx,
+        ...l,
+        children: /* @__PURE__ */ a(
+          h,
+          {
+            className: "owp-list-subheader-text",
+            sx: /* @__PURE__ */ o((t) => ({
+              margin: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: t.spacing(0.25),
+              "& > .MuiListItemText-primary": {
+                fontSize: 12,
+                color: "secondary.main",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: ".05em",
+                lineHeight: "20px",
+                ...t.applyStyles("dark", {
+                  color: "secondary.light"
+                })
+              },
+              "& > .MuiListItemText-secondary": {
+                fontSize: 11,
+                color: "text.disabled",
+                letterSpacing: ".06px",
+                fontWeight: 500,
+                lineHeight: "1.5"
+              }
+            }), "sx"),
+            primary: e.title,
+            secondary: e.subtitle
+          }
+        )
+      }
+    ),
+    (d = e.children) == null ? void 0 : d.map((t) => /* @__PURE__ */ a(
+      T,
+      {
+        type: `vertical-${t.type}`,
+        item: t,
+        nestedLevel: n,
+        onItemClick: r,
+        checkPermission: s,
+        openedCollapseIds: m
+      },
+      t.id
+    ))
+  ] });
+}
+o(W, "NavVerticalGroup");
+export {
+  W as NavVerticalGroup
+};
+//# sourceMappingURL=NavVerticalGroup.js.map

package/dist/layout/components/navigation/vertical/types/NavVerticalGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavVerticalGroup.js","sources":["../../../../../../src/layout/components/navigation/vertical/types/NavVerticalGroup.tsx"],"sourcesContent":["import NavLinkAdapter from '@/components/OwpNavLinkAdapter';\nimport { ListItem, ListItemButtonProps, ListItemText } from '@mui/material';\nimport { alpha, styled } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { NavItem, NavItemComponentProps } from '../../NavItem';\n\ntype ListItemButtonComponentProps = ListItemButtonProps & {\n  itempadding: number;\n};\n\nconst Root = styled(ListItem)<ListItemButtonComponentProps>(({ theme, ...props }) => ({\n  minHeight: 36,\n  width: '100%',\n  borderRadius: '8px',\n  margin: '28px 0 0 0',\n  '&:first-of-type': {\n    marginTop: 0,\n  },\n  paddingRight: 16,\n  paddingLeft: props.itempadding > 80 ? 80 : props.itempadding,\n  paddingTop: 10,\n  paddingBottom: 10,\n  color: alpha(theme.palette.text.primary, 0.7),\n  fontWeight: 600,\n  letterSpacing: '0.025em',\n}));\n\n/**\n * NavVerticalGroup renders a group of navigation items in a vertical layout.\n */\nfunction NavVerticalGroup(props: NavItemComponentProps) {\n  const { item, nestedLevel = 0, onItemClick, checkPermission, openedCollapseIds } = props;\n\n  const itempadding = nestedLevel > 0 ? 38 + nestedLevel * 16 : 16;\n\n  const component = item.url ? NavLinkAdapter : 'li';\n\n  let itemProps = {};\n\n  if (typeof component !== 'string') {\n    itemProps = {\n      disabled: item.disabled,\n      to: item.url,\n      end: item.end,\n      role: 'button',\n    };\n  }\n\n  if (checkPermission && !item?.hasPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <Root\n        component={component}\n        itempadding={itempadding}\n        className={clsx(\n          'owp-list-subheader flex items-center  py-10',\n          !item.url ? 'cursor-default' : '',\n        )}\n        onClick={() => onItemClick?.(item)}\n        sx={item.sx}\n        {...itemProps}\n      >\n        <ListItemText\n          className=\"owp-list-subheader-text\"\n          sx={(theme) => ({\n            margin: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            gap: theme.spacing(0.25),\n            '& > .MuiListItemText-primary': {\n              fontSize: 12,\n              color: 'secondary.main',\n              fontWeight: 600,\n              textTransform: 'uppercase',\n              letterSpacing: '.05em',\n              lineHeight: '20px',\n              ...theme.applyStyles('dark', {\n                color: 'secondary.light',\n              }),\n            },\n            '& > .MuiListItemText-secondary': {\n              fontSize: 11,\n              color: 'text.disabled',\n              letterSpacing: '.06px',\n              fontWeight: 500,\n              lineHeight: '1.5',\n            },\n          })}\n          primary={item.title}\n          secondary={item.subtitle}\n        />\n      </Root>\n      {item.children?.map((_item) => (\n        <NavItem\n          key={_item.id}\n          type={`vertical-${_item.type}`}\n          item={_item}\n          nestedLevel={nestedLevel}\n          onItemClick={onItemClick}\n          checkPermission={checkPermission}\n          openedCollapseIds={openedCollapseIds}\n        />\n      ))}\n    </>\n  );\n}\n\nexport { NavVerticalGroup };\n"],"names":["Root","styled","ListItem","theme","props","alpha","NavVerticalGroup","item","nestedLevel","onItemClick","checkPermission","openedCollapseIds","itempadding","component","NavLinkAdapter","itemProps","jsxs","Fragment","jsx","clsx","__name","ListItemText","_a","_item","NavItem"],"mappings":";;;;;;;;AAUA,MAAMA,IAAOC,EAAOC,CAAQ,EAAgC,CAAC,EAAE,OAAAC,GAAO,GAAGC,SAAa;AAAA,EACpF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,mBAAmB;AAAA,IACjB,WAAW;AAAA,EAAA;AAAA,EAEb,cAAc;AAAA,EACd,aAAaA,EAAM,cAAc,KAAK,KAAKA,EAAM;AAAA,EACjD,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,OAAOC,EAAMF,EAAM,QAAQ,KAAK,SAAS,GAAG;AAAA,EAC5C,YAAY;AAAA,EACZ,eAAe;AACjB,EAAE;AAKF,SAASG,EAAiBF,GAA8B;;AACtD,QAAM,EAAE,MAAAG,GAAM,aAAAC,IAAc,GAAG,aAAAC,GAAa,iBAAAC,GAAiB,mBAAAC,MAAsBP,GAE7EQ,IAAcJ,IAAc,IAAI,KAAKA,IAAc,KAAK,IAExDK,IAAYN,EAAK,MAAMO,IAAiB;AAE9C,MAAIC,IAAY,CAAA;AAWhB,SATI,OAAOF,KAAc,aACvBE,IAAY;AAAA,IACV,UAAUR,EAAK;AAAA,IACf,IAAIA,EAAK;AAAA,IACT,KAAKA,EAAK;AAAA,IACV,MAAM;AAAA,EAAA,IAING,KAAmB,EAACH,KAAA,QAAAA,EAAM,iBACrB,OAIP,gBAAAS,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAClB;AAAA,MAAA;AAAA,QACC,WAAAa;AAAA,QACA,aAAAD;AAAA,QACA,WAAWO;AAAA,UACT;AAAA,UACCZ,EAAK,MAAyB,KAAnB;AAAA,QAAmB;AAAA,QAEjC,SAAS,gBAAAa,EAAA,MAAMX,KAAA,gBAAAA,EAAcF,IAApB;AAAA,QACT,IAAIA,EAAK;AAAA,QACR,GAAGQ;AAAA,QAEJ,UAAA,gBAAAG;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,gBAAAD,EAAA,CAACjB,OAAW;AAAA,cACd,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,KAAKA,EAAM,QAAQ,IAAI;AAAA,cACvB,gCAAgC;AAAA,gBAC9B,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,eAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,GAAGA,EAAM,YAAY,QAAQ;AAAA,kBAC3B,OAAO;AAAA,gBAAA,CACR;AAAA,cAAA;AAAA,cAEH,kCAAkC;AAAA,gBAChC,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,eAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,YAAY;AAAA,cAAA;AAAA,YACd,IAtBE;AAAA,YAwBJ,SAASI,EAAK;AAAA,YACd,WAAWA,EAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,KAEDe,IAAAf,EAAK,aAAL,gBAAAe,EAAe,IAAI,CAACC,MACnB,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,MAAM,YAAYD,EAAM,IAAI;AAAA,QAC5B,MAAMA;AAAA,QACN,aAAAf;AAAA,QACA,aAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,mBAAAC;AAAA,MAAA;AAAA,MANKY,EAAM;AAAA,IAAA;AAAA,EAQd,GACH;AAEJ;AA9ESH,EAAAd,GAAA;"}

package/dist/layout/components/navigation/vertical/types/NavVerticalItem.js

@@ -0,0 +1,103 @@
+var d = Object.defineProperty;
+var o = (i, t) => d(i, "name", { value: t, configurable: !0 });
+import { jsxs as g, jsx as r } from "../../../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import x from "../../../../../components/OwpNavLinkAdapter/OwpNavLinkAdapter.js";
+import { ListItemButton as f } from "@mui/material";
+import h from "@mui/material/ListItemText";
+import { styled as u, alpha as m } from "@mui/material/styles";
+import { clsx as l } from "../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { NavBadge as y } from "../../NavBadge.js";
+import { OwpSvgIcon as w } from "../../../../../components/OwpSvgIcon/OwpSvgIcon.js";
+const b = u(f)(({ theme: i, ...t }) => ({
+  minHeight: 36,
+  width: "100%",
+  borderRadius: "8px",
+  margin: "0 0 4px 0",
+  paddingRight: 16,
+  paddingLeft: t.itempadding > 80 ? 80 : t.itempadding,
+  paddingTop: 10,
+  paddingBottom: 10,
+  color: m(i.palette.text.primary, 0.7),
+  cursor: "pointer",
+  textDecoration: "none!important",
+  "&:hover": {
+    color: i.palette.text.primary
+  },
+  "&.active": {
+    color: i.palette.secondary.main,
+    backgroundColor: m(i.palette.secondary.main, 0.2),
+    pointerEvents: "none",
+    transition: "border-radius .15s cubic-bezier(0.4,0.0,0.2,1)",
+    "& > .owp-list-item-text-primary": {
+      color: "inherit"
+    },
+    "& > .owp-list-item-icon": {
+      color: "inherit"
+    }
+  },
+  "& > .owp-list-item-icon": {
+    marginRight: 16,
+    width: 22,
+    height: 22,
+    minWidth: 22,
+    minHeight: 22,
+    fontSize: 22,
+    lineHeight: "22px",
+    textAlign: "center",
+    color: "inherit"
+  },
+  "& > .owp-list-item-text": {}
+}));
+function P(i) {
+  const { item: t, nestedLevel: n = 0, onItemClick: e, checkPermission: p } = i, c = n > 0 ? 38 + n * 16 : 16, a = t.url ? x : "li";
+  let s = {};
+  return typeof a != "string" && (s = {
+    disabled: t.disabled,
+    to: t.url || "",
+    end: t.end,
+    role: "button"
+  }), p && !(t != null && t.hasPermission) ? null : /* @__PURE__ */ g(
+    b,
+    {
+      component: a,
+      className: l("owp-list-item", t.active && "active"),
+      onClick: /* @__PURE__ */ o(() => e == null ? void 0 : e(t), "onClick"),
+      itempadding: c,
+      sx: t.sx,
+      ...s,
+      children: [
+        t.icon && /* @__PURE__ */ r(w, { className: l("owp-list-item-icon shrink-0", t.iconClass), color: "action", children: t.icon }),
+        /* @__PURE__ */ r(
+          h,
+          {
+            className: "owp-list-item-text",
+            primary: t.title,
+            secondary: t.subtitle,
+            sx: {
+              my: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.25,
+              "& .owp-list-item-text-primary": {
+                fontWeight: 600
+              },
+              "& .owp-list-item-text-secondary": {
+                fontWeight: 500
+              }
+            },
+            classes: {
+              primary: "text-lg font-medium owp-list-item-text-primary truncate",
+              secondary: "text-md font-medium owp-list-item-text-secondary leading-normal truncate"
+            }
+          }
+        ),
+        t.badge && /* @__PURE__ */ r(y, { badge: t.badge })
+      ]
+    }
+  );
+}
+o(P, "NavVerticalItem");
+export {
+  P as NavVerticalItem
+};
+//# sourceMappingURL=NavVerticalItem.js.map

package/dist/layout/components/navigation/vertical/types/NavVerticalItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavVerticalItem.js","sources":["../../../../../../src/layout/components/navigation/vertical/types/NavVerticalItem.tsx"],"sourcesContent":["import NavLinkAdapter from '@/components/OwpNavLinkAdapter';\nimport { OwpSvgIcon as SvgIcon } from '@/components/OwpSvgIcon';\nimport { ListItemButton, ListItemButtonProps } from '@mui/material';\nimport ListItemText from '@mui/material/ListItemText';\nimport { alpha, styled } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { NavBadge } from '../../NavBadge';\nimport { NavItemComponentProps } from '../../NavItem';\n\ntype ListItemButtonStyleProps = ListItemButtonProps & {\n  itempadding: number;\n};\n\nconst Root = styled(ListItemButton)<ListItemButtonStyleProps>(({ theme, ...props }) => ({\n  minHeight: 36,\n  width: '100%',\n  borderRadius: '8px',\n  margin: '0 0 4px 0',\n  paddingRight: 16,\n  paddingLeft: props.itempadding > 80 ? 80 : props.itempadding,\n  paddingTop: 10,\n  paddingBottom: 10,\n  color: alpha(theme.palette.text.primary, 0.7),\n  cursor: 'pointer',\n  textDecoration: 'none!important',\n  '&:hover': {\n    color: theme.palette.text.primary,\n  },\n  '&.active': {\n    color: theme.palette.secondary.main,\n    backgroundColor: alpha(theme.palette.secondary.main, 0.2),\n    pointerEvents: 'none',\n    transition: 'border-radius .15s cubic-bezier(0.4,0.0,0.2,1)',\n    '& > .owp-list-item-text-primary': {\n      color: 'inherit',\n    },\n    '& > .owp-list-item-icon': {\n      color: 'inherit',\n    },\n  },\n  '& > .owp-list-item-icon': {\n    marginRight: 16,\n    width: 22,\n    height: 22,\n    minWidth: 22,\n    minHeight: 22,\n    fontSize: 22,\n    lineHeight: '22px',\n    textAlign: 'center',\n    color: 'inherit',\n  },\n  '& > .owp-list-item-text': {},\n}));\n\n/**\n * NavVerticalItem renders a single vertical navigation item.\n */\nfunction NavVerticalItem(props: NavItemComponentProps) {\n  const { item, nestedLevel = 0, onItemClick, checkPermission } = props;\n\n  const itempadding = nestedLevel > 0 ? 38 + nestedLevel * 16 : 16;\n\n  const component = item.url ? NavLinkAdapter : 'li';\n\n  let itemProps = {};\n\n  if (typeof component !== 'string') {\n    itemProps = {\n      disabled: item.disabled,\n      to: item.url || '',\n      end: item.end,\n      role: 'button',\n    };\n  }\n\n  if (checkPermission && !item?.hasPermission) {\n    return null;\n  }\n\n  return (\n    <Root\n      component={component}\n      className={clsx('owp-list-item', item.active && 'active')}\n      onClick={() => onItemClick?.(item)}\n      itempadding={itempadding}\n      sx={item.sx}\n      {...itemProps}\n    >\n      {item.icon && (\n        <SvgIcon className={clsx('owp-list-item-icon shrink-0', item.iconClass)} color=\"action\">\n          {item.icon}\n        </SvgIcon>\n      )}\n\n      <ListItemText\n        className=\"owp-list-item-text\"\n        primary={item.title}\n        secondary={item.subtitle}\n        sx={{\n          my: 0,\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 0.25,\n          '& .owp-list-item-text-primary': {\n            fontWeight: 600,\n          },\n          '& .owp-list-item-text-secondary': {\n            fontWeight: 500,\n          },\n        }}\n        classes={{\n          primary: 'text-lg font-medium owp-list-item-text-primary truncate',\n          secondary: 'text-md font-medium owp-list-item-text-secondary leading-normal truncate',\n        }}\n      />\n      {item.badge && <NavBadge badge={item.badge} />}\n    </Root>\n  );\n}\n\nexport { NavVerticalItem };\n"],"names":["Root","styled","ListItemButton","theme","props","alpha","NavVerticalItem","item","nestedLevel","onItemClick","checkPermission","itempadding","component","NavLinkAdapter","itemProps","jsxs","clsx","__name","jsx","SvgIcon","ListItemText","NavBadge"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAOC,EAAOC,CAAc,EAA4B,CAAC,EAAE,OAAAC,GAAO,GAAGC,SAAa;AAAA,EACtF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAaA,EAAM,cAAc,KAAK,KAAKA,EAAM;AAAA,EACjD,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,OAAOC,EAAMF,EAAM,QAAQ,KAAK,SAAS,GAAG;AAAA,EAC5C,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AAAA,IACT,OAAOA,EAAM,QAAQ,KAAK;AAAA,EAAA;AAAA,EAE5B,YAAY;AAAA,IACV,OAAOA,EAAM,QAAQ,UAAU;AAAA,IAC/B,iBAAiBE,EAAMF,EAAM,QAAQ,UAAU,MAAM,GAAG;AAAA,IACxD,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,mCAAmC;AAAA,MACjC,OAAO;AAAA,IAAA;AAAA,IAET,2BAA2B;AAAA,MACzB,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,2BAA2B;AAAA,IACzB,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAAA,EAET,2BAA2B,CAAA;AAC7B,EAAE;AAKF,SAASG,EAAgBF,GAA8B;AACrD,QAAM,EAAE,MAAAG,GAAM,aAAAC,IAAc,GAAG,aAAAC,GAAa,iBAAAC,MAAoBN,GAE1DO,IAAcH,IAAc,IAAI,KAAKA,IAAc,KAAK,IAExDI,IAAYL,EAAK,MAAMM,IAAiB;AAE9C,MAAIC,IAAY,CAAA;AAWhB,SATI,OAAOF,KAAc,aACvBE,IAAY;AAAA,IACV,UAAUP,EAAK;AAAA,IACf,IAAIA,EAAK,OAAO;AAAA,IAChB,KAAKA,EAAK;AAAA,IACV,MAAM;AAAA,EAAA,IAING,KAAmB,EAACH,KAAA,QAAAA,EAAM,iBACrB,OAIP,gBAAAQ;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,WAAAY;AAAA,MACA,WAAWI,EAAK,iBAAiBT,EAAK,UAAU,QAAQ;AAAA,MACxD,SAAS,gBAAAU,EAAA,MAAMR,KAAA,gBAAAA,EAAcF,IAApB;AAAA,MACT,aAAAI;AAAA,MACA,IAAIJ,EAAK;AAAA,MACR,GAAGO;AAAA,MAEH,UAAA;AAAA,QAAAP,EAAK,QACJ,gBAAAW,EAACC,GAAA,EAAQ,WAAWH,EAAK,+BAA+BT,EAAK,SAAS,GAAG,OAAM,UAC5E,UAAAA,EAAK,MACR;AAAA,QAGF,gBAAAW;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAASb,EAAK;AAAA,YACd,WAAWA,EAAK;AAAA,YAChB,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,SAAS;AAAA,cACT,eAAe;AAAA,cACf,KAAK;AAAA,cACL,iCAAiC;AAAA,gBAC/B,YAAY;AAAA,cAAA;AAAA,cAEd,mCAAmC;AAAA,gBACjC,YAAY;AAAA,cAAA;AAAA,YACd;AAAA,YAEF,SAAS;AAAA,cACP,SAAS;AAAA,cACT,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,QAEDA,EAAK,SAAS,gBAAAW,EAACG,GAAA,EAAS,OAAOd,EAAK,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AA7DSU,EAAAX,GAAA;"}

package/dist/layout/components/navigation/vertical/types/NavVerticalLink.js

@@ -0,0 +1,98 @@
+var d = Object.defineProperty;
+var o = (i, t) => d(i, "name", { value: t, configurable: !0 });
+import { jsxs as p, jsx as n } from "../../../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { Link as c, ListItemButton as g } from "@mui/material";
+import x from "@mui/material/ListItemText";
+import { styled as f } from "@mui/material/styles";
+import { clsx as h } from "../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { NavBadge as u } from "../../NavBadge.js";
+import { OwpSvgIcon as y } from "../../../../../components/OwpSvgIcon/OwpSvgIcon.js";
+const w = f(g)(({ theme: i, ...t }) => ({
+  minHeight: 36,
+  width: "100%",
+  borderRadius: "8px",
+  margin: "0 0 4px 0",
+  paddingRight: 16,
+  paddingLeft: t.itempadding > 80 ? 80 : t.itempadding,
+  paddingTop: 10,
+  paddingBottom: 10,
+  "&.active": {
+    backgroundColor: `${i.palette.secondary.main}!important`,
+    color: `${i.palette.secondary.contrastText}!important`,
+    pointerEvents: "none",
+    transition: "border-radius .15s cubic-bezier(0.4,0.0,0.2,1)",
+    "& > .owp-list-item-text-primary": {
+      color: "inherit"
+    },
+    "& > .owp-list-item-icon": {
+      color: "inherit"
+    }
+  },
+  "& > .owp-list-item-icon": {
+    marginRight: 16,
+    width: 22,
+    height: 22,
+    minWidth: 22,
+    minHeight: 22,
+    fontSize: 22,
+    lineHeight: "22px",
+    textAlign: "center"
+  },
+  "& > .owp-list-item-text": {},
+  color: i.palette.text.primary,
+  textDecoration: "none!important"
+}));
+function H(i) {
+  const { item: t, nestedLevel: r = 0, onItemClick: e, checkPermission: m } = i, l = r > 0 ? 38 + r * 16 : 16;
+  let a = {};
+  const s = t.url ? c : "li";
+  return typeof s != "string" && (a = {
+    disabled: t.disabled,
+    href: t.url,
+    role: "button",
+    target: t.target ? t.target : "_blank"
+  }), m && !(t != null && t.hasPermission) ? null : /* @__PURE__ */ p(
+    w,
+    {
+      component: s,
+      className: "owp-list-item",
+      onClick: /* @__PURE__ */ o(() => e == null ? void 0 : e(t), "onClick"),
+      itempadding: l,
+      sx: t.sx,
+      ...a,
+      children: [
+        t.icon && /* @__PURE__ */ n(y, { className: h("owp-list-item-icon shrink-0", t.iconClass), color: "action", children: t.icon }),
+        /* @__PURE__ */ n(
+          x,
+          {
+            className: "owp-list-item-text",
+            primary: t.title,
+            secondary: t.subtitle,
+            sx: {
+              my: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.25,
+              "& .owp-list-item-text-primary": {
+                fontWeight: 600
+              },
+              "& .owp-list-item-text-secondary": {
+                fontWeight: 500
+              }
+            },
+            classes: {
+              primary: "text-lg font-medium owp-list-item-text-primary truncate",
+              secondary: "text-md font-medium owp-list-item-text-secondary leading-normal truncate"
+            }
+          }
+        ),
+        t.badge && /* @__PURE__ */ n(u, { badge: t.badge })
+      ]
+    }
+  );
+}
+o(H, "NavVerticalLink");
+export {
+  H as NavVerticalLink
+};
+//# sourceMappingURL=NavVerticalLink.js.map