@arcblock/ux 3.0.12 → 3.0.14

package/lib/Earth/index.js

@@ -1,15 +1,14 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useReducer as H, useRef as w, useEffect as J } from "react";
-import V from "react-use/lib/useSpring";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useReducer as U, useRef as w, useEffect as H } from "react";
+import J from "react-use/lib/useSpring";
 import * as N from "d3-geo";
-import * as X from "topojson-client";
+import * as V from "topojson-client";
 import D from "versor";
-import { Box as R } from "@mui/material";
-import B from "./countries.json.js";
-import Y from "./util.js";
-import { withDeprecated as K } from "../Util/deprecate.js";
-import { styled as I } from "../Theme/index.js";
-const F = X.feature(B, B.objects.ne_110m_admin_0_countries), Q = {
+import R from "./countries.json.js";
+import X from "./util.js";
+import { withDeprecated as Y } from "../Util/deprecate.js";
+import { styled as B } from "../Theme/index.js";
+const F = V.feature(R, R.objects.ne_110m_admin_0_countries), K = {
   light: {
     ocean: "#EDF4F4",
     graticule: "#EDF4F4",
@@ -29,7 +28,7 @@ const F = X.feature(B, B.objects.ne_110m_admin_0_countries), Q = {
     activeMarker: "#FFD159"
   }
 };
-function W(e, s) {
+function Q(e, s) {
   switch (s.type) {
     case "dragEnd":
       return { ...e, isDragging: !1 };
@@ -47,17 +46,17 @@ function W(e, s) {
       return e;
   }
 }
-function Z({
+function W({
   theme: e = "dark",
   width: s = 1200,
   height: g = 600,
-  enableRotation: M = !1,
-  rotationSpeed: L = 5,
+  enableRotation: I = !1,
+  rotationSpeed: M = 5,
   activeMarkerId: i = void 0,
   markers: y = [],
-  colors: S = {}
+  colors: L = {}
 }) {
-  const $ = Object.assign(S, Q[e]), [r, d] = H(W, {
+  const $ = Object.assign(L, K[e]), [r, d] = U(Q, {
     rotation: [0, 0, 0],
     isDragging: !1,
     animateDuration: 1,
@@ -71,7 +70,7 @@ function Z({
     step: 0,
     markerId: null,
     iv: null
-  }), C = V(r.animateDuration, 170, 26), T = i && k.current.markerId !== i && y.some((t) => t.id === i), p = N.geoOrthographic().fitExtent(
+  }), C = J(r.animateDuration, 170, 26), S = i && k.current.markerId !== i && y.some((t) => t.id === i), p = N.geoOrthographic().fitExtent(
     [
       [30, 30],
       [s - 30, g - 30]
@@ -80,18 +79,18 @@ function Z({
   ).rotate(
     C <= 1 || r.isDragging || !i ? r.rotation : k.current.iv(C / r.animateDuration)
   ), P = N.geoPath().projection(p).pointRadius(2);
-  J(() => {
-    if (T) {
-      let { p1: t, p2: o, r1: a, r2: m, markerId: c } = k.current;
+  H(() => {
+    if (S) {
+      let { p1: t, p2: o, r1: a, r2: u, markerId: c } = k.current;
       if (c !== i && !r.isDragging) {
         const l = y.find((v) => v.id === i);
-        t = o, o = [l.longitude, l.latitude], a = m, m = [-o[0], 20 - o[1], p.rotate()[2]];
-        const h = Y.interpolateAngles(a, m);
+        t = o, o = [l.longitude, l.latitude], a = u, u = [-o[0], 20 - o[1], p.rotate()[2]];
+        const h = X.interpolateAngles(a, u);
         Object.assign(k.current, {
           p1: t,
           p2: o,
           r1: a,
-          r2: m,
+          r2: u,
           iv: h,
           markerId: i
         });
@@ -103,9 +102,9 @@ function Z({
           }
         });
       }
-    } else if (M) {
+    } else if (I) {
       const t = window.requestAnimationFrame(() => {
-        const o = [r.rotation[0] + 2 / L, r.rotation[1], r.rotation[2]];
+        const o = [r.rotation[0] + 2 / M, r.rotation[1], r.rotation[2]];
         d({ type: "rotate", payload: { rotation: o } });
       });
       return function() {
@@ -116,13 +115,13 @@ function Z({
   const b = (t) => {
     const o = E.current, a = o?.getBoundingClientRect();
     return [t.clientX - a.left - o.clientLeft, t.clientY - a.top - o.clientTop];
-  }, z = (t) => {
+  }, T = (t) => {
     const o = b(t);
     o[0] && (x.current.v0 = D.cartesian(p.invert(o)), x.current.r0 = p.rotate(), x.current.q0 = D(x.current.r0), d({ type: "dragStart", payload: { mousePosition: o } }));
-  }, G = (t) => {
+  }, z = (t) => {
     if (r.isDragging === !1)
       return;
-    const o = b(t), { r0: a, v0: m, q0: c } = x.current, l = D.cartesian(p.rotate(a).invert(o)), h = D.multiply(c, D.delta(m, l)), f = D.rotation(h);
+    const o = b(t), { r0: a, v0: u, q0: c } = x.current, l = D.cartesian(p.rotate(a).invert(o)), h = D.multiply(c, D.delta(u, l)), f = D.rotation(h);
     d({ type: "rotate", payload: { rotation: f, mousePosition: o } });
   }, j = () => {
     setTimeout(() => {
@@ -131,9 +130,9 @@ function Z({
   }, A = (t, o) => d({
     type: "tooltip",
     payload: { tooltipIndex: o, mousePosition: b(t) }
-  }), O = () => d({ type: "tooltip", payload: { tooltipIndex: -1, mousePosition: null } }), q = () => y.map((t, o) => {
-    const a = [t.longitude, t.latitude], m = N.geoDistance(a, p.invert([s / 2, g / 2])), c = p(a), l = i === t.id, h = m > 1.57 ? "none" : l ? $.activeMarker : $.marker, f = l ? 9 : 6;
-    return /* @__PURE__ */ u(
+  }), O = () => d({ type: "tooltip", payload: { tooltipIndex: -1, mousePosition: null } }), G = () => y.map((t, o) => {
+    const a = [t.longitude, t.latitude], u = N.geoDistance(a, p.invert([s / 2, g / 2])), c = p(a), l = i === t.id, h = u > 1.57 ? "none" : l ? $.activeMarker : $.marker, f = l ? 9 : 6;
+    return /* @__PURE__ */ m(
       "g",
       {
         className: `marker ${l ? "marker--active" : ""}`,
@@ -174,13 +173,13 @@ function Z({
       },
       t.id
     );
-  }), U = () => {
+  }), q = () => {
     if (r.tooltipIndex >= 0) {
       const t = y[r.tooltipIndex];
-      return /* @__PURE__ */ u(to, { style: { left: r.mousePosition?.[0] ?? 0, top: r.mousePosition?.[1] ?? 0 }, children: [
+      return /* @__PURE__ */ m(oo, { style: { left: r.mousePosition?.[0] ?? 0, top: r.mousePosition?.[1] ?? 0 }, children: [
         /* @__PURE__ */ n("p", { className: "title", children: t.title }),
         /* @__PURE__ */ n("p", { className: "description", children: t.description }),
-        /* @__PURE__ */ u("p", { className: "description", children: [
+        /* @__PURE__ */ m("p", { className: "description", children: [
           "ID: ",
           t.id
         ] })
@@ -194,16 +193,16 @@ function Z({
       (o) => o.properties && o.properties.name && o.properties.name === t.country
     );
   }
-  return /* @__PURE__ */ u(oo, { width: s, height: g, $theme: e, colors: $, onMouseLeave: j, children: [
-    U(),
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(Z, { width: s, height: g, $theme: e, colors: $, onMouseLeave: j, children: [
+    q(),
+    /* @__PURE__ */ m(
       "svg",
       {
         className: "earth",
         width: s,
         height: g,
-        onMouseDown: z,
-        onMouseMove: G,
+        onMouseDown: T,
+        onMouseMove: z,
         onMouseUp: j,
         ref: E,
         children: [
@@ -218,7 +217,7 @@ function Z({
             },
             t.properties.name
           )) }),
-          /* @__PURE__ */ n("g", { className: "markers", children: q() }),
+          /* @__PURE__ */ n("g", { className: "markers", children: G() }),
           r.isDragging && r.mousePosition && /* @__PURE__ */ n(
             "path",
             {
@@ -232,12 +231,12 @@ function Z({
         ]
       }
     ),
-    /* @__PURE__ */ n("svg", { className: "defs", children: /* @__PURE__ */ u("defs", { children: [
-      /* @__PURE__ */ u("linearGradient", { id: "gradBlue", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+    /* @__PURE__ */ n("svg", { className: "defs", children: /* @__PURE__ */ m("defs", { children: [
+      /* @__PURE__ */ m("linearGradient", { id: "gradBlue", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
         /* @__PURE__ */ n("stop", { offset: "0%", style: { stopColor: "#005C99", stopOpacity: 1 } }),
         /* @__PURE__ */ n("stop", { offset: "100%", style: { stopColor: "#0099FF", stopOpacity: 1 } })
       ] }),
-      /* @__PURE__ */ u("filter", { id: "glow", children: [
+      /* @__PURE__ */ m("filter", { id: "glow", children: [
         /* @__PURE__ */ n(
           "feColorMatrix",
           {
@@ -249,7 +248,7 @@ function Z({
           }
         ),
         /* @__PURE__ */ n("feGaussianBlur", { stdDeviation: "5.5", result: "coloredBlur" }),
-        /* @__PURE__ */ u("feMerge", { children: [
+        /* @__PURE__ */ m("feMerge", { children: [
           /* @__PURE__ */ n("feMergeNode", { in: "coloredBlur" }),
           /* @__PURE__ */ n("feMergeNode", { in: "SourceGraphic" })
         ] })
@@ -257,7 +256,7 @@ function Z({
     ] }) })
   ] });
 }
-const mo = K(Z, { name: "Earth" }), oo = I(R)`
+const lo = Y(W, { name: "Earth" }), Z = B("div")`
   background-color: ${(e) => e.$theme === "light" ? "#f7f7f7" : "#222"};
   width: ${(e) => e.width}px;
   height: ${(e) => e.height}px;
@@ -338,7 +337,7 @@ const mo = K(Z, { name: "Earth" }), oo = I(R)`
       transform: scale3d(1.5, 1.5, 1.5);
     }
   }
-`, to = I(R)`
+`, oo = B("div")`
   position: absolute;
   width: auto;
   min-width: 90px;
@@ -376,5 +375,5 @@ const mo = K(Z, { name: "Earth" }), oo = I(R)`
   }
 `;
 export {
-  mo as default
+  lo as default
 };

package/lib/Footer/index.js

@@ -1,19 +1,19 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Box as s, Container as h, Typography as r } from "@mui/material";
+import { Container as f, Typography as r, Box as h } from "@mui/material";
 import { mergeProps as g } from "../Util/index.js";
 import w from "../Logo/index.js";
 import { styled as y } from "../Theme/index.js";
 function u({ ...e }) {
-  const p = g(e, u, ["dark", "style"]), { className: d = "", copyStart: m = "2017", style: c = {}, brand: x = "ArcBlock", dark: n = !1, addon: a = null } = p, i = `${(/* @__PURE__ */ new Date()).getFullYear()}`, l = `${m}`, f = i === l ? i : `${l}-${i}`;
-  return /* @__PURE__ */ o(b, { className: d, style: c, dark: n, children: [
-    /* @__PURE__ */ t(h, { maxWidth: !1, children: /* @__PURE__ */ o(r, { component: "div", className: "footer", children: [
+  const s = g(e, u, ["dark", "style"]), { className: p = "", copyStart: d = "2017", style: m = {}, brand: c = "ArcBlock", dark: n = !1, addon: a = null } = s, i = `${(/* @__PURE__ */ new Date()).getFullYear()}`, l = `${d}`, x = i === l ? i : `${l}-${i}`;
+  return /* @__PURE__ */ o(b, { className: p, style: m, dark: n, children: [
+    /* @__PURE__ */ t(f, { maxWidth: !1, children: /* @__PURE__ */ o(r, { component: "div", className: "footer", children: [
       /* @__PURE__ */ o(r, { component: "p", className: "footer-item", children: [
         /* @__PURE__ */ o("span", { className: "footer-copy", children: [
           "Copyright © ",
-          f,
+          x,
           " "
         ] }),
-        /* @__PURE__ */ t("span", { className: "footer-brand", children: x })
+        /* @__PURE__ */ t("span", { className: "footer-brand", children: c })
       ] }),
       a && /* @__PURE__ */ t(
         r,
@@ -30,7 +30,7 @@ function u({ ...e }) {
       ] })
     ] }) }),
     /* @__PURE__ */ t(
-      s,
+      h,
       {
         sx: {
           position: "absolute",
@@ -45,7 +45,7 @@ function u({ ...e }) {
     )
   ] });
 }
-const b = y(s, {
+const b = y("div", {
   shouldForwardProp: (e) => e !== "dark"
 })`
   position: relative;

package/lib/Icon/image.js

@@ -1,34 +1,33 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { Box as h } from "@mui/material";
-import n from "../Img/index.js";
-import { styled as l } from "../Theme/index.js";
-function w({
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import h from "../Img/index.js";
+import { styled as n } from "../Theme/index.js";
+function f({
   name: o,
   size: t = 36,
-  alt: i = "",
-  color: p = "#000000",
+  alt: p = "",
+  color: r = "#000000",
   prefix: e = "/images",
   showBadge: a = !1,
   style: s = {},
-  ...x
+  ...d
 }) {
-  const g = `${e}/${o}-${p.replace(/^#/, "")}.png`;
-  return /* @__PURE__ */ d(c, { style: { width: t, height: t }, children: [
-    /* @__PURE__ */ r(
-      n,
+  const g = `${e}/${o}-${r.replace(/^#/, "")}.png`;
+  return /* @__PURE__ */ x(l, { style: { width: t, height: t }, children: [
+    /* @__PURE__ */ i(
+      h,
       {
         width: t,
         height: t,
-        alt: i || o,
+        alt: p || o,
         src: g,
         style: Object.assign({ width: t }, s),
-        ...x
+        ...d
       }
     ),
-    a && /* @__PURE__ */ r("i", { className: "badge-point" })
+    a && /* @__PURE__ */ i("i", { className: "badge-point" })
   ] });
 }
-const c = l(h)`
+const l = n("div")`
   position: relative;
   .badge-point {
     position: absolute;
@@ -44,5 +43,5 @@ const c = l(h)`
   }
 `;
 export {
-  w as default
+  f as default
 };

package/lib/InfoRow/index.js

@@ -1,23 +1,23 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import x from "lodash/camelCase";
-import c from "lodash/upperFirst";
-import { Box as u, Typography as i } from "@mui/material";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import c from "lodash/camelCase";
+import x from "lodash/upperFirst";
+import { Typography as e } from "@mui/material";
 import { styled as d } from "../Theme/index.js";
-function $({
+function v({
   name: t,
-  nameFormatter: a = (o) => typeof o == "string" ? o.split(" ").map((s) => c(x(s))).join(" ") : o,
+  nameFormatter: a = (o) => typeof o == "string" ? o.split(" ").map((s) => x(c(s))).join(" ") : o,
   layout: n = "horizontal",
   children: r,
   valueComponent: l = "div",
   nameWidth: m = 90,
   ...f
 }) {
-  return /* @__PURE__ */ p(w, { layout: n, width: m, ...f, children: [
-    /* @__PURE__ */ e(i, { color: "textSecondary", className: "info-row__name", children: a(t) }),
-    r && /* @__PURE__ */ e(i, { color: "textPrimary", component: l, className: "info-row__value", children: r })
+  return /* @__PURE__ */ p(u, { layout: n, width: m, ...f, children: [
+    /* @__PURE__ */ i(e, { color: "textSecondary", className: "info-row__name", children: a(t) }),
+    r && /* @__PURE__ */ i(e, { color: "textPrimary", component: l, className: "info-row__value", children: r })
   ] });
 }
-const w = d(u)`
+const u = d("div")`
   display: flex;
   flex-direction: ${(t) => t.layout === "vertical" ? "column" : "row"};
   justify-content: flex-start;
@@ -54,5 +54,5 @@ const w = d(u)`
   }
 `;
 export {
-  $ as default
+  v as default
 };

package/lib/Layout/dashboard/index.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { useMemo as M, useEffect as f } from "react";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useMemo as M, useEffect as b } from "react";
 import { useLocation as p, matchPath as z } from "react-router-dom";
 import D from "react-helmet";
 import { Box as d, useTheme as R, Container as T } from "@mui/material";
@@ -11,13 +11,13 @@ import G from "../../Header/responsive-header.js";
 import O from "../../NavMenu/nav-menu.js";
 import "../../NavMenu/products.js";
 import q from "../../Footer/index.js";
-import b from "./sidebar.js";
+import f from "./sidebar.js";
 import { styled as u } from "../../Theme/index.js";
 import { Link as x } from "./external-link.js";
 import { FullPageProvider as A, useFullPage as J } from "./full-page.js";
 function K({ closeMenu: e, ...a }) {
   const o = p();
-  return f(() => {
+  return b(() => {
     e();
   }, [o]), /* @__PURE__ */ r(O, { ...a });
 }
@@ -43,28 +43,28 @@ function Q({
   footerProps: y = {},
   sx: N = {},
   children: P,
-  ...h
+  ...c
 }) {
-  const c = R(), { inFullPage: F, showToggleButton: L, headerVisible: W, footerVisible: $, sidebarVisible: C, toggleFullPage: H } = J(), m = p(), s = M(() => g(o, m), [m, o]), _ = s.some((t) => !!t.children?.length), i = l === "auto" ? s.length >= 8 || _ : l, S = V("dashboard", { "dashboard-dense": i }, h.className), j = {
+  const h = R(), { inFullPage: F, showToggleButton: L, headerVisible: $, footerVisible: C, sidebarVisible: H, toggleFullPage: W } = J(), m = p(), n = M(() => g(o, m), [m, o]), _ = n.some((t) => !!t.children?.length), i = l === "auto" ? n.length >= 8 || _ : l, S = V("dashboard", { "dashboard-dense": i }, c.className), j = {
     homeLink: (t) => /* @__PURE__ */ r(x, { to: window.blocklet?.prefix || "/", children: t }),
     ...a
   };
-  return f(() => {
+  return b(() => {
     const { searchParams: t } = new URL(window.location.href);
     t.get("inviter") && window.localStorage.setItem("inviter", t.get("inviter"));
-  }, []), /* @__PURE__ */ n(X, { sx: N, ...h, className: S, sidebarWidth: v, children: [
+  }, []), /* @__PURE__ */ s(X, { sx: N, ...c, className: S, sidebarWidth: v, children: [
     /* @__PURE__ */ r(D, { title: e }, e),
-    W && /* @__PURE__ */ r(Y, { ...j, className: "dashboard-header", children: o?.length ? ({ isMobile: t, closeMenu: I }) => t ? /* @__PURE__ */ r(
+    $ && /* @__PURE__ */ r(Y, { ...j, className: "dashboard-header", children: o?.length ? ({ isMobile: t, closeMenu: I }) => t ? /* @__PURE__ */ r(
       K,
       {
         mode: "inline",
-        items: s,
+        items: n,
         closeMenu: I,
         bgColor: "transparent",
-        activeTextColor: c.palette.primary.main
+        activeTextColor: h.palette.primary.main
       }
     ) : null : null }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ s(
       d,
       {
         className: "dashboard-body",
@@ -72,7 +72,7 @@ function Q({
           display: "flex"
         },
         children: [
-          !!o?.length && C && /* @__PURE__ */ r(
+          !!o?.length && H && /* @__PURE__ */ r(
             d,
             {
               className: "dashboard-sidebar",
@@ -82,10 +82,10 @@ function Q({
                   md: "block"
                 }
               },
-              children: i ? /* @__PURE__ */ r(b, { links: o, dense: i }) : /* @__PURE__ */ r(d, { className: "dashboard-sidebar-container", children: /* @__PURE__ */ r(b, { links: o, dense: i }) })
+              children: i ? /* @__PURE__ */ r(f, { links: o, dense: i }) : /* @__PURE__ */ r(d, { className: "dashboard-sidebar-container", children: /* @__PURE__ */ r(f, { links: o, dense: i }) })
             }
           ),
-          /* @__PURE__ */ n(d, { className: "dashboard-main", id: "arc__dashboard-main", children: [
+          /* @__PURE__ */ s(d, { className: "dashboard-main", id: "arc__dashboard-main", children: [
             L && /* @__PURE__ */ r(
               d,
               {
@@ -103,21 +103,19 @@ function Q({
                   borderRadius: 1,
                   cursor: "pointer"
                 },
-                onClick: H,
+                onClick: W,
                 children: F ? /* @__PURE__ */ r(B, { style: { fontSize: 18 } }) : /* @__PURE__ */ r(U, { style: { fontSize: 18 } })
               }
             ),
             /* @__PURE__ */ r(T, { className: "dashboard-content", id: "arc__dashboard-content", ...w && { maxWidth: !1 }, children: P }),
-            $ && /* @__PURE__ */ r(q, { dark: c.palette.mode === "dark", ...y })
+            C && /* @__PURE__ */ r(q, { dark: h.palette.mode === "dark", ...y })
           ] })
         ]
       }
     )
   ] });
 }
-const X = u(d, {
-  shouldForwardProp: (e) => e !== "sidebarWidth"
-})`
+const X = u(d)`
   &.dashboard {
     display: flex;
     flex-direction: column;

package/lib/Layout/dashboard/sidebar.js

@@ -1,39 +1,39 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Box as x, Typography as b } from "@mui/material";
+import { Typography as x } from "@mui/material";
 import n from "clsx";
-import { styled as c } from "../../Theme/index.js";
-import { NavLink as h } from "./external-link.js";
+import { styled as b } from "../../Theme/index.js";
+import { NavLink as c } from "./external-link.js";
 function d(e, i) {
   if (e.children?.length)
-    return m(e, i);
+    return h(e, i);
   const { url: a, icon: r, title: p, showBadge: s, external: l, active: u } = e;
   return /* @__PURE__ */ t("li", { className: "layout-sidebar-item", children: /* @__PURE__ */ o(
-    h,
+    c,
     {
       external: l,
       to: a,
       className: ({ isActive: g }) => n("layout-sidebar-link", { "layout-sidebar-link--active": l ? u : g }),
       children: [
         r && /* @__PURE__ */ t("span", { className: `layout-sidebar-icon ${s ? "layout-sidebar-badge" : ""}`, children: r }),
-        /* @__PURE__ */ t(b, { component: "span", className: "layout-sidebar-link-text", children: p })
+        /* @__PURE__ */ t(x, { component: "span", className: "layout-sidebar-link-text", children: p })
       ]
     }
   ) }, `${a}-${i}`);
 }
-function m(e, i) {
+function h(e, i) {
   return /* @__PURE__ */ o("li", { className: "layout-sidebar-group", children: [
     /* @__PURE__ */ t("span", { className: "layout-sidebar-group-title", children: e.title }),
     /* @__PURE__ */ t("ul", { children: e.children.map(d) })
   ] }, `group-${e.title}-${i}`);
 }
-function z({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
-  return /* @__PURE__ */ o(f, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
+function N({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
+  return /* @__PURE__ */ o(y, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
     /* @__PURE__ */ t("ul", { children: e.map(d) }),
     /* @__PURE__ */ t("div", { style: { flex: 1 } }),
     i
   ] });
 }
-const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", f = c(x)`
+const m = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", y = b("div")`
   display: flex;
   flex-direction: column;
   ul {
@@ -52,7 +52,7 @@ const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230,
     &:hover,
     &.layout-sidebar-link--active {
       color: ${(e) => e.theme.palette.primary.main};
-      background: ${y};
+      background: ${m};
       border-left-color: ${(e) => e.theme.palette.primary.main};
     }
   }
@@ -160,5 +160,5 @@ const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230,
   }
 `;
 export {
-  z as default
+  N as default
 };

package/lib/Layout/dashboard-legacy/index.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as c, useEffect as $ } from "react";
+import { useState as p, useEffect as $ } from "react";
 import P from "react-helmet";
-import { Box as t, Drawer as z, Container as H } from "@mui/material";
+import { Box as c, Drawer as z, Container as H } from "@mui/material";
 import { useSize as S } from "ahooks";
 import W from "./sidebar.js";
 import j from "./header.js";
 import C from "../../Footer/index.js";
 import { styled as F } from "../../Theme/index.js";
-const O = F(t)`
+const O = F("div")`
   &.dashboard {
     display: flex;
     flex-direction: column;
@@ -38,7 +38,7 @@ const O = F(t)`
 `;
 function R({
   links: o = [],
-  brand: d = "",
+  brand: t = "",
   description: h = "",
   images: f,
   title: b = "Home",
@@ -49,35 +49,35 @@ function R({
   contentLayout: g = "column",
   className: y = "",
   homeUrl: v = "/",
-  logo: s = void 0,
+  logo: d = void 0,
   children: N,
   ...k
 }) {
-  const r = S(document.body)?.width || 0, [n, M] = c(r >= 960 ? "permanent" : "temporary"), [i, l] = c(n === "permanent");
+  const r = S(document.body)?.width || 0, [s, M] = p(r >= 960 ? "permanent" : "temporary"), [n, i] = p(s === "permanent");
   $(() => {
-    const p = r >= 960 ? "permanent" : "temporary";
-    M(p), l(p !== "temporary");
+    const m = r >= 960 ? "permanent" : "temporary";
+    M(m), i(m !== "temporary");
   }, [r]);
-  const m = () => {
-    l(!i);
+  const l = () => {
+    i(!n);
   }, D = _ || g === "row";
   return /* @__PURE__ */ a(O, { className: `dashboard ${y}`, ...k, children: [
-    /* @__PURE__ */ e(P, { title: `${b}-${d}` }),
+    /* @__PURE__ */ e(P, { title: `${b}-${t}` }),
     /* @__PURE__ */ e(
       j,
       {
         className: "dashboard__header",
-        onToggleMenu: m,
-        brand: d,
+        onToggleMenu: l,
+        brand: t,
         brandAddon: u,
         description: h,
         addons: w,
         homeUrl: v,
-        logo: s
+        logo: d
       }
     ),
     /* @__PURE__ */ a(
-      t,
+      c,
       {
         className: "dashboard__body",
         sx: {
@@ -87,16 +87,16 @@ function R({
           /* @__PURE__ */ e(
             z,
             {
-              variant: n,
+              variant: s,
               className: "drawer",
               classes: { paper: "drawerPaper" },
-              open: i,
-              onClose: m,
+              open: n,
+              onClose: l,
               ModalProps: { disablePortal: !0, keepMounted: !0 },
-              children: /* @__PURE__ */ e(W, { className: "dashboard__sidebar", images: f, links: o, prefix: x, logo: s })
+              children: /* @__PURE__ */ e(W, { className: "dashboard__sidebar", images: f, links: o, prefix: x, logo: d })
             }
           ),
-          /* @__PURE__ */ a(t, { className: "dashboard__main", children: [
+          /* @__PURE__ */ a(c, { className: "dashboard__main", children: [
             /* @__PURE__ */ e(H, { maxWidth: D ? !1 : "lg", className: "dashboard__content", children: N }),
             /* @__PURE__ */ e(C, {})
           ] })