@arcblock/ux 3.0.10 → 3.0.12

package/lib/Earth/index.js

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

package/lib/Footer/index.js

@@ -1,19 +1,19 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Container as f, Typography as r, Box as h } from "@mui/material";
+import { Box as s, Container as h, Typography as r } 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 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: [
+  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: [
       /* @__PURE__ */ o(r, { component: "p", className: "footer-item", children: [
         /* @__PURE__ */ o("span", { className: "footer-copy", children: [
           "Copyright © ",
-          x,
+          f,
           " "
         ] }),
-        /* @__PURE__ */ t("span", { className: "footer-brand", children: c })
+        /* @__PURE__ */ t("span", { className: "footer-brand", children: x })
       ] }),
       a && /* @__PURE__ */ t(
         r,
@@ -30,7 +30,7 @@ function u({ ...e }) {
       ] })
     ] }) }),
     /* @__PURE__ */ t(
-      h,
+      s,
       {
         sx: {
           position: "absolute",
@@ -45,7 +45,7 @@ function u({ ...e }) {
     )
   ] });
 }
-const b = y("div", {
+const b = y(s, {
   shouldForwardProp: (e) => e !== "dark"
 })`
   position: relative;

package/lib/Icon/image.js

@@ -1,33 +1,34 @@
-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({
+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({
   name: o,
   size: t = 36,
-  alt: p = "",
-  color: r = "#000000",
+  alt: i = "",
+  color: p = "#000000",
   prefix: e = "/images",
   showBadge: a = !1,
   style: s = {},
-  ...d
+  ...x
 }) {
-  const g = `${e}/${o}-${r.replace(/^#/, "")}.png`;
-  return /* @__PURE__ */ x(l, { style: { width: t, height: t }, children: [
-    /* @__PURE__ */ i(
-      h,
+  const g = `${e}/${o}-${p.replace(/^#/, "")}.png`;
+  return /* @__PURE__ */ d(c, { style: { width: t, height: t }, children: [
+    /* @__PURE__ */ r(
+      n,
       {
         width: t,
         height: t,
-        alt: p || o,
+        alt: i || o,
         src: g,
         style: Object.assign({ width: t }, s),
-        ...d
+        ...x
       }
     ),
-    a && /* @__PURE__ */ i("i", { className: "badge-point" })
+    a && /* @__PURE__ */ r("i", { className: "badge-point" })
   ] });
 }
-const l = n("div")`
+const c = l(h)`
   position: relative;
   .badge-point {
     position: absolute;
@@ -43,5 +44,5 @@ const l = n("div")`
   }
 `;
 export {
-  f as default
+  w as default
 };

package/lib/InfoRow/index.js

@@ -1,23 +1,23 @@
-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 { 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 { styled as d } from "../Theme/index.js";
-function v({
+function $({
   name: t,
-  nameFormatter: a = (o) => typeof o == "string" ? o.split(" ").map((s) => x(c(s))).join(" ") : o,
+  nameFormatter: a = (o) => typeof o == "string" ? o.split(" ").map((s) => c(x(s))).join(" ") : o,
   layout: n = "horizontal",
   children: r,
   valueComponent: l = "div",
   nameWidth: m = 90,
   ...f
 }) {
-  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 })
+  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 })
   ] });
 }
-const u = d("div")`
+const w = d(u)`
   display: flex;
   flex-direction: ${(t) => t.layout === "vertical" ? "column" : "row"};
   justify-content: flex-start;
@@ -54,5 +54,5 @@ const u = d("div")`
   }
 `;
 export {
-  v as default
+  $ as default
 };

package/lib/Layout/dashboard/index.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as n } from "react/jsx-runtime";
 import { useMemo as M, useEffect as f } from "react";
 import { useLocation as p, matchPath as z } from "react-router-dom";
 import D from "react-helmet";
-import { useTheme as R, Box as d, Container as T } from "@mui/material";
+import { Box as d, useTheme as R, Container as T } from "@mui/material";
 import V from "clsx";
 import { CloseFullscreen as B, OpenInFull as U } from "@mui/icons-material";
 import E from "../dashboard-legacy/index.js";
@@ -115,7 +115,7 @@ function Q({
     )
   ] });
 }
