@owp/core 2.1.6 → 2.2.0

package/dist/layout/components/navbar/NavbarToggleFab.js

@@ -0,0 +1,87 @@
+var s = Object.defineProperty;
+var n = (t, o) => s(t, "name", { value: o, configurable: !0 });
+import { 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 e from "@mui/material/Fab";
+import { styled as d } from "@mui/material/styles";
+import p from "@mui/material/Tooltip";
+import { clsx as l } from "../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { OwpSvgIcon as u } from "../../../components/OwpSvgIcon/OwpSvgIcon.js";
+const g = d(p)(({ theme: t }) => ({
+  "& > .button": {
+    height: 40,
+    position: "absolute",
+    zIndex: 99,
+    top: 12,
+    width: 24,
+    borderRadius: 38,
+    padding: 8,
+    backgroundColor: t.palette.background.paper,
+    transition: t.transitions.create(
+      ["background-color", "border-radius", "width", "min-width", "padding"],
+      {
+        easing: t.transitions.easing.easeInOut,
+        duration: t.transitions.duration.shorter
+      }
+    ),
+    "&:hover": {
+      width: 52,
+      paddingLeft: 8,
+      paddingRight: 8
+    },
+    "& > .button-icon": {
+      fontSize: 18,
+      transition: t.transitions.create(["transform"], {
+        easing: t.transitions.easing.easeInOut,
+        duration: t.transitions.duration.short
+      })
+    }
+  },
+  variants: [
+    {
+      props: {
+        position: "left"
+      },
+      style: {
+        "& > .button": {
+          borderBottomLeftRadius: 0,
+          borderTopLeftRadius: 0,
+          paddingLeft: 4,
+          left: 0
+        }
+      }
+    },
+    {
+      props: {
+        position: "right"
+      },
+      style: {
+        "& > .button": {
+          borderBottomRightRadius: 0,
+          borderTopRightRadius: 0,
+          paddingRight: 4,
+          right: 0,
+          "& > .button-icon": {
+            transform: "rotate(-180deg)"
+          }
+        }
+      }
+    }
+  ]
+}));
+function v(t) {
+  const { className: o = "", position: r = "left", onClick: a } = t;
+  return /* @__PURE__ */ i(
+    g,
+    {
+      title: "Show Navigation",
+      placement: r === "left" ? "right" : "left",
+      position: r,
+      children: /* @__PURE__ */ i(e, { className: l("button", o), onClick: a, disableRipple: !0, children: /* @__PURE__ */ i(u, { color: "action", className: "button-icon", children: "heroicons-outline:bars-3" }) })
+    }
+  );
+}
+n(v, "NavbarToggleFab");
+export {
+  v as default
+};
+//# sourceMappingURL=NavbarToggleFab.js.map

package/dist/layout/components/navbar/NavbarToggleFab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarToggleFab.js","sources":["../../../../src/layout/components/navbar/NavbarToggleFab.tsx"],"sourcesContent":["import Fab from '@mui/material/Fab';\nimport { styled } from '@mui/material/styles';\n\nimport { OwpSvgIcon as SvgIcon } from '@/components/OwpSvgIcon';\nimport Tooltip from '@mui/material/Tooltip';\nimport clsx from 'clsx';\n\nconst Root = styled(Tooltip)<{ position: 'left' | 'right' }>(({ theme }) => ({\n  '& > .button': {\n    height: 40,\n    position: 'absolute',\n    zIndex: 99,\n    top: 12,\n    width: 24,\n    borderRadius: 38,\n    padding: 8,\n    backgroundColor: theme.palette.background.paper,\n    transition: theme.transitions.create(\n      ['background-color', 'border-radius', 'width', 'min-width', 'padding'],\n      {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.shorter,\n      },\n    ),\n    '&:hover': {\n      width: 52,\n      paddingLeft: 8,\n      paddingRight: 8,\n    },\n    '& > .button-icon': {\n      fontSize: 18,\n      transition: theme.transitions.create(['transform'], {\n        easing: theme.transitions.easing.easeInOut,\n        duration: theme.transitions.duration.short,\n      }),\n    },\n  },\n  variants: [\n    {\n      props: {\n        position: 'left',\n      },\n      style: {\n        '& > .button': {\n          borderBottomLeftRadius: 0,\n          borderTopLeftRadius: 0,\n          paddingLeft: 4,\n          left: 0,\n        },\n      },\n    },\n    {\n      props: {\n        position: 'right',\n      },\n      style: {\n        '& > .button': {\n          borderBottomRightRadius: 0,\n          borderTopRightRadius: 0,\n          paddingRight: 4,\n          right: 0,\n          '& > .button-icon': {\n            transform: 'rotate(-180deg)',\n          },\n        },\n      },\n    },\n  ],\n}));\n\ntype NavbarToggleFabProps = {\n  className?: string;\n  position?: string;\n  onClick?: () => void;\n};\n\n/**\n * The NavbarToggleFab component.\n */\nfunction NavbarToggleFab(props: NavbarToggleFabProps) {\n  const { className = '', position = 'left', onClick } = props;\n\n  return (\n    <Root\n      title=\"Show Navigation\"\n      placement={position === 'left' ? 'right' : 'left'}\n      position={position as 'left' | 'right'}\n    >\n      <Fab className={clsx('button', className)} onClick={onClick} disableRipple>\n        <SvgIcon color=\"action\" className=\"button-icon\">\n          heroicons-outline:bars-3\n        </SvgIcon>\n      </Fab>\n    </Root>\n  );\n}\n\nexport default NavbarToggleFab;\n"],"names":["Root","styled","Tooltip","theme","NavbarToggleFab","props","className","position","onClick","jsx","Fab","clsx","SvgIcon","__name"],"mappings":";;;;;;;;AAOA,MAAMA,IAAOC,EAAOC,CAAO,EAAkC,CAAC,EAAE,OAAAC,SAAa;AAAA,EAC3E,eAAe;AAAA,IACb,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA,IACT,iBAAiBA,EAAM,QAAQ,WAAW;AAAA,IAC1C,YAAYA,EAAM,YAAY;AAAA,MAC5B,CAAC,oBAAoB,iBAAiB,SAAS,aAAa,SAAS;AAAA,MACrE;AAAA,QACE,QAAQA,EAAM,YAAY,OAAO;AAAA,QACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,MAAA;AAAA,IACvC;AAAA,IAEF,WAAW;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc;AAAA,IAAA;AAAA,IAEhB,oBAAoB;AAAA,MAClB,UAAU;AAAA,MACV,YAAYA,EAAM,YAAY,OAAO,CAAC,WAAW,GAAG;AAAA,QAClD,QAAQA,EAAM,YAAY,OAAO;AAAA,QACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH;AAAA,EAEF,UAAU;AAAA,IACR;AAAA,MACE,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,MAEZ,OAAO;AAAA,QACL,eAAe;AAAA,UACb,wBAAwB;AAAA,UACxB,qBAAqB;AAAA,UACrB,aAAa;AAAA,UACb,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF;AAAA,MACE,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,MAEZ,OAAO;AAAA,QACL,eAAe;AAAA,UACb,yBAAyB;AAAA,UACzB,sBAAsB;AAAA,UACtB,cAAc;AAAA,UACd,OAAO;AAAA,UACP,oBAAoB;AAAA,YAClB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ,EAAE;AAWF,SAASC,EAAgBC,GAA6B;AACpD,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,IAAW,QAAQ,SAAAC,MAAYH;AAEvD,SACE,gBAAAI;AAAA,IAACT;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAWO,MAAa,SAAS,UAAU;AAAA,MAC3C,UAAAA;AAAA,MAEA,4BAACG,GAAA,EAAI,WAAWC,EAAK,UAAUL,CAAS,GAAG,SAAAE,GAAkB,eAAa,IACxE,4BAACI,GAAA,EAAQ,OAAM,UAAS,WAAU,eAAc,sCAEhD,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAhBSC,EAAAT,GAAA;"}

package/dist/layout/components/navbar/style/NavbarStyle.js

@@ -0,0 +1,245 @@
+var w = Object.defineProperty;
+var e = (t, i) => w(t, "name", { value: i, configurable: !0 });
+import { jsxs as u, 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 { selectOwpNavbar as b, resetNavbar as y, navbarCloseFolded as v, navbarOpenFolded as x, navbarCloseMobile as W } from "../../../../store/navbarSlice.js";
+import { selectOwpCurrentLayoutConfig as N } from "../../../../store/owpSettingsSlice.js";
+import { useAppDispatch as S, useAppSelector as m } from "../../../../hooks/useAppStore.js";
+import { OwpHidden as f } from "../../../../components/OwpHidden/OwpHidden.js";
+import { styled as l } from "@mui/material/styles";
+import k from "@mui/material/SwipeableDrawer";
+import { useEffect as O } from "react";
+import g from "./NavbarStyleContent.js";
+const o = 280, C = l("div")(({ theme: t }) => ({
+  display: "flex",
+  flexDirection: "column",
+  zIndex: 4,
+  [t.breakpoints.up("lg")]: {
+    width: o,
+    minWidth: o
+  },
+  variants: [
+    {
+      props: /* @__PURE__ */ e(({ folded: i }) => i, "props"),
+      style: {
+        [t.breakpoints.up("lg")]: {
+          width: 76,
+          minWidth: 76
+        }
+      }
+    }
+  ]
+})), L = l("div")(({ theme: t }) => ({
+  minWidth: o,
+  width: o,
+  maxWidth: o,
+  maxHeight: "100%",
+  transition: t.transitions.create(["width", "min-width"], {
+    easing: t.transitions.easing.sharp,
+    duration: t.transitions.duration.shorter
+  }),
+  variants: [
+    {
+      props: {
+        position: "left"
+      },
+      style: {
+        borderRight: `1px solid ${t.palette.divider}`,
+        left: 0
+      }
+    },
+    {
+      props: {
+        position: "right"
+      },
+      style: {
+        borderLight: `1px solid ${t.palette.divider}`,
+        right: 0
+      }
+    },
+    {
+      props: /* @__PURE__ */ e(({ folded: i }) => i, "props"),
+      style: {
+        position: "absolute",
+        width: 76,
+        minWidth: 76,
+        top: 0,
+        bottom: 0
+      }
+    },
+    {
+      props: /* @__PURE__ */ e(({ foldedandopened: i }) => i, "props"),
+      style: {
+        width: o,
+        minWidth: o
+      }
+    },
+    {
+      props: /* @__PURE__ */ e(({ foldedandclosed: i }) => i, "props"),
+      style: {
+        "& .NavbarStyle-content": {
+          "& .logo-icon": {
+            width: 44,
+            height: 44
+          },
+          "& .logo-text": {
+            opacity: 0
+          },
+          "& .react-badge": {
+            opacity: 0
+          },
+          "& .navigation.px-12": {
+            paddingLeft: 10,
+            paddingRight: 10
+          },
+          "& .owp-list-item": {
+            width: 55,
+            minWidth: 55,
+            marginLeft: "auto",
+            marginRight: "auto",
+            paddingLeft: 0,
+            paddingRight: 0,
+            justifyContent: "center"
+          },
+          "& .owp-list-item > .owp-list-item-icon": {
+            width: 22,
+            height: 22,
+            minWidth: 22,
+            minHeight: 22,
+            fontSize: 22,
+            marginRight: 0
+          },
+          "& .owp-list-item > .owp-list-item-text": {
+            width: 0,
+            minWidth: 0,
+            flex: "0 0 0",
+            overflow: "hidden"
+          },
+          "& .owp-list-item-text, & .arrow-icon, & .item-badge": {
+            opacity: 0
+          },
+          "& .owp-list-subheader .owp-list-subheader-text": {
+            opacity: 0
+          },
+          "& .owp-list-subheader:before": {
+            content: '""',
+            display: "block",
+            position: "absolute",
+            minWidth: 16,
+            borderTop: "2px solid",
+            opacity: 0.2
+          },
+          "& .collapse-children": {
+            display: "none"
+          },
+          "& .user-menu": {
+            minWidth: 56,
+            width: 56,
+            justifyContent: "center",
+            paddingLeft: 8,
+            paddingRight: 8,
+            "& > :not(style) ~ :not(style)": {
+              marginLeft: 0,
+              marginRight: 0
+            },
+            "& > .flex-auto, & > .flex-shrink-0": {
+              width: 0,
+              minWidth: 0,
+              flex: "0 0 0",
+              overflow: "hidden"
+            },
+            "& .avatar": {
+              width: 36,
+              height: 36,
+              minWidth: 36,
+              minHeight: 36,
+              margin: 0,
+              fontSize: "18px",
+              lineHeight: "18px",
+              flexShrink: 0
+            },
+            "& .title": {
+              opacity: 0
+            },
+            "& .subtitle": {
+              opacity: 0
+            },
+            "& .info-icon": {
+              opacity: 0
+            },
+            "& .arrow": {
+              opacity: 0
+            }
+          }
+        }
+      }
+    }
+  ]
+})), R = l(k)(({ theme: t }) => ({
+  "& > .MuiDrawer-paper": {
+    minWidth: o,
+    width: o,
+    maxWidth: o,
+    maxHeight: "100%",
+    transition: t.transitions.create(["width", "min-width"], {
+      easing: t.transitions.easing.sharp,
+      duration: t.transitions.duration.shorter
+    })
+  }
+}));
+function I() {
+  var p, h, c;
+  const t = S(), i = m(N), d = m(b), a = !((p = i.navbar) != null && p.folded), r = a && !d.foldedOpen, s = a && d.foldedOpen;
+  return O(() => () => {
+    t(y());
+  }, [t]), /* @__PURE__ */ u(
+    C,
+    {
+      folded: a ? 1 : 0,
+      open: d.open,
+      id: "owp-navbar",
+      className: "sticky top-0 z-20 h-screen shrink-0",
+      children: [
+        /* @__PURE__ */ n(f, { lgDown: !0, children: /* @__PURE__ */ n(
+          L,
+          {
+            className: "sticky top-0 z-20 h-screen flex-auto shrink-0 flex-col overflow-hidden shadow",
+            position: (h = i == null ? void 0 : i.navbar) == null ? void 0 : h.position,
+            folded: a ? 1 : 0,
+            foldedandopened: s ? 1 : 0,
+            foldedandclosed: r ? 1 : 0,
+            onMouseEnter: /* @__PURE__ */ e(() => r && t(x()), "onMouseEnter"),
+            onMouseLeave: /* @__PURE__ */ e(() => s && t(v()), "onMouseLeave"),
+            children: /* @__PURE__ */ n(g, { className: "NavbarStyle-content" })
+          }
+        ) }),
+        /* @__PURE__ */ n(f, { lgUp: !0, children: /* @__PURE__ */ n(
+          R,
+          {
+            classes: {
+              paper: "flex-col flex-auto h-full"
+            },
+            folded: a ? 1 : 0,
+            foldedandopened: s ? 1 : 0,
+            foldedandclosed: r ? 1 : 0,
+            anchor: (c = i == null ? void 0 : i.navbar) == null ? void 0 : c.position,
+            variant: "temporary",
+            open: d.mobileOpen,
+            onClose: /* @__PURE__ */ e(() => t(W()), "onClose"),
+            onOpen: /* @__PURE__ */ e(() => {
+            }, "onOpen"),
+            disableSwipeToOpen: !0,
+            ModalProps: {
+              keepMounted: !0
+            },
+            children: /* @__PURE__ */ n(g, { className: "NavbarStyle-content" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+e(I, "NavbarStyle");
+export {
+  I as default
+};
+//# sourceMappingURL=NavbarStyle.js.map

package/dist/layout/components/navbar/style/NavbarStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarStyle.js","sources":["../../../../../src/layout/components/navbar/style/NavbarStyle.tsx"],"sourcesContent":["import { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\nimport {\n  navbarCloseFolded,\n  navbarCloseMobile,\n  navbarOpenFolded,\n  resetNavbar,\n  selectOwpNavbar as selectNavbar,\n} from '@/store/navbarSlice';\nimport { selectOwpCurrentLayoutConfig as selectCurrentLayoutConfig } from '@/store/owpSettingsSlice';\nimport { useAppDispatch, useAppSelector } from '@/hooks/useAppStore';\nimport { OwpHidden } from '@/components/OwpHidden';\nimport { styled } from '@mui/material/styles';\nimport SwipeableDrawer from '@mui/material/SwipeableDrawer';\nimport { Theme } from '@mui/system/createTheme';\nimport { useEffect } from 'react';\nimport NavbarStyleContent from './NavbarStyleContent';\n\nconst navbarWidth = 280;\n\ntype StyledNavBarPropsProps = {\n  theme?: Theme;\n  folded: number;\n  open: boolean;\n};\n\nconst Root = styled('div')<StyledNavBarPropsProps>(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  zIndex: 4,\n  [theme.breakpoints.up('lg')]: {\n    width: navbarWidth,\n    minWidth: navbarWidth,\n  },\n  variants: [\n    {\n      props: ({ folded }) => folded,\n      style: {\n        [theme.breakpoints.up('lg')]: {\n          width: 76,\n          minWidth: 76,\n        },\n      },\n    },\n  ],\n}));\n\ntype StyledNavBarProps = {\n  theme?: Theme;\n  open?: boolean;\n  folded: number;\n  foldedandopened: number;\n  foldedandclosed: number;\n  position?: string;\n  anchor?: string;\n};\n\nconst StyledNavbar = styled('div')<StyledNavBarProps>(({ theme }) => ({\n  minWidth: navbarWidth,\n  width: navbarWidth,\n  maxWidth: navbarWidth,\n  maxHeight: '100%',\n  transition: theme.transitions.create(['width', 'min-width'], {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.shorter,\n  }),\n  variants: [\n    {\n      props: {\n        position: 'left',\n      },\n      style: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n        left: 0,\n      },\n    },\n    {\n      props: {\n        position: 'right',\n      },\n      style: {\n        borderLight: `1px solid ${theme.palette.divider}`,\n        right: 0,\n      },\n    },\n    {\n      props: ({ folded }) => folded,\n      style: {\n        position: 'absolute',\n        width: 76,\n        minWidth: 76,\n        top: 0,\n        bottom: 0,\n      },\n    },\n    {\n      props: ({ foldedandopened }) => foldedandopened,\n      style: {\n        width: navbarWidth,\n        minWidth: navbarWidth,\n      },\n    },\n    {\n      props: ({ foldedandclosed }) => foldedandclosed,\n      style: {\n        '& .NavbarStyle-content': {\n          '& .logo-icon': {\n            width: 44,\n            height: 44,\n          },\n          '& .logo-text': {\n            opacity: 0,\n          },\n          '& .react-badge': {\n            opacity: 0,\n          },\n          '& .navigation.px-12': {\n            paddingLeft: 10,\n            paddingRight: 10,\n          },\n          '& .owp-list-item': {\n            width: 55,\n            minWidth: 55,\n            marginLeft: 'auto',\n            marginRight: 'auto',\n            paddingLeft: 0,\n            paddingRight: 0,\n            justifyContent: 'center',\n          },\n          '& .owp-list-item > .owp-list-item-icon': {\n            width: 22,\n            height: 22,\n            minWidth: 22,\n            minHeight: 22,\n            fontSize: 22,\n            marginRight: 0,\n          },\n          '& .owp-list-item > .owp-list-item-text': {\n            width: 0,\n            minWidth: 0,\n            flex: '0 0 0',\n            overflow: 'hidden',\n          },\n          '& .owp-list-item-text, & .arrow-icon, & .item-badge': {\n            opacity: 0,\n          },\n          '& .owp-list-subheader .owp-list-subheader-text': {\n            opacity: 0,\n          },\n          '& .owp-list-subheader:before': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            minWidth: 16,\n            borderTop: '2px solid',\n            opacity: 0.2,\n          },\n          '& .collapse-children': {\n            display: 'none',\n          },\n          '& .user-menu': {\n            minWidth: 56,\n            width: 56,\n            justifyContent: 'center',\n            paddingLeft: 8,\n            paddingRight: 8,\n            '& > :not(style) ~ :not(style)': {\n              marginLeft: 0,\n              marginRight: 0,\n            },\n            '& > .flex-auto, & > .flex-shrink-0': {\n              width: 0,\n              minWidth: 0,\n              flex: '0 0 0',\n              overflow: 'hidden',\n            },\n            '& .avatar': {\n              width: 36,\n              height: 36,\n              minWidth: 36,\n              minHeight: 36,\n              margin: 0,\n              fontSize: '18px',\n              lineHeight: '18px',\n              flexShrink: 0,\n            },\n            '& .title': {\n              opacity: 0,\n            },\n            '& .subtitle': {\n              opacity: 0,\n            },\n            '& .info-icon': {\n              opacity: 0,\n            },\n            '& .arrow': {\n              opacity: 0,\n            },\n          },\n        },\n      },\n    },\n  ],\n}));\n\nconst StyledNavbarMobile = styled(SwipeableDrawer)<StyledNavBarProps>(({ theme }) => ({\n  '& > .MuiDrawer-paper': {\n    minWidth: navbarWidth,\n    width: navbarWidth,\n    maxWidth: navbarWidth,\n    maxHeight: '100%',\n    transition: theme.transitions.create(['width', 'min-width'], {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.shorter,\n    }),\n  },\n}));\n\n/**\n * The navbar style.\n */\nfunction NavbarStyle() {\n  const dispatch = useAppDispatch();\n  const config = useAppSelector(selectCurrentLayoutConfig) as LayoutConfigDefaultsType;\n  const navbar = useAppSelector(selectNavbar);\n\n  \n  const folded = !config.navbar?.folded;\n  const foldedandclosed = folded && !navbar.foldedOpen;\n  const foldedandopened = folded && navbar.foldedOpen;\n\n  useEffect(() => {\n    return () => {\n      dispatch(resetNavbar());\n    };\n  }, [dispatch]);\n\n  return (\n    <Root\n      folded={folded ? 1 : 0}\n      open={navbar.open}\n      id=\"owp-navbar\"\n      className=\"sticky top-0 z-20 h-screen shrink-0\"\n    >\n      <OwpHidden lgDown>\n        <StyledNavbar\n          className=\"sticky top-0 z-20 h-screen flex-auto shrink-0 flex-col overflow-hidden shadow\"\n          position={config?.navbar?.position}\n          folded={folded ? 1 : 0}\n          foldedandopened={foldedandopened ? 1 : 0}\n          foldedandclosed={foldedandclosed ? 1 : 0}\n          onMouseEnter={() => foldedandclosed && dispatch(navbarOpenFolded())}\n          onMouseLeave={() => foldedandopened && dispatch(navbarCloseFolded())}\n        >\n          <NavbarStyleContent className=\"NavbarStyle-content\" />\n        </StyledNavbar>\n      </OwpHidden>\n\n      <OwpHidden lgUp>\n        <StyledNavbarMobile\n          classes={{\n            paper: 'flex-col flex-auto h-full',\n          }}\n          folded={folded ? 1 : 0}\n          foldedandopened={foldedandopened ? 1 : 0}\n          foldedandclosed={foldedandclosed ? 1 : 0}\n          anchor={config?.navbar?.position as 'left' | 'top' | 'right' | 'bottom'}\n          variant=\"temporary\"\n          open={navbar.mobileOpen}\n          onClose={() => dispatch(navbarCloseMobile())}\n          onOpen={() => {}}\n          disableSwipeToOpen\n          ModalProps={{\n            keepMounted: true, \n          }}\n        >\n          <NavbarStyleContent className=\"NavbarStyle-content\" />\n        </StyledNavbarMobile>\n      </OwpHidden>\n    </Root>\n  );\n}\n\nexport default NavbarStyle;\n"],"names":["navbarWidth","Root","styled","theme","__name","folded","StyledNavbar","foldedandopened","foldedandclosed","StyledNavbarMobile","SwipeableDrawer","NavbarStyle","dispatch","useAppDispatch","config","useAppSelector","selectCurrentLayoutConfig","navbar","selectNavbar","_a","useEffect","resetNavbar","jsxs","jsx","OwpHidden","_b","navbarOpenFolded","navbarCloseFolded","NavbarStyleContent","_c","navbarCloseMobile"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,IAAc,KAQdC,IAAOC,EAAO,KAAK,EAA0B,CAAC,EAAE,OAAAC,SAAa;AAAA,EACjE,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAOH;AAAA,IACP,UAAUA;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR;AAAA,MACE,OAAO,gBAAAI,EAAA,CAAC,EAAE,QAAAC,EAAA,MAAaA,GAAhB;AAAA,MACP,OAAO;AAAA,QACL,CAACF,EAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,UAC5B,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEJ,EAAE,GAYIG,IAAeJ,EAAO,KAAK,EAAqB,CAAC,EAAE,OAAAC,SAAa;AAAA,EACpE,UAAUH;AAAA,EACV,OAAOA;AAAA,EACP,UAAUA;AAAA,EACV,WAAW;AAAA,EACX,YAAYG,EAAM,YAAY,OAAO,CAAC,SAAS,WAAW,GAAG;AAAA,IAC3D,QAAQA,EAAM,YAAY,OAAO;AAAA,IACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,EAAA,CACtC;AAAA,EACD,UAAU;AAAA,IACR;AAAA,MACE,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,MAEZ,OAAO;AAAA,QACL,aAAa,aAAaA,EAAM,QAAQ,OAAO;AAAA,QAC/C,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF;AAAA,MACE,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,MAEZ,OAAO;AAAA,QACL,aAAa,aAAaA,EAAM,QAAQ,OAAO;AAAA,QAC/C,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,OAAO,gBAAAC,EAAA,CAAC,EAAE,QAAAC,EAAA,MAAaA,GAAhB;AAAA,MACP,OAAO;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACP,UAAU;AAAA,QACV,KAAK;AAAA,QACL,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF;AAAA,MACE,OAAO,gBAAAD,EAAA,CAAC,EAAE,iBAAAG,EAAA,MAAsBA,GAAzB;AAAA,MACP,OAAO;AAAA,QACL,OAAOP;AAAA,QACP,UAAUA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF;AAAA,MACE,OAAO,gBAAAI,EAAA,CAAC,EAAE,iBAAAI,EAAA,MAAsBA,GAAzB;AAAA,MACP,OAAO;AAAA,QACL,0BAA0B;AAAA,UACxB,gBAAgB;AAAA,YACd,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,UAEV,gBAAgB;AAAA,YACd,SAAS;AAAA,UAAA;AAAA,UAEX,kBAAkB;AAAA,YAChB,SAAS;AAAA,UAAA;AAAA,UAEX,uBAAuB;AAAA,YACrB,aAAa;AAAA,YACb,cAAc;AAAA,UAAA;AAAA,UAEhB,oBAAoB;AAAA,YAClB,OAAO;AAAA,YACP,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,aAAa;AAAA,YACb,aAAa;AAAA,YACb,cAAc;AAAA,YACd,gBAAgB;AAAA,UAAA;AAAA,UAElB,0CAA0C;AAAA,YACxC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA,YACV,aAAa;AAAA,UAAA;AAAA,UAEf,0CAA0C;AAAA,YACxC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,YACN,UAAU;AAAA,UAAA;AAAA,UAEZ,uDAAuD;AAAA,YACrD,SAAS;AAAA,UAAA;AAAA,UAEX,kDAAkD;AAAA,YAChD,SAAS;AAAA,UAAA;AAAA,UAEX,gCAAgC;AAAA,YAC9B,SAAS;AAAA,YACT,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU;AAAA,YACV,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,UAEX,wBAAwB;AAAA,YACtB,SAAS;AAAA,UAAA;AAAA,UAEX,gBAAgB;AAAA,YACd,UAAU;AAAA,YACV,OAAO;AAAA,YACP,gBAAgB;AAAA,YAChB,aAAa;AAAA,YACb,cAAc;AAAA,YACd,iCAAiC;AAAA,cAC/B,YAAY;AAAA,cACZ,aAAa;AAAA,YAAA;AAAA,YAEf,sCAAsC;AAAA,cACpC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,MAAM;AAAA,cACN,UAAU;AAAA,YAAA;AAAA,YAEZ,aAAa;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,YAAY;AAAA,YAAA;AAAA,YAEd,YAAY;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,YAEX,eAAe;AAAA,cACb,SAAS;AAAA,YAAA;AAAA,YAEX,gBAAgB;AAAA,cACd,SAAS;AAAA,YAAA;AAAA,YAEX,YAAY;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ,EAAE,GAEIC,IAAqBP,EAAOQ,CAAe,EAAqB,CAAC,EAAE,OAAAP,SAAa;AAAA,EACpF,wBAAwB;AAAA,IACtB,UAAUH;AAAA,IACV,OAAOA;AAAA,IACP,UAAUA;AAAA,IACV,WAAW;AAAA,IACX,YAAYG,EAAM,YAAY,OAAO,CAAC,SAAS,WAAW,GAAG;AAAA,MAC3D,QAAQA,EAAM,YAAY,OAAO;AAAA,MACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,IAAA,CACtC;AAAA,EAAA;AAEL,EAAE;AAKF,SAASQ,IAAc;;AACrB,QAAMC,IAAWC,EAAA,GACXC,IAASC,EAAeC,CAAyB,GACjDC,IAASF,EAAeG,CAAY,GAGpCb,IAAS,GAACc,IAAAL,EAAO,WAAP,QAAAK,EAAe,SACzBX,IAAkBH,KAAU,CAACY,EAAO,YACpCV,IAAkBF,KAAUY,EAAO;AAEzC,SAAAG,EAAU,MACD,MAAM;AACX,IAAAR,EAASS,GAAa;AAAA,EACxB,GACC,CAACT,CAAQ,CAAC,GAGX,gBAAAU;AAAA,IAACrB;AAAA,IAAA;AAAA,MACC,QAAQI,IAAS,IAAI;AAAA,MACrB,MAAMY,EAAO;AAAA,MACb,IAAG;AAAA,MACH,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAM,EAACC,GAAA,EAAU,QAAM,IACf,UAAA,gBAAAD;AAAA,UAACjB;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,WAAUmB,IAAAX,KAAA,gBAAAA,EAAQ,WAAR,gBAAAW,EAAgB;AAAA,YAC1B,QAAQpB,IAAS,IAAI;AAAA,YACrB,iBAAiBE,IAAkB,IAAI;AAAA,YACvC,iBAAiBC,IAAkB,IAAI;AAAA,YACvC,cAAc,gBAAAJ,EAAA,MAAMI,KAAmBI,EAASc,GAAkB,GAApD;AAAA,YACd,cAAc,gBAAAtB,EAAA,MAAMG,KAAmBK,EAASe,GAAmB,GAArD;AAAA,YAEd,UAAA,gBAAAJ,EAACK,GAAA,EAAmB,WAAU,sBAAA,CAAsB;AAAA,UAAA;AAAA,QAAA,GAExD;AAAA,QAEA,gBAAAL,EAACC,GAAA,EAAU,MAAI,IACb,UAAA,gBAAAD;AAAA,UAACd;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,cACP,OAAO;AAAA,YAAA;AAAA,YAET,QAAQJ,IAAS,IAAI;AAAA,YACrB,iBAAiBE,IAAkB,IAAI;AAAA,YACvC,iBAAiBC,IAAkB,IAAI;AAAA,YACvC,SAAQqB,IAAAf,KAAA,gBAAAA,EAAQ,WAAR,gBAAAe,EAAgB;AAAA,YACxB,SAAQ;AAAA,YACR,MAAMZ,EAAO;AAAA,YACb,SAAS,gBAAAb,EAAA,MAAMQ,EAASkB,GAAmB,GAAlC;AAAA,YACT,QAAQ,gBAAA1B,EAAA,MAAM;AAAA,YAAC,GAAP;AAAA,YACR,oBAAkB;AAAA,YAClB,YAAY;AAAA,cACV,aAAa;AAAA,YAAA;AAAA,YAGf,UAAA,gBAAAmB,EAACK,GAAA,EAAmB,WAAU,sBAAA,CAAsB;AAAA,UAAA;AAAA,QAAA,EACtD,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AA5DSxB,EAAAO,GAAA;"}

package/dist/layout/components/navbar/style/NavbarStyleContent.js

@@ -0,0 +1,122 @@
+var f = Object.defineProperty;
+var s = (o, l) => f(o, "name", { value: l, configurable: !0 });
+import { jsxs as c, jsx as t } 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 { OwpHidden as m } from "../../../../components/OwpHidden/OwpHidden.js";
+import b from "../../logo/Logo.js";
+import g from "../../menus/UserMenu.js";
+import h from "../NavbarPinToggleButton.js";
+import u from "../NavbarToggleButton.js";
+import v from "../../navigation/Navigation.js";
+import { selectOwpCurrentLayoutConfig as x } from "../../../../store/owpSettingsSlice.js";
+import { selectOwpNavbar as N } from "../../../../store/navbarSlice.js";
+import { useAppSelector as p } from "../../../../hooks/useAppStore.js";
+import { styled as d } from "@mui/material/styles";
+import { clsx as a } from "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { memo as S, useMemo as w } from "react";
+import { OwpScrollbars as y } from "../../../../components/OwpScrollbars/OwpScrollbars.js";
+const C = d("div")(({ theme: o }) => ({
+  backgroundColor: o.palette.background.default,
+  color: o.palette.text.primary,
+  "& ::-webkit-scrollbar-thumb": {
+    boxShadow: "inset 0 0 0 20px rgba(255, 255, 255, 0.24)",
+    ...o.applyStyles("light", {
+      boxShadow: "inset 0 0 0 20px rgba(0, 0, 0, 0.24)"
+    })
+  },
+  "& ::-webkit-scrollbar-thumb:active": {
+    boxShadow: "inset 0 0 0 20px rgba(255, 255, 255, 0.37)",
+    ...o.applyStyles("light", {
+      boxShadow: "inset 0 0 0 20px rgba(0, 0, 0, 0.37)"
+    })
+  },
+  "& .NavbarStyleContent-logo": {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      right: 0,
+      bottom: -1,
+      left: 0,
+      borderBottom: `1px solid ${o.palette.divider}`
+    }
+  },
+  "& .NavbarStyleContent-logoMark": {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    maxWidth: "25.6rem",
+    height: "4.4rem",
+    minWidth: 0,
+    [o.breakpoints.up("md")]: {
+      maxWidth: "27.2rem",
+      height: "4.8rem"
+    }
+  },
+  "& .NavbarStyleContent-logoMark .logo-icon": {
+    display: "block",
+    maxWidth: "100%",
+    maxHeight: "100%",
+    objectFit: "contain"
+  },
+  "& .NavbarStyleContent-userMenu": {
+    borderTop: `1px solid ${o.palette.divider}`
+  },
+  "& .NavbarStyleContent-navigation": {
+    paddingTop: 8,
+    paddingBottom: 8
+  }
+})), k = d(y)(() => ({
+  overscrollBehavior: "contain",
+  overflowX: "hidden",
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "100% 40px, 100% 10px",
+  backgroundAttachment: "local, scroll"
+}));
+function M(o) {
+  const { className: l = "" } = o, e = p(x), r = p(N), n = w(() => {
+    var i;
+    return ((i = e == null ? void 0 : e.navbar) == null ? void 0 : i.folded) || (r == null ? void 0 : r.foldedOpen);
+  }, [e, r]);
+  return /* @__PURE__ */ c(C, { className: a("flex h-full flex-auto flex-col overflow-hidden", l), children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: a(
+          "NavbarStyleContent-logo flex h-48 shrink-0 flex-row items-center px-12 md:h-64",
+          !n && "justify-center"
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: a(
+                "mr-4 ml-16 flex flex-1 items-center",
+                !n && "hidden"
+              ),
+              children: /* @__PURE__ */ t("div", { className: "NavbarStyleContent-logoMark", children: /* @__PURE__ */ t(b, {}) })
+            }
+          ),
+          /* @__PURE__ */ t(m, { lgDown: !0, children: /* @__PURE__ */ t(h, { surfaceTone: "light", className: "h-32 w-32 p-0" }) }),
+          /* @__PURE__ */ t(m, { lgUp: !0, children: /* @__PURE__ */ t(u, { surfaceTone: "light", className: "h-32 w-32 p-0" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      k,
+      {
+        className: "flex min-h-0 flex-1 flex-col",
+        option: { suppressScrollX: !0, wheelPropagation: !1 },
+        children: /* @__PURE__ */ t(v, { className: "NavbarStyleContent-navigation", layout: "vertical" })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "NavbarStyleContent-userMenu w-full p-4 md:p-10", children: /* @__PURE__ */ t(g, { className: "w-full" }) })
+  ] });
+}
+s(M, "NavbarStyleContent");
+const D = S(M);
+export {
+  D as default
+};
+//# sourceMappingURL=NavbarStyleContent.js.map

package/dist/layout/components/navbar/style/NavbarStyleContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarStyleContent.js","sources":["../../../../../src/layout/components/navbar/style/NavbarStyleContent.tsx"],"sourcesContent":["import { OwpHidden } from '@/components/OwpHidden';\nimport Logo from '@/layout/components/logo/Logo';\nimport UserMenu from '@/layout/components/menus/UserMenu';\nimport NavbarPinToggleButton from '@/layout/components/navbar/NavbarPinToggleButton';\nimport NavbarToggleButton from '@/layout/components/navbar/NavbarToggleButton';\nimport Navigation from '@/layout/components/navigation/Navigation';\nimport { OwpScrollbars as Scrollbars } from '@/components/OwpScrollbars';\nimport { selectOwpCurrentLayoutConfig as selectCurrentLayoutConfig } from '@/store/owpSettingsSlice';\nimport { selectOwpNavbar as selectNavbar } from '@/store/navbarSlice';\nimport { useAppSelector } from '@/hooks/useAppStore';\nimport { styled } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { memo, useMemo } from 'react';\nimport { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\n\nconst Root = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.background.default,\n  color: theme.palette.text.primary,\n  '& ::-webkit-scrollbar-thumb': {\n    boxShadow: `inset 0 0 0 20px ${'rgba(255, 255, 255, 0.24)'}`,\n    ...theme.applyStyles('light', {\n      boxShadow: `inset 0 0 0 20px ${'rgba(0, 0, 0, 0.24)'}`,\n    }),\n  },\n  '& ::-webkit-scrollbar-thumb:active': {\n    boxShadow: `inset 0 0 0 20px ${'rgba(255, 255, 255, 0.37)'}`,\n    ...theme.applyStyles('light', {\n      boxShadow: `inset 0 0 0 20px ${'rgba(0, 0, 0, 0.37)'}`,\n    }),\n  },\n  '& .NavbarStyleContent-logo': {\n    position: 'relative',\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      right: 0,\n      bottom: -1,\n      left: 0,\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    },\n  },\n  '& .NavbarStyleContent-logoMark': {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    maxWidth: '25.6rem',\n    height: '4.4rem',\n    minWidth: 0,\n    [theme.breakpoints.up('md')]: {\n      maxWidth: '27.2rem',\n      height: '4.8rem',\n    },\n  },\n  '& .NavbarStyleContent-logoMark .logo-icon': {\n    display: 'block',\n    maxWidth: '100%',\n    maxHeight: '100%',\n    objectFit: 'contain',\n  },\n  '& .NavbarStyleContent-userMenu': {\n    borderTop: `1px solid ${theme.palette.divider}`,\n  },\n  '& .NavbarStyleContent-navigation': {\n    paddingTop: 8,\n    paddingBottom: 8,\n  },\n}));\n\nconst StyledContent = styled(Scrollbars)(() => ({\n  overscrollBehavior: 'contain',\n  overflowX: 'hidden',\n  overflowY: 'auto',\n  WebkitOverflowScrolling: 'touch',\n  backgroundRepeat: 'no-repeat',\n  backgroundSize: '100% 40px, 100% 10px',\n  backgroundAttachment: 'local, scroll',\n}));\n\ntype NavbarStyleContentProps = {\n  className?: string;\n};\n\n/**\n * The navbar style content.\n */\nfunction NavbarStyleContent(props: NavbarStyleContentProps) {\n  const { className = '' } = props;\n\n  const config = useAppSelector(selectCurrentLayoutConfig) as LayoutConfigDefaultsType;\n  const navbar = useAppSelector(selectNavbar);\n\n  const showLogo = useMemo(() => config?.navbar?.folded || navbar?.foldedOpen, [config, navbar]);\n\n  return (\n    <Root className={clsx('flex h-full flex-auto flex-col overflow-hidden', className)}>\n      <div\n        className={clsx(\n          'NavbarStyleContent-logo flex h-48 shrink-0 flex-row items-center px-12 md:h-64',\n          !showLogo && 'justify-center',\n        )}\n      >\n        <div\n          className={clsx(\n            'mr-4 ml-16 flex flex-1 items-center',\n            !showLogo && 'hidden',\n          )}\n        >\n          <div className=\"NavbarStyleContent-logoMark\">\n            <Logo />\n          </div>\n        </div>\n        <OwpHidden lgDown>\n          <NavbarPinToggleButton surfaceTone=\"light\" className=\"h-32 w-32 p-0\" />\n        </OwpHidden>\n        <OwpHidden lgUp>\n          <NavbarToggleButton surfaceTone=\"light\" className=\"h-32 w-32 p-0\" />\n        </OwpHidden>\n      </div>\n\n      <StyledContent\n        className=\"flex min-h-0 flex-1 flex-col\"\n        option={{ suppressScrollX: true, wheelPropagation: false }}\n      >\n        <Navigation className=\"NavbarStyleContent-navigation\" layout=\"vertical\" />\n      </StyledContent>\n\n      <div className=\"NavbarStyleContent-userMenu w-full p-4 md:p-10\">\n        <UserMenu className=\"w-full\" />\n      </div>\n    </Root>\n  );\n}\n\nexport default memo(NavbarStyleContent);\n"],"names":["Root","styled","theme","StyledContent","Scrollbars","NavbarStyleContent","props","className","config","useAppSelector","selectCurrentLayoutConfig","navbar","selectNavbar","showLogo","useMemo","_a","clsx","jsxs","jsx","Logo","OwpHidden","NavbarPinToggleButton","NavbarToggleButton","Navigation","UserMenu","__name","NavbarStyleContent$1","memo"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+var i = Object.defineProperty;
+var a = (e, t) => i(e, "name", { value: t, configurable: !0 });
+import { 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 { styled as s } from "@mui/material/styles";
+import { clsx as l } from "../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { memo as d } from "react";
+const c = s("div")(({ theme: e }) => ({
+  padding: "0 7px",
+  fontSize: 11,
+  fontWeight: 600,
+  height: 20,
+  minWidth: 20,
+  borderRadius: 20,
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: e.palette.secondary.main,
+  color: e.palette.secondary.contrastText
+}));
+function m(e) {
+  const { className: t = "", classes: r = "", badge: o } = e;
+  return o.title ? /* @__PURE__ */ n(
+    c,
+    {
+      className: l("item-badge", t, r),
+      style: {
+        backgroundColor: o.bg,
+        color: o.fg
+      },
+      children: o.title
+    }
+  ) : null;
+}
+a(m, "NavBadge");
+const x = d(m);
+export {
+  x as NavBadge
+};
+//# sourceMappingURL=NavBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavBadge.js","sources":["../../../../src/layout/components/navigation/NavBadge.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { memo } from 'react';\nimport type { OwpNavBadgeType as NavBadgeType } from '@/types/OwpNavigationTypes';\n\nconst Root = styled('div')(({ theme }) => ({\n  padding: '0 7px',\n  fontSize: 11,\n  fontWeight: 600,\n  height: 20,\n  minWidth: 20,\n  borderRadius: 20,\n  display: 'flex',\n  alignItems: 'center',\n  backgroundColor: theme.palette.secondary.main,\n  color: theme.palette.secondary.contrastText,\n}));\n\ntype NavBadgeProps = {\n  className?: string;\n  classes?: string;\n  badge: NavBadgeType;\n};\n\n/**\n * NavBadge component.\n * This component renders a badge on a nav element. It accepts a `NavBadgeType` prop,\n * which is an object containing a title and background and foreground colour.\n */\nfunction NavBadge(props: NavBadgeProps) {\n  const { className = '', classes = '', badge } = props;\n\n  if (!badge.title) {\n    return null;\n  }\n\n  return (\n    <Root\n      className={clsx('item-badge', className, classes)}\n      style={{\n        backgroundColor: badge.bg,\n        color: badge.fg,\n      }}\n    >\n      {badge.title}\n    </Root>\n  );\n}\n\n/**\n * Memoized nav badge component.\n */\nconst MemoizedNavBadge = memo(NavBadge);\nexport { MemoizedNavBadge as NavBadge };\n"],"names":["Root","styled","theme","NavBadge","props","className","classes","badge","jsx","clsx","__name","MemoizedNavBadge","memo"],"mappings":";;;;;;AAKA,MAAMA,IAAOC,EAAO,KAAK,EAAE,CAAC,EAAE,OAAAC,SAAa;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,iBAAiBA,EAAM,QAAQ,UAAU;AAAA,EACzC,OAAOA,EAAM,QAAQ,UAAU;AACjC,EAAE;AAaF,SAASC,EAASC,GAAsB;AACtC,QAAM,EAAE,WAAAC,IAAY,IAAI,SAAAC,IAAU,IAAI,OAAAC,MAAUH;AAEhD,SAAKG,EAAM,QAKT,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,WAAWS,EAAK,cAAcJ,GAAWC,CAAO;AAAA,MAChD,OAAO;AAAA,QACL,iBAAiBC,EAAM;AAAA,QACvB,OAAOA,EAAM;AAAA,MAAA;AAAA,MAGd,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA,IAXF;AAcX;AAlBSG,EAAAP,GAAA;AAuBT,MAAMQ,IAAmBC,EAAKT,CAAQ;"}

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

@@ -0,0 +1,31 @@
+var a = Object.defineProperty;
+var i = (r, t) => a(r, "name", { value: t, configurable: !0 });
+import { jsx as e } 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 c from "@mui/material/Divider";
+import { NavVerticalCollapse as l } from "./vertical/types/NavVerticalCollapse.js";
+import { NavVerticalGroup as m } from "./vertical/types/NavVerticalGroup.js";
+import { NavVerticalItem as o } from "./vertical/types/NavVerticalItem.js";
+import { NavVerticalLink as v } from "./vertical/types/NavVerticalLink.js";
+function V(r) {
+  const { type: t } = r;
+  switch (t) {
+    case "vertical-group":
+      return /* @__PURE__ */ e(m, { ...r });
+    case "vertical-collapse":
+      return /* @__PURE__ */ e(l, { ...r });
+    case "vertical-item":
+      return /* @__PURE__ */ e(o, { ...r });
+    case "vertical-link":
+      return /* @__PURE__ */ e(v, { ...r });
+    case "divider":
+    case "vertical-divider":
+      return /* @__PURE__ */ e(c, { className: "my-16" });
+    default:
+      return null;
+  }
+}
+i(V, "NavItem");
+export {
+  V as NavItem
+};
+//# sourceMappingURL=NavItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.js","sources":["../../../../src/layout/components/navigation/NavItem.tsx"],"sourcesContent":["import Divider from '@mui/material/Divider';\nimport type { OwpNavItemType as NavItemType } from '@/types/OwpNavigationTypes';\nimport { NavVerticalCollapse } from './vertical/types/NavVerticalCollapse';\nimport { NavVerticalGroup } from './vertical/types/NavVerticalGroup';\nimport { NavVerticalItem } from './vertical/types/NavVerticalItem';\nimport { NavVerticalLink } from './vertical/types/NavVerticalLink';\n\nexport type NavItemComponentProps = {\n  type: string;\n  item: NavItemType;\n  dense?: boolean;\n  nestedLevel?: number;\n  onItemClick?: (item: NavItemType) => void;\n  checkPermission?: boolean;\n  openedCollapseIds?: ReadonlySet<string>;\n};\n\n/**\n * Component to render a nav item by type.\n*/\nfunction NavItem(props: NavItemComponentProps) {\n  const { type } = props;\n\n  switch (type) {\n    case 'vertical-group':\n      return <NavVerticalGroup {...props} />;\n    case 'vertical-collapse':\n      return <NavVerticalCollapse {...props} />;\n    case 'vertical-item':\n      return <NavVerticalItem {...props} />;\n    case 'vertical-link':\n      return <NavVerticalLink {...props} />;\n    case 'divider':\n    case 'vertical-divider':\n      return <Divider className=\"my-16\" />;\n    default:\n      return null;\n  }\n}\n\nexport { NavItem };\n"],"names":["NavItem","props","type","jsx","NavVerticalGroup","NavVerticalCollapse","NavVerticalItem","NavVerticalLink","Divider","__name"],"mappings":";;;;;;;;AAoBA,SAASA,EAAQC,GAA8B;AAC7C,QAAM,EAAE,MAAAC,MAASD;AAEjB,UAAQC,GAAA;AAAA,IACN,KAAK;AACH,aAAO,gBAAAC,EAACC,GAAA,EAAkB,GAAGH,EAAA,CAAO;AAAA,IACtC,KAAK;AACH,aAAO,gBAAAE,EAACE,GAAA,EAAqB,GAAGJ,EAAA,CAAO;AAAA,IACzC,KAAK;AACH,aAAO,gBAAAE,EAACG,GAAA,EAAiB,GAAGL,EAAA,CAAO;AAAA,IACrC,KAAK;AACH,aAAO,gBAAAE,EAACI,GAAA,EAAiB,GAAGN,EAAA,CAAO;AAAA,IACrC,KAAK;AAAA,IACL,KAAK;AACH,aAAO,gBAAAE,EAACK,GAAA,EAAQ,WAAU,QAAA,CAAQ;AAAA,IACpC;AACE,aAAO;AAAA,EAAA;AAEb;AAlBSC,EAAAT,GAAA;"}

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

@@ -0,0 +1,35 @@
+var p = Object.defineProperty;
+var e = (i, o) => p(i, "name", { value: o, configurable: !0 });
+import { jsx as f } 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 { useGetNavigationList as u } from "../../../hooks/useNavigation.js";
+import { useThemeMediaQuery as v } from "../../../hooks/useThemeMediaQuery.js";
+import { useAppDispatch as g } from "../../../hooks/useAppStore.js";
+import { navigationSlice as d } from "../../../store/navigationSlice.js";
+import { navbarCloseMobile as h } from "../../../store/navbarSlice.js";
+import { withSlices as N } from "../../../store/withSlices.js";
+import { clsx as M } from "../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { useCallback as b } from "react";
+import { NavigationMenu as k } from "./NavigationMenu.js";
+function x(i) {
+  const { className: o = "", layout: s = "vertical", dense: n, active: r } = i, m = u(), t = v((l) => l.breakpoints.down("lg")), a = g(), c = b(() => {
+    t && a(h());
+  }, [a, t]);
+  return /* @__PURE__ */ f(
+    k,
+    {
+      className: M("navigation flex-1", o),
+      navigation: m,
+      layout: s,
+      dense: n,
+      active: r,
+      onItemClick: c,
+      checkPermission: !1
+    }
+  );
+}
+e(x, "Navigation");
+const P = N([d])(x);
+export {
+  P as default
+};
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../src/layout/components/navigation/Navigation.tsx"],"sourcesContent":["import { useGetNavigationList } from '@/hooks/useNavigation';\nimport { useThemeMediaQuery } from '@/hooks/useThemeMediaQuery';\nimport { useAppDispatch } from '@/hooks/useAppStore';\nimport { navigationSlice } from '@/store/navigationSlice';\nimport { navbarCloseMobile } from '@/store/navbarSlice';\nimport { withSlices } from '@/store/withSlices';\nimport clsx from 'clsx';\nimport { useCallback } from 'react';\nimport { NavigationMenu, type NavigationMenuProps } from './NavigationMenu';\n\n/**\n * Navigation\n */\n\ntype NavigationProps = Partial<NavigationMenuProps>;\n\nfunction Navigation(props: NavigationProps) {\n  const { className = '', layout = 'vertical', dense, active } = props;\n\n  const navigation = useGetNavigationList();\n\n  const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));\n\n  const dispatch = useAppDispatch();\n\n  const handleItemClick = useCallback(() => {\n    if (isMobile) {\n      dispatch(navbarCloseMobile());\n    }\n  }, [dispatch, isMobile]);\n\n  return (\n    <NavigationMenu\n      className={clsx('navigation flex-1', className)}\n      navigation={navigation}\n      layout={layout}\n      dense={dense}\n      active={active}\n      onItemClick={handleItemClick}\n      checkPermission={false}\n    />\n  );\n}\n\nconst NavigationWIthSlices = withSlices<NavigationProps>([navigationSlice])(Navigation);\n\nexport default NavigationWIthSlices;\n"],"names":["Navigation","props","className","layout","dense","active","navigation","useGetNavigationList","isMobile","useThemeMediaQuery","theme","dispatch","useAppDispatch","handleItemClick","useCallback","navbarCloseMobile","jsx","NavigationMenu","clsx","__name","NavigationWIthSlices","withSlices","navigationSlice"],"mappings":";;;;;;;;;;;;AAgBA,SAASA,EAAWC,GAAwB;AAC1C,QAAM,EAAE,WAAAC,IAAY,IAAI,QAAAC,IAAS,YAAY,OAAAC,GAAO,QAAAC,MAAWJ,GAEzDK,IAAaC,EAAA,GAEbC,IAAWC,EAAmB,CAACC,MAAUA,EAAM,YAAY,KAAK,IAAI,CAAC,GAErEC,IAAWC,EAAA,GAEXC,IAAkBC,EAAY,MAAM;AACxC,IAAIN,KACFG,EAASI,GAAmB;AAAA,EAEhC,GAAG,CAACJ,GAAUH,CAAQ,CAAC;AAEvB,SACE,gBAAAQ;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAK,qBAAqBhB,CAAS;AAAA,MAC9C,YAAAI;AAAA,MACA,QAAAH;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,aAAaQ;AAAA,MACb,iBAAiB;AAAA,IAAA;AAAA,EAAA;AAGvB;AA1BSM,EAAAnB,GAAA;AA4BT,MAAMoB,IAAuBC,EAA4B,CAACC,CAAe,CAAC,EAAEtB,CAAU;"}