@owp/core 2.5.26 → 2.5.28

package/dist/layout/components/logo/Logo.js

@@ -1,21 +1,15 @@
-var A = Object.defineProperty;
-var m = (t, r) => A(t, "name", { value: r, configurable: !0 });
-import { jsx as e, jsxs as O } 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 { useOwpAppContext as k } from "../../../contexts/OwpAppProvider.js";
-import { useGetLogoSrc as z } from "../../../hooks/useLogoSrc.js";
+var I = Object.defineProperty;
+var d = (s, l) => I(s, "name", { value: l, configurable: !0 });
+import { jsx as e, jsxs as k } 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 { useOwpAppContext as z } from "../../../contexts/OwpAppProvider.js";
+import { useGetLogoSrc as O } from "../../../hooks/useLogoSrc.js";
 import { Skeleton as q } from "@mui/material";
 import { styled as B } from "@mui/material/styles";
-import { useRef as I, useState as w, useLayoutEffect as F } from "react";
-const M = B("div")(({ theme: t }) => ({
+import { useRef as L, useState as w, useLayoutEffect as F } from "react";
+const M = B("div")(({ theme: s }) => ({
   height: "100%",
   minWidth: 0,
   maxWidth: "100%",
-  "& > .logo-icon": {
-    transition: t.transitions.create(["width", "height"], {
-      duration: t.transitions.duration.shortest,
-      easing: t.transitions.easing.easeInOut
-    })
-  },
   "& > .logo-slot": {
     position: "relative",
     display: "flex",
@@ -71,72 +65,65 @@ const M = B("div")(({ theme: t }) => ({
     height: 70,
     maxHeight: "100%",
     transform: "translate(-50%, -50%)",
-    borderRadius: t.shape.borderRadius
-  },
-  "& > .badge": {
-    transition: t.transitions.create("opacity", {
-      duration: t.transitions.duration.shortest,
-      easing: t.transitions.easing.easeInOut
-    })
+    borderRadius: s.shape.borderRadius
   }
 }));
-function Q() {
-  const t = z(), { slots: r, slotProps: h } = k(), i = r == null ? void 0 : r.logo, a = h == null ? void 0 : h.logo, b = ["owp-logo-slot-content", a == null ? void 0 : a.className].filter(Boolean).join(" "), N = I(null), R = I(null), [L, g] = w(1), [H, f] = w({}), [l, c] = w(!i);
+function T() {
+  const s = O(), { slots: l, slotProps: h } = z(), n = l == null ? void 0 : l.logo, r = h == null ? void 0 : h.logo, b = ["owp-logo-slot-content", r == null ? void 0 : r.className].filter(Boolean).join(" "), N = L(null), R = L(null), [j, f] = w(1), [H, g] = w({}), [a, c] = w(!n);
   return F(() => {
-    if (!i) {
-      g(1), f({}), c(!0);
+    if (!n) {
+      f(1), g({}), c(!0);
       return;
     }
-    const d = N.current, o = R.current, u = d == null ? void 0 : d.parentElement;
-    if (!d || !o || !u)
+    const m = N.current, t = R.current, u = m == null ? void 0 : m.parentElement;
+    if (!m || !t || !u)
       return;
     let p = 0;
     c(!1);
-    const j = /* @__PURE__ */ m(() => {
-      const { width: n, height: E } = u.getBoundingClientRect(), C = o.getBoundingClientRect(), x = C.width || o.scrollWidth || o.offsetWidth, y = C.height || o.scrollHeight || o.offsetHeight;
-      if (!n || !E || !x || !y) {
-        g(1), f({}), c(!1);
+    const A = /* @__PURE__ */ d(() => {
+      const { width: o, height: E } = u.getBoundingClientRect(), C = t.getBoundingClientRect(), x = C.width || t.scrollWidth || t.offsetWidth, y = C.height || t.scrollHeight || t.offsetHeight;
+      if (!o || !E || !x || !y) {
+        f(1), g({}), c(!1);
         return;
       }
-      const S = Math.min(n / x, E / y, 1);
-      g(S), f({
+      const S = Math.min(o / x, E / y, 1);
+      f(S), g({
         width: x * S,
         height: y * S
       }), c(!0);
-    }, "updateScale"), s = /* @__PURE__ */ m(() => {
-      cancelAnimationFrame(p), p = requestAnimationFrame(j);
+    }, "updateScale"), i = /* @__PURE__ */ d(() => {
+      cancelAnimationFrame(p), p = requestAnimationFrame(A);
     }, "requestUpdate");
-    s();
-    const v = new ResizeObserver(s);
-    v.observe(u), v.observe(o);
-    const W = Array.from(o.querySelectorAll("img"));
-    return W.forEach((n) => {
-      n.addEventListener("load", s), n.addEventListener("error", s);
+    i();
+    const v = new ResizeObserver(i);
+    v.observe(u), v.observe(t);
+    const W = Array.from(t.querySelectorAll("img"));
+    return W.forEach((o) => {
+      o.addEventListener("load", i), o.addEventListener("error", i);
     }), () => {
-      cancelAnimationFrame(p), v.disconnect(), W.forEach((n) => {
-        n.removeEventListener("load", s), n.removeEventListener("error", s);
+      cancelAnimationFrame(p), v.disconnect(), W.forEach((o) => {
+        o.removeEventListener("load", i), o.removeEventListener("error", i);
       });
     };
-  }, [i]), /* @__PURE__ */ e(M, { ref: N, className: "flex items-center space-x-8", children: i ? /* @__PURE__ */ O("div", { className: "logo-icon logo-slot", children: [
-    !l && /* @__PURE__ */ e(q, { animation: "wave", variant: "rounded", className: "logo-slot-skeleton" }),
+  }, [n]), /* @__PURE__ */ e(M, { ref: N, className: "flex items-center space-x-8", children: n ? /* @__PURE__ */ k("div", { className: "logo-icon logo-slot", children: [
+    !a && /* @__PURE__ */ e(q, { animation: "wave", variant: "rounded", className: "logo-slot-skeleton" }),
     /* @__PURE__ */ e(
       "div",
       {
         className: "logo-slot-frame",
         style: {
-          transform: "translateX(-8px)",
-          width: l ? H.width : 0,
-          height: l ? H.height : 0,
-          visibility: l ? "visible" : "hidden"
+          width: a ? H.width : 0,
+          height: a ? H.height : 0,
+          visibility: a ? "visible" : "hidden"
         },
-        children: /* @__PURE__ */ e("div", { className: "logo-slot-transform", style: { transform: `scale(${L})` }, children: /* @__PURE__ */ e("div", { className: "logo-slot-content", children: /* @__PURE__ */ e(i, { ...a, className: b }) }) })
+        children: /* @__PURE__ */ e("div", { className: "logo-slot-transform", style: { transform: `scale(${j})` }, children: /* @__PURE__ */ e("div", { className: "logo-slot-content", children: /* @__PURE__ */ e(n, { ...r, className: b }) }) })
       }
     ),
-    /* @__PURE__ */ e("div", { ref: R, className: "logo-slot-measure", "aria-hidden": !0, children: /* @__PURE__ */ e(i, { ...a, className: b }) })
-  ] }) : /* @__PURE__ */ e("img", { className: "logo-icon", src: t, alt: "logo" }) });
+    /* @__PURE__ */ e("div", { ref: R, className: "logo-slot-measure", "aria-hidden": !0, children: /* @__PURE__ */ e(n, { ...r, className: b }) })
+  ] }) : /* @__PURE__ */ e("img", { className: "logo-icon", src: s, alt: "logo" }) });
 }
-m(Q, "Logo");
+d(T, "Logo");
 export {
-  Q as default
+  T as default
 };
 //# sourceMappingURL=Logo.js.map

package/dist/layout/components/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../../../src/layout/components/logo/Logo.tsx"],"sourcesContent":["import { useOwpAppContext as useAppContext } from '@/contexts/OwpAppProvider';\nimport { useGetLogoSrc } from '@/hooks/useLogoSrc';\nimport { Skeleton } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nconst Root = styled('div')(({ theme }) => ({\n  height: '100%',\n  minWidth: 0,\n  maxWidth: '100%',\n  '& > .logo-icon': {\n    transition: theme.transitions.create(['width', 'height'], {\n      duration: theme.transitions.duration.shortest,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n  },\n  '& > .logo-slot': {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: '100%',\n    height: '100%',\n    minWidth: 0,\n    minHeight: 0,\n    maxWidth: '100%',\n    maxHeight: '100%',\n    flexShrink: 1,\n    overflow: 'visible',\n  },\n  '& > .logo-slot > .logo-slot-frame': {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    minWidth: 0,\n    minHeight: 0,\n    maxWidth: '100%',\n    maxHeight: '100%',\n    flexShrink: 1,\n    overflow: 'hidden',\n  },\n  '& .logo-slot-transform': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    transformOrigin: 'left center',\n  },\n  '& .logo-slot-content, & .logo-slot-measure': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'fit-content',\n    height: 'fit-content',\n  },\n  '& .logo-slot-measure': {\n    position: 'absolute',\n    top: 0,\n    left: -99999,\n    visibility: 'hidden',\n    pointerEvents: 'none',\n    whiteSpace: 'nowrap',\n  },\n  '& .logo-slot-skeleton': {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 'min(100%, 160px)',\n    minHeight: 70,\n    height: 70,\n    maxHeight: '100%',\n    transform: 'translate(-50%, -50%)',\n    borderRadius: theme.shape.borderRadius,\n  },\n  '& > .badge': {\n    transition: theme.transitions.create('opacity', {\n      duration: theme.transitions.duration.shortest,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n  },\n}));\n\n/**\n * The logo component.\n */\nfunction Logo() {\n  const logoSrc = useGetLogoSrc();\n  const { slots, slotProps } = useAppContext();\n  const LogoSlot = slots?.logo;\n  const logoSlotProps = slotProps?.logo;\n  const logoSlotClassName = ['owp-logo-slot-content', logoSlotProps?.className]\n    .filter(Boolean)\n    .join(' ');\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const slotMeasureRef = useRef<HTMLDivElement | null>(null);\n  const [slotScale, setSlotScale] = useState(1);\n  const [slotSize, setSlotSize] = useState<{ width?: number; height?: number }>({});\n  const [isSlotReady, setIsSlotReady] = useState(!LogoSlot);\n\n  useLayoutEffect(() => {\n    if (!LogoSlot) {\n      setSlotScale(1);\n      setSlotSize({});\n      setIsSlotReady(true);\n      return;\n    }\n\n    const rootElement = rootRef.current;\n    const measureElement = slotMeasureRef.current;\n    const boundaryElement = rootElement?.parentElement;\n\n    if (!rootElement || !measureElement || !boundaryElement) {\n      return;\n    }\n\n    let frameId = 0;\n    setIsSlotReady(false);\n\n    const updateScale = () => {\n      const { width: boundaryWidth, height: boundaryHeight } =\n        boundaryElement.getBoundingClientRect();\n      const measureRect = measureElement.getBoundingClientRect();\n      const contentWidth =\n        measureRect.width || measureElement.scrollWidth || measureElement.offsetWidth;\n      const contentHeight =\n        measureRect.height || measureElement.scrollHeight || measureElement.offsetHeight;\n\n      if (!boundaryWidth || !boundaryHeight || !contentWidth || !contentHeight) {\n        setSlotScale(1);\n        setSlotSize({});\n        setIsSlotReady(false);\n        return;\n      }\n\n      const nextScale = Math.min(boundaryWidth / contentWidth, boundaryHeight / contentHeight, 1);\n\n      setSlotScale(nextScale);\n      setSlotSize({\n        width: contentWidth * nextScale,\n        height: contentHeight * nextScale,\n      });\n      setIsSlotReady(true);\n    };\n\n    const requestUpdate = () => {\n      cancelAnimationFrame(frameId);\n      frameId = requestAnimationFrame(updateScale);\n    };\n\n    requestUpdate();\n\n    const resizeObserver = new ResizeObserver(requestUpdate);\n    resizeObserver.observe(boundaryElement);\n    resizeObserver.observe(measureElement);\n\n    const imageElements = Array.from(measureElement.querySelectorAll('img'));\n    imageElements.forEach((imageElement) => {\n      imageElement.addEventListener('load', requestUpdate);\n      imageElement.addEventListener('error', requestUpdate);\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n      resizeObserver.disconnect();\n      imageElements.forEach((imageElement) => {\n        imageElement.removeEventListener('load', requestUpdate);\n        imageElement.removeEventListener('error', requestUpdate);\n      });\n    };\n  }, [LogoSlot]);\n\n  return (\n    <Root ref={rootRef} className=\"flex items-center space-x-8\">\n      {LogoSlot ? (\n        <div className=\"logo-icon logo-slot\">\n          {!isSlotReady && (\n            <Skeleton animation=\"wave\" variant=\"rounded\" className=\"logo-slot-skeleton\" />\n          )}\n          <div\n            className=\"logo-slot-frame\"\n            style={{\n              transform: 'translateX(-8px)',\n              width: isSlotReady ? slotSize.width : 0,\n              height: isSlotReady ? slotSize.height : 0,\n              visibility: isSlotReady ? 'visible' : 'hidden',\n            }}\n          >\n            <div className=\"logo-slot-transform\" style={{ transform: `scale(${slotScale})` }}>\n              <div className=\"logo-slot-content\">\n                <LogoSlot {...logoSlotProps} className={logoSlotClassName} />\n              </div>\n            </div>\n          </div>\n          <div ref={slotMeasureRef} className=\"logo-slot-measure\" aria-hidden>\n            <LogoSlot {...logoSlotProps} className={logoSlotClassName} />\n          </div>\n        </div>\n      ) : (\n        <img className=\"logo-icon\" src={logoSrc} alt=\"logo\" />\n      )}\n    </Root>\n  );\n}\n\nexport default Logo;\n"],"names":["Root","styled","theme","Logo","logoSrc","useGetLogoSrc","slots","slotProps","useAppContext","LogoSlot","logoSlotProps","logoSlotClassName","rootRef","useRef","slotMeasureRef","slotScale","setSlotScale","useState","slotSize","setSlotSize","isSlotReady","setIsSlotReady","useLayoutEffect","rootElement","measureElement","boundaryElement","frameId","updateScale","__name","boundaryWidth","boundaryHeight","measureRect","contentWidth","contentHeight","nextScale","requestUpdate","resizeObserver","imageElements","imageElement","jsx","jsxs","Skeleton"],"mappings":"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"}
+{"version":3,"file":"Logo.js","sources":["../../../../src/layout/components/logo/Logo.tsx"],"sourcesContent":["import { useOwpAppContext as useAppContext } from '@/contexts/OwpAppProvider';\nimport { useGetLogoSrc } from '@/hooks/useLogoSrc';\nimport { Skeleton } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nconst Root = styled('div')(({ theme }) => ({\n  height: '100%',\n  minWidth: 0,\n  maxWidth: '100%',\n  '& > .logo-slot': {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: '100%',\n    height: '100%',\n    minWidth: 0,\n    minHeight: 0,\n    maxWidth: '100%',\n    maxHeight: '100%',\n    flexShrink: 1,\n    overflow: 'visible',\n  },\n  '& > .logo-slot > .logo-slot-frame': {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    minWidth: 0,\n    minHeight: 0,\n    maxWidth: '100%',\n    maxHeight: '100%',\n    flexShrink: 1,\n    overflow: 'hidden',\n  },\n  '& .logo-slot-transform': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    transformOrigin: 'left center',\n  },\n  '& .logo-slot-content, & .logo-slot-measure': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'fit-content',\n    height: 'fit-content',\n  },\n  '& .logo-slot-measure': {\n    position: 'absolute',\n    top: 0,\n    left: -99999,\n    visibility: 'hidden',\n    pointerEvents: 'none',\n    whiteSpace: 'nowrap',\n  },\n  '& .logo-slot-skeleton': {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 'min(100%, 160px)',\n    minHeight: 70,\n    height: 70,\n    maxHeight: '100%',\n    transform: 'translate(-50%, -50%)',\n    borderRadius: theme.shape.borderRadius,\n  },\n}));\n\n/**\n * The logo component.\n */\nfunction Logo() {\n  const logoSrc = useGetLogoSrc();\n  const { slots, slotProps } = useAppContext();\n  const LogoSlot = slots?.logo;\n  const logoSlotProps = slotProps?.logo;\n  const logoSlotClassName = ['owp-logo-slot-content', logoSlotProps?.className]\n    .filter(Boolean)\n    .join(' ');\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const slotMeasureRef = useRef<HTMLDivElement | null>(null);\n  const [slotScale, setSlotScale] = useState(1);\n  const [slotSize, setSlotSize] = useState<{ width?: number; height?: number }>({});\n  const [isSlotReady, setIsSlotReady] = useState(!LogoSlot);\n\n  useLayoutEffect(() => {\n    if (!LogoSlot) {\n      setSlotScale(1);\n      setSlotSize({});\n      setIsSlotReady(true);\n      return;\n    }\n\n    const rootElement = rootRef.current;\n    const measureElement = slotMeasureRef.current;\n    const boundaryElement = rootElement?.parentElement;\n\n    if (!rootElement || !measureElement || !boundaryElement) {\n      return;\n    }\n\n    let frameId = 0;\n    setIsSlotReady(false);\n\n    const updateScale = () => {\n      const { width: boundaryWidth, height: boundaryHeight } =\n        boundaryElement.getBoundingClientRect();\n      const measureRect = measureElement.getBoundingClientRect();\n      const contentWidth =\n        measureRect.width || measureElement.scrollWidth || measureElement.offsetWidth;\n      const contentHeight =\n        measureRect.height || measureElement.scrollHeight || measureElement.offsetHeight;\n\n      if (!boundaryWidth || !boundaryHeight || !contentWidth || !contentHeight) {\n        setSlotScale(1);\n        setSlotSize({});\n        setIsSlotReady(false);\n        return;\n      }\n\n      const nextScale = Math.min(boundaryWidth / contentWidth, boundaryHeight / contentHeight, 1);\n\n      setSlotScale(nextScale);\n      setSlotSize({\n        width: contentWidth * nextScale,\n        height: contentHeight * nextScale,\n      });\n      setIsSlotReady(true);\n    };\n\n    const requestUpdate = () => {\n      cancelAnimationFrame(frameId);\n      frameId = requestAnimationFrame(updateScale);\n    };\n\n    requestUpdate();\n\n    const resizeObserver = new ResizeObserver(requestUpdate);\n    resizeObserver.observe(boundaryElement);\n    resizeObserver.observe(measureElement);\n\n    const imageElements = Array.from(measureElement.querySelectorAll('img'));\n    imageElements.forEach((imageElement) => {\n      imageElement.addEventListener('load', requestUpdate);\n      imageElement.addEventListener('error', requestUpdate);\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n      resizeObserver.disconnect();\n      imageElements.forEach((imageElement) => {\n        imageElement.removeEventListener('load', requestUpdate);\n        imageElement.removeEventListener('error', requestUpdate);\n      });\n    };\n  }, [LogoSlot]);\n\n  return (\n    <Root ref={rootRef} className=\"flex items-center space-x-8\">\n      {LogoSlot ? (\n        <div className=\"logo-icon logo-slot\">\n          {!isSlotReady && (\n            <Skeleton animation=\"wave\" variant=\"rounded\" className=\"logo-slot-skeleton\" />\n          )}\n          <div\n            className=\"logo-slot-frame\"\n            style={{\n              width: isSlotReady ? slotSize.width : 0,\n              height: isSlotReady ? slotSize.height : 0,\n              visibility: isSlotReady ? 'visible' : 'hidden',\n            }}\n          >\n            <div className=\"logo-slot-transform\" style={{ transform: `scale(${slotScale})` }}>\n              <div className=\"logo-slot-content\">\n                <LogoSlot {...logoSlotProps} className={logoSlotClassName} />\n              </div>\n            </div>\n          </div>\n          <div ref={slotMeasureRef} className=\"logo-slot-measure\" aria-hidden>\n            <LogoSlot {...logoSlotProps} className={logoSlotClassName} />\n          </div>\n        </div>\n      ) : (\n        <img className=\"logo-icon\" src={logoSrc} alt=\"logo\" />\n      )}\n    </Root>\n  );\n}\n\nexport default Logo;\n"],"names":["Root","styled","theme","Logo","logoSrc","useGetLogoSrc","slots","slotProps","useAppContext","LogoSlot","logoSlotProps","logoSlotClassName","rootRef","useRef","slotMeasureRef","slotScale","setSlotScale","useState","slotSize","setSlotSize","isSlotReady","setIsSlotReady","useLayoutEffect","rootElement","measureElement","boundaryElement","frameId","updateScale","__name","boundaryWidth","boundaryHeight","measureRect","contentWidth","contentHeight","nextScale","requestUpdate","resizeObserver","imageElements","imageElement","jsx","jsxs","Skeleton"],"mappings":"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"}

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

@@ -1,24 +1,24 @@
 var w = Object.defineProperty;
-var o = (t, i) => w(t, "name", { value: i, configurable: !0 });
+var e = (t, i) => w(t, "name", { value: i, configurable: !0 });
 import { jsxs as y, 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 { useGetCurrentLayoutConfig as x } from "../../../../hooks/useOwpSettings.js";
-import { useGetNavbar as v, useNavbarActions as S } from "../../../../hooks/internal/useNavbar.js";
+import { useGetCurrentLayoutConfig as v } from "../../../../hooks/useOwpSettings.js";
+import { useGetNavbar as x, useNavbarActions as S } from "../../../../hooks/internal/useNavbar.js";
 import { OwpHidden as f } from "../../../../components/OwpHidden/OwpHidden.js";
 import { styled as s } from "@mui/material/styles";
 import N from "@mui/material/SwipeableDrawer";
 import { useEffect as W } from "react";
-import g from "./NavbarStyleContent.js";
-const e = 280, k = s("div")(({ theme: t }) => ({
+import m from "./NavbarStyleContent.js";
+const o = 280, k = s("div")(({ theme: t }) => ({
   display: "flex",
   flexDirection: "column",
   zIndex: 4,
   [t.breakpoints.up("lg")]: {
-    width: e,
-    minWidth: e
+    width: o,
+    minWidth: o
   },
   variants: [
     {
-      props: /* @__PURE__ */ o(({ folded: i }) => i, "props"),
+      props: /* @__PURE__ */ e(({ folded: i }) => i, "props"),
       style: {
         [t.breakpoints.up("lg")]: {
           width: 76,
@@ -28,9 +28,9 @@ const e = 280, k = s("div")(({ theme: t }) => ({
     }
   ]
 })), C = s("div")(({ theme: t }) => ({
-  minWidth: e,
-  width: e,
-  maxWidth: e,
+  minWidth: o,
+  width: o,
+  maxWidth: o,
   maxHeight: "100%",
   backgroundColor: t.palette.background.default,
   boxShadow: "none",
@@ -58,7 +58,7 @@ const e = 280, k = s("div")(({ theme: t }) => ({
       }
     },
     {
-      props: /* @__PURE__ */ o(({ folded: i }) => i, "props"),
+      props: /* @__PURE__ */ e(({ folded: i }) => i, "props"),
       style: {
         position: "absolute",
         width: 76,
@@ -68,14 +68,14 @@ const e = 280, k = s("div")(({ theme: t }) => ({
       }
     },
     {
-      props: /* @__PURE__ */ o(({ foldedandopened: i }) => i, "props"),
+      props: /* @__PURE__ */ e(({ foldedandopened: i }) => i, "props"),
       style: {
-        width: e,
-        minWidth: e
+        width: o,
+        minWidth: o
       }
     },
     {
-      props: /* @__PURE__ */ o(({ foldedandclosed: i }) => i, "props"),
+      props: /* @__PURE__ */ e(({ foldedandclosed: i }) => i, "props"),
       style: {
         "& .NavbarStyle-content": {
           "& .NavbarStyleContent-logo": {
@@ -86,16 +86,6 @@ const e = 280, k = s("div")(({ theme: t }) => ({
           "& .NavbarStyleContent-logo .MuiIconButton-root": {
             transform: "translateX(1px)"
           },
-          "& .logo-icon": {
-            width: 44,
-            height: 44
-          },
-          "& .logo-text": {
-            opacity: 0
-          },
-          "& .react-badge": {
-            opacity: 0
-          },
           "& .navigation.px-12": {
             paddingLeft: 10,
             paddingRight: 10
@@ -194,9 +184,9 @@ const e = 280, k = s("div")(({ theme: t }) => ({
   ]
 })), L = s(N)(({ theme: t }) => ({
   "& > .MuiDrawer-paper": {
-    minWidth: e,
-    width: e,
-    maxWidth: e,
+    minWidth: o,
+    width: o,
+    maxWidth: o,
     maxHeight: "100%",
     backgroundColor: t.palette.background.default,
     boxShadow: "none",
@@ -208,7 +198,7 @@ const e = 280, k = s("div")(({ theme: t }) => ({
 }));
 function G() {
   var p, h, c;
-  const t = x(), i = v(), { closeFolded: m, closeMobile: u, openFolded: b, reset: l } = S(), a = !((p = t.navbar) != null && p.folded), d = a && !i.foldedOpen, r = a && i.foldedOpen;
+  const t = v(), i = x(), { closeFolded: u, closeMobile: g, openFolded: b, reset: l } = S(), a = !((p = t.navbar) != null && p.folded), d = a && !i.foldedOpen, r = a && i.foldedOpen;
   return W(() => () => {
     l();
   }, [l]), /* @__PURE__ */ y(
@@ -227,9 +217,9 @@ function G() {
             folded: a ? 1 : 0,
             foldedandopened: r ? 1 : 0,
             foldedandclosed: d ? 1 : 0,
-            onMouseEnter: /* @__PURE__ */ o(() => d && b(), "onMouseEnter"),
-            onMouseLeave: /* @__PURE__ */ o(() => r && m(), "onMouseLeave"),
-            children: /* @__PURE__ */ n(g, { className: "NavbarStyle-content" })
+            onMouseEnter: /* @__PURE__ */ e(() => d && b(), "onMouseEnter"),
+            onMouseLeave: /* @__PURE__ */ e(() => r && u(), "onMouseLeave"),
+            children: /* @__PURE__ */ n(m, { className: "NavbarStyle-content" })
           }
         ) }),
         /* @__PURE__ */ n(f, { lgUp: !0, children: /* @__PURE__ */ n(
@@ -244,21 +234,21 @@ function G() {
             anchor: (c = t == null ? void 0 : t.navbar) == null ? void 0 : c.position,
             variant: "temporary",
             open: i.mobileOpen,
-            onClose: /* @__PURE__ */ o(() => u(), "onClose"),
-            onOpen: /* @__PURE__ */ o(() => {
+            onClose: /* @__PURE__ */ e(() => g(), "onClose"),
+            onOpen: /* @__PURE__ */ e(() => {
             }, "onOpen"),
             disableSwipeToOpen: !0,
             ModalProps: {
               keepMounted: !0
             },
-            children: /* @__PURE__ */ n(g, { className: "NavbarStyle-content" })
+            children: /* @__PURE__ */ n(m, { className: "NavbarStyle-content" })
           }
         ) })
       ]
     }
   );
 }
-o(G, "NavbarStyle");
+e(G, "NavbarStyle");
 export {
   G as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NavbarStyle.js","sources":["../../../../../src/layout/components/navbar/style/NavbarStyle.tsx"],"sourcesContent":["import { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\nimport { useGetCurrentLayoutConfig } from '@/hooks/useOwpSettings';\nimport { useGetNavbar, useNavbarActions } from '@/hooks/internal/useNavbar';\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  backgroundColor: theme.palette.background.default,\n  boxShadow: 'none',\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        borderLeft: `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          '& .NavbarStyleContent-logo': {\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n          },\n          '& .NavbarStyleContent-logo .MuiIconButton-root': {\n            transform: 'translateX(1px)',\n          },\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          '& .NavbarStyleContent-userMenu': {\n            display: 'flex',\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n          },\n          '& .user-menu': {\n            minWidth: 56,\n            width: 56,\n            boxSizing: 'border-box',\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n            '& > :not(style) ~ :not(style)': {\n              marginLeft: 0,\n              marginRight: 0,\n            },\n            '& > :not(.avatar)': {\n              width: 0,\n              minWidth: 0,\n              flex: '0 0 0',\n              padding: 0,\n              margin: 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    backgroundColor: theme.palette.background.default,\n    boxShadow: 'none',\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 config = useGetCurrentLayoutConfig() as LayoutConfigDefaultsType;\n  const navbar = useGetNavbar();\n  const { closeFolded, closeMobile, openFolded, reset } = useNavbarActions();\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      reset();\n    };\n  }, [reset]);\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\"\n          position={config?.navbar?.position}\n          folded={folded ? 1 : 0}\n          foldedandopened={foldedandopened ? 1 : 0}\n          foldedandclosed={foldedandclosed ? 1 : 0}\n          onMouseEnter={() => foldedandclosed && openFolded()}\n          onMouseLeave={() => foldedandopened && closeFolded()}\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={() => closeMobile()}\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","config","useGetCurrentLayoutConfig","navbar","useGetNavbar","closeFolded","closeMobile","openFolded","reset","useNavbarActions","_a","useEffect","jsxs","jsx","OwpHidden","_b","NavbarStyleContent","_c"],"mappings":"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"}
+{"version":3,"file":"NavbarStyle.js","sources":["../../../../../src/layout/components/navbar/style/NavbarStyle.tsx"],"sourcesContent":["import { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\nimport { useGetCurrentLayoutConfig } from '@/hooks/useOwpSettings';\nimport { useGetNavbar, useNavbarActions } from '@/hooks/internal/useNavbar';\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  backgroundColor: theme.palette.background.default,\n  boxShadow: 'none',\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        borderLeft: `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          '& .NavbarStyleContent-logo': {\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n          },\n          '& .NavbarStyleContent-logo .MuiIconButton-root': {\n            transform: 'translateX(1px)',\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          '& .NavbarStyleContent-userMenu': {\n            display: 'flex',\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n          },\n          '& .user-menu': {\n            minWidth: 56,\n            width: 56,\n            boxSizing: 'border-box',\n            justifyContent: 'center',\n            paddingLeft: 0,\n            paddingRight: 0,\n            '& > :not(style) ~ :not(style)': {\n              marginLeft: 0,\n              marginRight: 0,\n            },\n            '& > :not(.avatar)': {\n              width: 0,\n              minWidth: 0,\n              flex: '0 0 0',\n              padding: 0,\n              margin: 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    backgroundColor: theme.palette.background.default,\n    boxShadow: 'none',\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 config = useGetCurrentLayoutConfig() as LayoutConfigDefaultsType;\n  const navbar = useGetNavbar();\n  const { closeFolded, closeMobile, openFolded, reset } = useNavbarActions();\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      reset();\n    };\n  }, [reset]);\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\"\n          position={config?.navbar?.position}\n          folded={folded ? 1 : 0}\n          foldedandopened={foldedandopened ? 1 : 0}\n          foldedandclosed={foldedandclosed ? 1 : 0}\n          onMouseEnter={() => foldedandclosed && openFolded()}\n          onMouseLeave={() => foldedandopened && closeFolded()}\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={() => closeMobile()}\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","config","useGetCurrentLayoutConfig","navbar","useGetNavbar","closeFolded","closeMobile","openFolded","reset","useNavbarActions","_a","useEffect","jsxs","jsx","OwpHidden","_b","NavbarStyleContent","_c"],"mappings":"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"}

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

@@ -1,19 +1,19 @@
-var p = Object.defineProperty;
-var s = (o, a) => p(o, "name", { value: a, configurable: !0 });
-import { jsxs as d, 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 c } from "../../../../components/OwpHidden/OwpHidden.js";
+var m = Object.defineProperty;
+var r = (o, n) => m(o, "name", { value: n, configurable: !0 });
+import { jsxs as i, 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 s } from "../../../../components/OwpHidden/OwpHidden.js";
 import b from "../../logo/Logo.js";
-import f from "../../menus/UserMenu.js";
-import g from "../NavbarPinToggleButton.js";
-import u from "../NavbarToggleButton.js";
-import h from "../../navigation/Navigation.js";
-import { useGetCurrentLayoutConfig as v } from "../../../../hooks/useOwpSettings.js";
-import { useGetNavbar as x } from "../../../../hooks/internal/useNavbar.js";
-import { styled 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 { memo as N, useMemo as y } from "react";
-import { OwpScrollbars as S } from "../../../../components/OwpScrollbars/OwpScrollbars.js";
-const w = m("div")(({ theme: o }) => ({
+import g from "../../menus/UserMenu.js";
+import v from "../NavbarPinToggleButton.js";
+import f from "../NavbarToggleButton.js";
+import u from "../../navigation/Navigation.js";
+import { useGetCurrentLayoutConfig as h } from "../../../../hooks/useOwpSettings.js";
+import { useGetNavbar as N } from "../../../../hooks/internal/useNavbar.js";
+import { styled as c } from "@mui/material/styles";
+import { clsx as d } from "../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { memo as y, useMemo as S } from "react";
+import { OwpScrollbars as x } from "../../../../components/OwpScrollbars/OwpScrollbars.js";
+const C = c("div")(({ theme: o }) => ({
   backgroundColor: o.palette.background.default,
   color: o.palette.text.primary,
   "& ::-webkit-scrollbar-thumb": {
@@ -39,6 +39,40 @@ const w = m("div")(({ theme: o }) => ({
       borderBottom: `1px solid ${o.palette.divider}`
     }
   },
+  "& .NavbarStyleContent-logo--open": {
+    justifyContent: "flex-end"
+  },
+  "& .NavbarStyleContent-logo--closed": {
+    justifyContent: "center"
+  },
+  "& .NavbarStyleContent-logoPanel": {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: "2rem",
+    display: "flex",
+    alignItems: "center",
+    width: "20.4rem",
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  "& .NavbarStyleContent-logoPanel > .NavbarStyleContent-logoMark": {
+    transition: o.transitions.create("transform", {
+      duration: o.transitions.duration.shorter,
+      easing: o.transitions.easing.easeInOut
+    }),
+    willChange: "transform"
+  },
+  "& .NavbarStyleContent-logo--closed .NavbarStyleContent-logoPanel": {
+    pointerEvents: "none"
+  },
+  "& .NavbarStyleContent-logo--closed .NavbarStyleContent-logoMark": {
+    transform: "translateX(-100%)"
+  },
+  "& .NavbarStyleContent-logo .MuiIconButton-root": {
+    position: "relative",
+    zIndex: 1
+  },
   "& .NavbarStyleContent-logoMark": {
     display: "flex",
     alignItems: "center",
@@ -64,7 +98,7 @@ const w = m("div")(({ theme: o }) => ({
     paddingTop: 8,
     paddingBottom: 8
   }
-})), C = m(S)(() => ({
+})), w = c(x)(() => ({
   overscrollBehavior: "contain",
   overflowX: "hidden",
   overflowY: "auto",
@@ -74,48 +108,39 @@ const w = m("div")(({ theme: o }) => ({
   backgroundAttachment: "local, scroll"
 }));
 function k(o) {
-  const { className: a = "" } = o, e = v(), r = x(), n = y(() => {
-    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__ */ d(w, { className: l("flex h-full flex-auto flex-col overflow-hidden", a), children: [
-    /* @__PURE__ */ d(
+  const { className: n = "" } = o, e = h(), a = N(), p = S(() => {
+    var l;
+    return ((l = e == null ? void 0 : e.navbar) == null ? void 0 : l.folded) || (a == null ? void 0 : a.foldedOpen);
+  }, [e, a]);
+  return /* @__PURE__ */ i(C, { className: d("flex h-full flex-auto flex-col overflow-hidden", n), children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: l(
+        className: d(
           "NavbarStyleContent-logo flex h-48 shrink-0 flex-row items-center px-12 md:h-64",
-          !n && "justify-center"
+          p ? "NavbarStyleContent-logo--open" : "NavbarStyleContent-logo--closed"
         ),
         children: [
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: l(
-                "mr-4 ml-16 flex flex-1 items-center",
-                !n && "hidden"
-              ),
-              children: /* @__PURE__ */ t("div", { className: "NavbarStyleContent-logoMark", children: /* @__PURE__ */ t(b, {}) })
-            }
-          ),
-          /* @__PURE__ */ t(c, { lgDown: !0, children: /* @__PURE__ */ t(g, { surfaceTone: "light", className: "h-32 w-32 p-0" }) }),
-          /* @__PURE__ */ t(c, { lgUp: !0, children: /* @__PURE__ */ t(u, { surfaceTone: "light", className: "h-32 w-32 p-0" }) })
+          /* @__PURE__ */ t("div", { className: "NavbarStyleContent-logoPanel", children: /* @__PURE__ */ t("div", { className: "NavbarStyleContent-logoMark", children: /* @__PURE__ */ t(b, {}) }) }),
+          /* @__PURE__ */ t(s, { lgDown: !0, children: /* @__PURE__ */ t(v, { surfaceTone: "light", className: "h-32 w-32 p-0" }) }),
+          /* @__PURE__ */ t(s, { lgUp: !0, children: /* @__PURE__ */ t(f, { surfaceTone: "light", className: "h-32 w-32 p-0" }) })
         ]
       }
     ),
     /* @__PURE__ */ t(
-      C,
+      w,
       {
         className: "flex min-h-0 flex-1 flex-col",
         option: { suppressScrollX: !0, wheelPropagation: !1 },
-        children: /* @__PURE__ */ t(h, { className: "NavbarStyleContent-navigation", layout: "vertical" })
+        children: /* @__PURE__ */ t(u, { className: "NavbarStyleContent-navigation", layout: "vertical" })
       }
     ),
-    /* @__PURE__ */ t("div", { className: "NavbarStyleContent-userMenu w-full p-4 md:p-10", children: /* @__PURE__ */ t(f, { className: "w-full" }) })
+    /* @__PURE__ */ t("div", { className: "NavbarStyleContent-userMenu w-full p-4 md:p-10", children: /* @__PURE__ */ t(g, { className: "w-full" }) })
   ] });
 }
-s(k, "NavbarStyleContent");
-const z = N(k);
+r(k, "NavbarStyleContent");
+const R = y(k);
 export {
-  z as default
+  R as default
 };
 //# sourceMappingURL=NavbarStyleContent.js.map

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

@@ -1 +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 { useGetCurrentLayoutConfig } from '@/hooks/useOwpSettings';\nimport { useGetNavbar } from '@/hooks/internal/useNavbar';\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 = useGetCurrentLayoutConfig() as LayoutConfigDefaultsType;\n  const navbar = useGetNavbar();\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","useGetCurrentLayoutConfig","navbar","useGetNavbar","showLogo","useMemo","_a","clsx","jsxs","jsx","Logo","OwpHidden","NavbarPinToggleButton","NavbarToggleButton","Navigation","UserMenu","__name","NavbarStyleContent$1","memo"],"mappings":"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"}
+{"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 { useGetCurrentLayoutConfig } from '@/hooks/useOwpSettings';\nimport { useGetNavbar } from '@/hooks/internal/useNavbar';\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-logo--open': {\n    justifyContent: 'flex-end',\n  },\n  '& .NavbarStyleContent-logo--closed': {\n    justifyContent: 'center',\n  },\n  '& .NavbarStyleContent-logoPanel': {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: '2rem',\n    display: 'flex',\n    alignItems: 'center',\n    width: '20.4rem',\n    minWidth: 0,\n    overflow: 'hidden',\n  },\n  '& .NavbarStyleContent-logoPanel > .NavbarStyleContent-logoMark': {\n    transition: theme.transitions.create('transform', {\n      duration: theme.transitions.duration.shorter,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n    willChange: 'transform',\n  },\n  '& .NavbarStyleContent-logo--closed .NavbarStyleContent-logoPanel': {\n    pointerEvents: 'none',\n  },\n  '& .NavbarStyleContent-logo--closed .NavbarStyleContent-logoMark': {\n    transform: 'translateX(-100%)',\n  },\n  '& .NavbarStyleContent-logo .MuiIconButton-root': {\n    position: 'relative',\n    zIndex: 1,\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 = useGetCurrentLayoutConfig() as LayoutConfigDefaultsType;\n  const navbar = useGetNavbar();\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 ? 'NavbarStyleContent-logo--open' : 'NavbarStyleContent-logo--closed',\n        )}\n      >\n        <div className=\"NavbarStyleContent-logoPanel\">\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","useGetCurrentLayoutConfig","navbar","useGetNavbar","showLogo","useMemo","_a","clsx","jsxs","jsx","Logo","OwpHidden","NavbarPinToggleButton","NavbarToggleButton","Navigation","UserMenu","__name","NavbarStyleContent$1","memo"],"mappings":"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"}