-const X = u("div", {
+const X = u(d, {
   shouldForwardProp: (e) => e !== "sidebarWidth"
 })`
   &.dashboard {

package/lib/Layout/dashboard/sidebar.js

@@ -1,39 +1,39 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { Typography as x } from "@mui/material";
+import { Box as x, Typography as b } from "@mui/material";
 import n from "clsx";
-import { styled as b } from "../../Theme/index.js";
-import { NavLink as c } from "./external-link.js";
+import { styled as c } from "../../Theme/index.js";
+import { NavLink as h } from "./external-link.js";
 function d(e, i) {
   if (e.children?.length)
-    return h(e, i);
+    return m(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(
-    c,
+    h,
     {
       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(x, { component: "span", className: "layout-sidebar-link-text", children: p })
+        /* @__PURE__ */ t(b, { component: "span", className: "layout-sidebar-link-text", children: p })
       ]
     }
   ) }, `${a}-${i}`);
 }
-function h(e, i) {
+function m(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 N({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
-  return /* @__PURE__ */ o(y, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
+function z({ links: e, addons: i = void 0, dense: a = !1, ...r }) {
+  return /* @__PURE__ */ o(f, { ...r, className: n({ "layout-sidebar-dense": a }), children: [
     /* @__PURE__ */ t("ul", { children: e.map(d) }),
     /* @__PURE__ */ t("div", { style: { flex: 1 } }),
     i
   ] });
 }
-const m = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", y = b("div")`
+const y = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", f = c(x)`
   display: flex;
   flex-direction: column;
   ul {
@@ -52,7 +52,7 @@ const m = "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: ${m};
+      background: ${y};
       border-left-color: ${(e) => e.theme.palette.primary.main};
     }
   }
@@ -160,5 +160,5 @@ const m = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230,
   }
 `;
 export {
-  N as default
+  z 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 p, useEffect as $ } from "react";
+import { useState as c, useEffect as $ } from "react";
 import P from "react-helmet";
-import { Box as c, Drawer as z, Container as H } from "@mui/material";
+import { Box as t, 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("div")`
+const O = F(t)`
   &.dashboard {
     display: flex;
     flex-direction: column;
@@ -38,7 +38,7 @@ const O = F("div")`
 `;
 function R({
   links: o = [],
-  brand: t = "",
+  brand: d = "",
   description: h = "",
   images: f,
   title: b = "Home",
@@ -49,35 +49,35 @@ function R({
   contentLayout: g = "column",
   className: y = "",
   homeUrl: v = "/",
-  logo: d = void 0,
+  logo: s = void 0,
   children: N,
   ...k
 }) {
-  const r = S(document.body)?.width || 0, [s, M] = p(r >= 960 ? "permanent" : "temporary"), [n, i] = p(s === "permanent");
+  const r = S(document.body)?.width || 0, [n, M] = c(r >= 960 ? "permanent" : "temporary"), [i, l] = c(n === "permanent");
   $(() => {
-    const m = r >= 960 ? "permanent" : "temporary";
-    M(m), i(m !== "temporary");
+    const p = r >= 960 ? "permanent" : "temporary";
+    M(p), l(p !== "temporary");
   }, [r]);
-  const l = () => {
-    i(!n);
+  const m = () => {
+    l(!i);
   }, D = _ || g === "row";
   return /* @__PURE__ */ a(O, { className: `dashboard ${y}`, ...k, children: [
-    /* @__PURE__ */ e(P, { title: `${b}-${t}` }),
+    /* @__PURE__ */ e(P, { title: `${b}-${d}` }),
     /* @__PURE__ */ e(
       j,
       {
         className: "dashboard__header",
-        onToggleMenu: l,
-        brand: t,
+        onToggleMenu: m,
+        brand: d,
         brandAddon: u,
         description: h,
         addons: w,
         homeUrl: v,
-        logo: d
+        logo: s
       }
     ),
     /* @__PURE__ */ a(
-      c,
+      t,
       {
         className: "dashboard__body",
         sx: {
@@ -87,16 +87,16 @@ function R({
           /* @__PURE__ */ e(
             z,
             {
-              variant: s,
+              variant: n,
               className: "drawer",
               classes: { paper: "drawerPaper" },
-              open: n,
-              onClose: l,
+              open: i,
+              onClose: m,
               ModalProps: { disablePortal: !0, keepMounted: !0 },
-              children: /* @__PURE__ */ e(W, { className: "dashboard__sidebar", images: f, links: o, prefix: x, logo: d })
+              children: /* @__PURE__ */ e(W, { className: "dashboard__sidebar", images: f, links: o, prefix: x, logo: s })
             }
           ),
-          /* @__PURE__ */ a(c, { className: "dashboard__main", children: [
+          /* @__PURE__ */ a(t, { className: "dashboard__main", children: [
             /* @__PURE__ */ e(H, { maxWidth: D ? !1 : "lg", className: "dashboard__content", children: N }),
             /* @__PURE__ */ e(C, {})
           ] })

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

@@ -1,12 +1,12 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { memo as k } from "react";
 import { useLocation as $, Link as s } from "react-router-dom";
-import { Button as w, useTheme as z, Typography as v } from "@mui/material";
+import { Box as w, Button as z, useTheme as v, Typography as I } from "@mui/material";
 import { teal as l } from "@mui/material/colors";
-import I from "../../Icon/image.js";
-import j from "../../Logo/index.js";
-import { styled as c } from "../../Theme/index.js";
-function q({
+import j from "../../Icon/image.js";
+import L from "../../Logo/index.js";
+import { styled as d } from "../../Theme/index.js";
+function C({
   images: e,
   links: m,
   prefix: p = "/images",
@@ -14,14 +14,14 @@ function q({
   logo: f = void 0,
   ...x
 }) {
-  const u = z(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
-  return /* @__PURE__ */ a(L, { ...x, children: [
-    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(j, { showText: !1, size: 20 }) }),
+  const u = v(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
+  return /* @__PURE__ */ a(T, { ...x, children: [
+    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(L, { showText: !1, size: 20 }) }),
     m.map(({ url: o, name: n, title: r, showBadge: y }) => {
       const i = h(o, n);
-      return /* @__PURE__ */ a(T, { component: s, selected: i, to: o, children: [
+      return /* @__PURE__ */ a(A, { component: s, selected: i, to: o, children: [
         /* @__PURE__ */ t(
-          I,
+          j,
           {
             name: e[n],
             size: 36,
@@ -30,14 +30,14 @@ function q({
             showBadge: y
           }
         ),
-        /* @__PURE__ */ t(v, { component: "span", className: "menu-title", children: r })
+        /* @__PURE__ */ t(I, { component: "span", className: "menu-title", children: r })
       ] }, o);
     }),
     /* @__PURE__ */ t("div", { style: { flex: 1 } }),
     g
   ] });
 }
-const L = k(c("div")`
+const T = k(d(w)`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@ const L = k(c("div")`
       display: block;
     }
   }
-`), d = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", T = c(w)`
+`), c = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", A = d(z)`
   && {
     display: flex;
     flex-direction: column;
@@ -66,13 +66,13 @@ const L = k(c("div")`
     align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
-    background: ${(e) => e.selected ? d : ""};
+    background: ${(e) => e.selected ? c : ""};
     padding: 24px 0;
     border-left: 2px solid ${(e) => e.selected ? l.A700 : "transparent"};
     border-radius: 0;
 
     &:hover {
-      background: ${d};
+      background: ${c};
       border-left-color: ${l.A700};
     }
 
@@ -89,5 +89,5 @@ const L = k(c("div")`
   }
 `;
 export {
-  q as default
+  C as default
 };