@arcblock/ux 3.0.10 → 3.0.12

package/lib/ActivityIndicator/index.js

@@ -1,34 +1,34 @@
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { useState as f, useEffect as g } from "react";
+import { useState as g, useEffect as h } from "react";
 import i from "prop-types";
 import { green as m, blue as p } from "@mui/material/colors";
-import h from "../Logo/index.js";
-import { styled as c } from "../Theme/index.js";
-import { useTheme as x } from "@mui/material";
-function b({ messages: e = ["Loading data..."], interval: n = 3e3, ...s }) {
-  const [r, a] = f(0), { palette: l } = x();
-  return g(() => {
-    const u = setInterval(() => {
+import { Box as c, useTheme as x } from "@mui/material";
+import b from "../Logo/index.js";
+import { styled as u } from "../Theme/index.js";
+function y({ messages: e = ["Loading data..."], interval: n = 3e3, ...s }) {
+  const [r, a] = g(0), { palette: l } = x();
+  return h(() => {
+    const f = setInterval(() => {
       a((r + 1) % e.length);
     }, n);
     return () => {
-      clearTimeout(u);
+      clearTimeout(f);
     };
-  }), /* @__PURE__ */ t(y, { ...s, children: /* @__PURE__ */ d("div", { className: "pm-loader-container", children: [
+  }), /* @__PURE__ */ t(v, { ...s, children: /* @__PURE__ */ d("div", { className: "pm-loader-container", children: [
     /* @__PURE__ */ t("div", { className: "pm-loader-text", children: /* @__PURE__ */ t("p", { children: e[r] }) }),
     /* @__PURE__ */ d("div", { className: "pm-loader-atoms", children: [
-      /* @__PURE__ */ t(h, { style: { transform: "scale(0.6)" }, showText: !1 }),
+      /* @__PURE__ */ t(b, { style: { transform: "scale(0.6)" }, showText: !1 }),
       /* @__PURE__ */ t(o, { size: 56, orbitColor: m[500], atomColor: m[500], duration: 1 }),
       /* @__PURE__ */ t(o, { size: 80, orbitColor: p[800], atomColor: p[800], duration: 1.5 }),
       /* @__PURE__ */ t(o, { size: 100, orbitColor: l.grey[900], atomColor: l.grey[900] })
     ] })
   ] }) });
 }
-b.propTypes = {
+y.propTypes = {
   interval: i.number,
   messages: i.arrayOf(i.string.isRequired)
 };
-const y = c("div")`
+const v = u(c)`
   && {
     box-sizing: border-box;
     padding: 20px;
@@ -72,7 +72,7 @@ const y = c("div")`
   }
 `;
 function o({ size: e, orbitColor: n, atomColor: s, duration: r = 2, ...a }) {
-  return /* @__PURE__ */ t(v, { $duration: r, style: { width: e, height: e, border: `1px solid ${n}` }, ...a, children: /* @__PURE__ */ t("div", { style: { background: s } }) });
+  return /* @__PURE__ */ t(C, { $duration: r, style: { width: e, height: e, border: `1px solid ${n}` }, ...a, children: /* @__PURE__ */ t("div", { style: { background: s } }) });
 }
 o.propTypes = {
   size: i.number.isRequired,
@@ -80,7 +80,7 @@ o.propTypes = {
   atomColor: i.string.isRequired,
   duration: i.number
 };
-const v = c("div")`
+const C = u(c)`
   @keyframes orbit {
     0% {
       transform: rotate(0deg);
@@ -106,5 +106,5 @@ const v = c("div")`
   }
 `;
 export {
-  b as default
+  y as default
 };

package/lib/Alert/index.js

@@ -1,14 +1,14 @@
 import { jsxs as k, jsx as c } from "react/jsx-runtime";
 import o from "prop-types";
-import { Typography as N } from "@mui/material";
-import { blueGrey as j } from "@mui/material/colors";
+import { Box as N, Typography as j } from "@mui/material";
+import { blueGrey as E } from "@mui/material/colors";
 import n from "lodash/isUndefined";
-import E from "../Icon/index.js";
-import { mergeProps as O } from "../Util/index.js";
+import O from "../Icon/index.js";
+import { mergeProps as w } from "../Util/index.js";
 import t from "../Colors/themes/default.js";
-import { styled as w } from "../Theme/index.js";
-import { withDeprecated as $ } from "../Util/deprecate.js";
-const i = {
+import { styled as $ } from "../Theme/index.js";
+import { withDeprecated as A } from "../Util/deprecate.js";
+const a = {
   error: {
     icon: "exclamation-circle",
     color: t.error.main,
@@ -37,30 +37,30 @@ const i = {
     variant: "solid"
   }
 };
-function a({ ...l }) {
+function i({ ...l }) {
   const r = Object.assign({}, l);
   n(r.type) && (r.type = "tip"), n(r.className) && (r.className = ""), n(r.style) && (r.style = {}), n(r.variant) && (r.variant = "border");
-  const m = O(r, a, ["style"]), { type: s, children: p, style: d, className: f, variant: e, showIcon: g = !1, ...b } = m, { icon: y, color: u, backgroundColor: x, borderColor: v, variant: C } = i[s] || i.success, h = Object.assign(
+  const m = w(r, i, ["style"]), { type: s, children: p, style: d, className: f, variant: e, showIcon: g = !1, ...b } = m, { icon: y, color: u, backgroundColor: x, borderColor: C, variant: v } = a[s] || a.success, h = Object.assign(
     {
-      color: j[500],
+      color: E[500],
       backgroundColor: e === "border" ? x : "transparent",
-      borderLeft: e === "border" ? `5px solid ${v}` : "none"
+      borderLeft: e === "border" ? `5px solid ${C}` : "none"
     },
     d
   );
-  return /* @__PURE__ */ k(A, { ...b, className: `alert alert--${s} alert--${e} ${f}`.trim(), style: h, children: [
-    (e === "icon" || g) && /* @__PURE__ */ c(E, { className: "alert-icon", name: y, size: 24, color: u, variant: C }),
-    /* @__PURE__ */ c(N, { component: "div", className: "alert-content", children: p })
+  return /* @__PURE__ */ k(T, { ...b, className: `alert alert--${s} alert--${e} ${f}`.trim(), style: h, children: [
+    (e === "icon" || g) && /* @__PURE__ */ c(O, { className: "alert-icon", name: y, size: 24, color: u, variant: v }),
+    /* @__PURE__ */ c(j, { component: "div", className: "alert-content", children: p })
   ] });
 }
-a.propTypes = {
-  type: o.oneOf(Object.keys(i)),
+i.propTypes = {
+  type: o.oneOf(Object.keys(a)),
   children: o.any.isRequired,
   className: o.string,
   style: o.oneOfType([o.object, o.string]),
   variant: o.oneOf(["border", "icon"])
 };
-const V = $(a, { name: "Alert", alternative: "@mui/material/Alert" }), A = w("div")`
+const V = A(i, { name: "Alert", alternative: "@mui/material/Alert" }), T = $(N)`
   display: flex;
   align-items: center;
   font-size: 16px;

package/lib/AnimationWaiter/index.js

@@ -1,6 +1,6 @@
 import { jsxs as b, jsx as o } from "react/jsx-runtime";
 import { useState as l, useRef as $, useEffect as c } from "react";
-import { useTheme as M, Skeleton as E } from "@mui/material";
+import { Box as M, useTheme as B, Skeleton as E } from "@mui/material";
 import n from "prop-types";
 import F from "react-lottie-player";
 import P from "lodash/noop";
@@ -13,19 +13,19 @@ function W({
   messageLoop: T = !0,
   tips: a = [],
   tipsDuration: u = 5e3,
-  maybeDuration: v = 12e4,
+  maybeDuration: x = 12e4,
   speed: h = 1,
-  increaseSpeed: x = 0,
+  increaseSpeed: v = 0,
   ...I
 }) {
-  const g = M(), [d, N] = l(0), [y, k] = l(h), [w, A] = l(0), [O, S] = l(null), [j, p] = l(!m), C = $((/* @__PURE__ */ new Date()).getTime());
+  const g = B(), [p, N] = l(0), [y, k] = l(h), [w, A] = l(0), [O, S] = l(null), [j, d] = l(!m), C = $((/* @__PURE__ */ new Date()).getTime());
   Array.isArray(r) || (r = [r]), c(() => {
-    m || (p(!0), (async () => {
+    m || (d(!0), (async () => {
       try {
         const e = await (g.palette.mode === "dark" ? import("./dark-animation.json.js") : import("./default-animation.json.js"));
-        S(e.default || e), p(!1);
+        S(e.default || e), d(!1);
       } catch (e) {
-        console.error("Failed to load animation:", e), p(!1);
+        console.error("Failed to load animation:", e), d(!1);
       }
     })());
   }, [m, g.palette.mode]), c(() => {
@@ -42,15 +42,15 @@ function W({
     if (!a.length)
       return P;
     const t = setTimeout(() => {
-      let e = d + 1;
+      let e = p + 1;
       e >= a.length && (e = 0), N(e);
     }, u);
     return () => clearTimeout(t);
-  }, [a, u, d]), c(() => {
+  }, [a, u, p]), c(() => {
     const t = setTimeout(() => {
-      let i = ((/* @__PURE__ */ new Date()).getTime() - C.current) / v;
+      let i = ((/* @__PURE__ */ new Date()).getTime() - C.current) / x;
       i > 1 && (i = 1);
-      const D = h + x * i;
+      const D = h + v * i;
       k(D);
     }, 1e3);
     return () => clearTimeout(t);
@@ -89,7 +89,7 @@ function W({
     a.length ? /* @__PURE__ */ o("div", { className: "waiter-tips-container", children: a.map((t, e) => /* @__PURE__ */ o(
       "div",
       {
-        className: `waiter-tips-block ${d === e ? "show-tips" : ""}`,
+        className: `waiter-tips-block ${p === e ? "show-tips" : ""}`,
         children: t
       },
       e
@@ -108,7 +108,7 @@ W.propTypes = {
   maybeDuration: n.number,
   increaseSpeed: n.number
 };
-const q = R("div")`
+const q = R(M)`
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/Blocklet/blocklet.js

@@ -1,13 +1,13 @@
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import { isValidElement as f } from "react";
 import t from "prop-types";
-import { useTheme as C, useMediaQuery as S, Typography as n, CircularProgress as I } from "@mui/material";
-import B from "../Avatar/index.js";
-import P from "../Button/index.js";
-import A from "../Img/index.js";
-import { styled as D } from "../Theme/index.js";
+import { Box as C, useTheme as S, useMediaQuery as B, Typography as n, CircularProgress as I } from "@mui/material";
+import P from "../Avatar/index.js";
+import A from "../Button/index.js";
+import D from "../Img/index.js";
+import { styled as F } from "../Theme/index.js";
 import { strippedString as g } from "./utils.js";
-const F = D("div")`
+const H = F(C)`
   &.arcblock-blocklet {
     padding: ${(e) => e.theme.spacing(2)} ${(e) => e.theme.spacing(2)} 0
       ${(e) => e.theme.spacing(2)};
@@ -118,7 +118,7 @@ const F = D("div")`
     font-size: 12px;
   }
 `;
-function H({
+function j({
   title: e = "",
   did: c = null,
   description: l = "",
@@ -129,15 +129,15 @@ function H({
   buttonDisabled: d = !1,
   buttonLoading: a = !1,
   onButtonClick: b = null,
-  onMainClick: v = null,
-  className: _ = null,
+  onMainClick: _ = null,
+  className: v = null,
   ...x
 }) {
   const h = (k, M = () => !1) => (i, ...T) => {
     M() ? (i.preventDefault(), i.stopPropagation()) : k instanceof Function && (i.preventDefault(), i.stopPropagation(), k(...T));
-  }, w = h(b, () => !!(m || d || a)), y = C(), $ = S(y.breakpoints.up("sm")), N = h(v), z = $ ? 80 : 64;
-  return /* @__PURE__ */ o(F, { className: `${_} arcblock-blocklet`, ...x, children: /* @__PURE__ */ r("div", { className: "arcblock-blocklet__content", onClick: N, children: [
-    s ? /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(A, { src: s }) }) : c && /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(B, { did: c, size: z }) }),
+  }, w = h(b, () => !!(m || d || a)), y = S(), $ = B(y.breakpoints.up("sm")), N = h(_), z = $ ? 80 : 64;
+  return /* @__PURE__ */ o(H, { className: `${v} arcblock-blocklet`, ...x, children: /* @__PURE__ */ r("div", { className: "arcblock-blocklet__content", onClick: N, children: [
+    s ? /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(D, { src: s }) }) : c && /* @__PURE__ */ o("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ o(P, { did: c, size: z }) }),
     /* @__PURE__ */ r("div", { className: "arcblock-blocklet__info", children: [
       /* @__PURE__ */ r("div", { className: "arcblock-blocklet__text", children: [
         f(e) ? /* @__PURE__ */ o(n, { component: "h3", variant: "h3", className: "arcblock-blocklet__title", children: e }) : /* @__PURE__ */ o(
@@ -172,7 +172,7 @@ function H({
           },
           children: [
             /* @__PURE__ */ o("div", { onClick: w, style: { marginRight: "12px" }, children: m || b && /* @__PURE__ */ r(
-              P,
+              A,
               {
                 className: "arcblock-blocklet__button--hover",
                 variant: "outlined",
@@ -198,7 +198,7 @@ function H({
     ] })
   ] }) });
 }
-H.propTypes = {
+j.propTypes = {
   title: t.string || t.node,
   did: t.string,
   description: t.string || t.node,
@@ -213,5 +213,5 @@ H.propTypes = {
   className: t.string
 };
 export {
-  H as default
+  j as default
 };

package/lib/Blocklet/utils.d.ts

@@ -1,3 +1,3 @@
 export default ActionButton;
 export function strippedString(originalString?: string): string;
-declare const ActionButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ActionButton: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/Blocklet/utils.js

@@ -1,5 +1,6 @@
-import { styled as o } from "../Theme/index.js";
-const e = o("div")`
+import { Box as o } from "@mui/material";
+import { styled as r } from "../Theme/index.js";
+const a = r(o)`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;
@@ -48,8 +49,8 @@ const e = o("div")`
       color: ${(t) => t.theme.palette.common.white}!important;
     }
   }
-`, i = (t = "") => t.replace(/(<([^>]+)>)/gi, "").trim();
+`, n = (t = "") => t.replace(/(<([^>]+)>)/gi, "").trim();
 export {
-  e as default,
-  i as strippedString
+  a as default,
+  n as strippedString
 };

package/lib/BlockletNFT/index.js

@@ -1,13 +1,13 @@
 import { jsxs as a, jsx as t, Fragment as F } from "react/jsx-runtime";
 import { useRef as I } from "react";
 import o from "prop-types";
-import { useTheme as q, useMediaQuery as m, Typography as f, Portal as A, CircularProgress as O } from "@mui/material";
-import W from "../Avatar/index.js";
-import Z from "../Icon/index.js";
-import E from "../Button/index.js";
-import H from "../Img/index.js";
-import { styled as Q } from "../Theme/index.js";
-function U(e, s = 1) {
+import { Box as q, useTheme as A, useMediaQuery as m, Typography as f, Portal as O, CircularProgress as W } from "@mui/material";
+import Z from "../Avatar/index.js";
+import E from "../Icon/index.js";
+import H from "../Button/index.js";
+import Q from "../Img/index.js";
+import { styled as U } from "../Theme/index.js";
+function G(e, s = 1) {
   let c = e;
   const r = ["", "k", "m", "b"];
   let i = 0;
@@ -15,7 +15,7 @@ function U(e, s = 1) {
     c = (c / 1e3).toFixed(s), i += 1;
   return e && `${c}${r[i]}`;
 }
-const G = Q("div")`
+const J = U(q)`
   &.arcblock-blocklet {
     padding: 0 16px;
     background: ${(e) => e.theme.palette.common.white};
@@ -182,12 +182,12 @@ const G = Q("div")`
   }
 `;
 function v({ name: e }) {
-  return /* @__PURE__ */ t(Z, { name: e, color: "inherit", size: 15, style: { marginRight: 8 } });
+  return /* @__PURE__ */ t(E, { name: e, color: "inherit", size: 15, style: { marginRight: 8 } });
 }
 v.propTypes = {
   name: o.string.isRequired
 };
-function J({
+function K({
   title: e,
   did: s = void 0,
   description: c = null,
@@ -203,31 +203,31 @@ function J({
   onMainClick: N = null,
   className: C = null,
   scaleClickZone: $ = 1.5,
-  ...M
+  ...B
 }) {
   const x = (l, k = () => !1) => (d, ...j) => {
     k() ? (d.preventDefault(), d.stopPropagation()) : l instanceof Function && (d.preventDefault(), d.stopPropagation(), l(...j));
-  }, S = x(_, () => !!(h || u || b)), T = x(N), p = q(), B = m(p.breakpoints.down("md")), P = m(p.breakpoints.down("lg")), D = m(p.breakpoints.up("lg")), n = i === "auto" ? B ? "xs" : P ? "sm" : "md" : i, R = i === "auto" ? D ? 80 : 40 : i === "md" ? 80 : 40, g = I(null);
+  }, M = x(_, () => !!(h || u || b)), S = x(N), p = A(), T = m(p.breakpoints.down("md")), P = m(p.breakpoints.down("lg")), D = m(p.breakpoints.up("lg")), n = i === "auto" ? T ? "xs" : P ? "sm" : "md" : i, R = i === "auto" ? D ? 80 : 40 : i === "md" ? 80 : 40, g = I(null);
   return /* @__PURE__ */ a(
-    G,
+    J,
     {
-      ...M,
+      ...B,
       scaleClickZone: $,
       className: `${C} arcblock-blocklet arcblock-blocklet--size-${n}`,
       children: [
-        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content", children: /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content--main", onClick: T, ref: g, children: /* @__PURE__ */ a("div", { className: "arcblock-blocklet__content--body", children: [
-          r ? /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(H, { src: r }) }) : s && /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(W, { did: s, size: R }) }),
+        /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content", children: /* @__PURE__ */ t("div", { className: "arcblock-blocklet__content--main", onClick: S, ref: g, children: /* @__PURE__ */ a("div", { className: "arcblock-blocklet__content--body", children: [
+          r ? /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(Q, { src: r }) }) : s && /* @__PURE__ */ t("div", { className: "arcblock-blocklet__cover", children: /* @__PURE__ */ t(Z, { did: s, size: R }) }),
           /* @__PURE__ */ a("div", { className: "arcblock-blocklet__info", children: [
             /* @__PURE__ */ t(f, { component: "h3", variant: "h3", className: "arcblock-blocklet__title", title: e, children: e }),
             c && /* @__PURE__ */ t(f, { component: "div", variant: "body2", className: "arcblock-blocklet__describe", title: c, children: c }),
-            ["md", "sm", "xs"].includes(n) && /* @__PURE__ */ t(A, { container: g.current, disablePortal: n === "md", children: /* @__PURE__ */ t(
+            ["md", "sm", "xs"].includes(n) && /* @__PURE__ */ t(O, { container: g.current, disablePortal: n === "md", children: /* @__PURE__ */ t(
               "div",
               {
                 className: "arcblock-blocklet__button",
-                onClick: S,
+                onClick: M,
                 style: { display: z ? "block" : "" },
                 children: h || _ && /* @__PURE__ */ a(
-                  E,
+                  H,
                   {
                     className: "arcblock-blocklet__button--hover",
                     variant: "outlined",
@@ -237,7 +237,7 @@ function J({
                     style: n === "md" ? { padding: "3px 20px", fontSize: "14px" } : { padding: "3px 15px", minWidth: "54px", fontSize: "13px" },
                     children: [
                       b && /* @__PURE__ */ t(
-                        O,
+                        W,
                         {
                           size: n === "md" ? 15 : 13,
                           style: { marginRight: 3, color: "inherit" }
@@ -260,7 +260,7 @@ function J({
             title: l.title,
             children: l.empty ? null : /* @__PURE__ */ a(F, { children: [
               /* @__PURE__ */ t(v, { name: l.icon }),
-              l.pretty ? U(l.value) : l.value
+              l.pretty ? G(l.value) : l.value
             ] })
           },
           k
@@ -269,7 +269,7 @@ function J({
     }
   );
 }
-J.propTypes = {
+K.propTypes = {
   title: o.string.isRequired,
   did: o.string,
   isStickyButton: o.bool,
@@ -287,5 +287,5 @@ J.propTypes = {
   scaleClickZone: o.number
 };
 export {
-  J as default
+  K as default
 };

package/lib/BlockletV2/utils.d.ts

@@ -1,4 +1,4 @@
 export default ActionButton;
 export function strippedString(originalString?: string): string;
 export function formatDownloadCount(num?: string): string | number;
-declare const ActionButton: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ActionButton: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/BlockletV2/utils.js

@@ -1,5 +1,6 @@
-import { styled as r } from "../Theme/index.js";
-const i = r("div")`
+import { Box as r } from "@mui/material";
+import { styled as e } from "../Theme/index.js";
+const a = e(r)`
   background-color: transparent !important;
   & > :not(.Mui-disabled) {
     position: relative;
@@ -48,12 +49,12 @@ const i = r("div")`
       color: ${(t) => t.theme.palette.common.white}!important;
     }
   }
-`, n = (t = "") => t.replace(/(<([^>]+)>)/gi, "").trim(), a = (t = "") => {
+`, s = (t = "") => t.replace(/(<([^>]+)>)/gi, "").trim(), p = (t = "") => {
   const o = parseInt(t, 10);
   return Number.isNaN(o) ? t : o < 1e3 ? o : o < 1e6 ? `${(o / 1e3).toFixed(1)}k` : o < 1e9 ? `${(o / 1e6).toFixed(1)}m` : `${(o / 1e9).toFixed(1)}b`;
 };
 export {
-  i as default,
-  a as formatDownloadCount,
-  n as strippedString
+  a as default,
+  p as formatDownloadCount,
+  s as strippedString
 };

package/lib/Center/index.js

@@ -1,6 +1,7 @@
-import { jsx as n } from "react/jsx-runtime";
-import { styled as r } from "../Theme/index.js";
-function o({
+import { jsx as r } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
+import { styled as o } from "../Theme/index.js";
+function m({
   children: e = null,
   relative: i = "screen"
 }) {
@@ -8,9 +9,9 @@ function o({
   return i === "parent" && (t = {
     width: "100%",
     height: "100%"
-  }), /* @__PURE__ */ n(l, { style: t, children: e });
+  }), /* @__PURE__ */ r(l, { style: t, children: e });
 }
-const l = r("div")`
+const l = o(n)`
   flex: 1;
   width: 100vw;
   height: 100vh;
@@ -20,5 +21,5 @@ const l = r("div")`
   align-items: center;
 `;
 export {
-  o as default
+  m as default
 };

package/lib/CodeBlock/LightBox.d.ts

@@ -1,5 +1,4 @@
-declare const LightBox: import('@emotion/styled').StyledComponent<{
+declare const LightBox: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & {
     theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, {}, {}>;
 export default LightBox;

package/lib/CodeBlock/LightBox.js

@@ -1,5 +1,6 @@
 import l from "@emotion/styled";
-const t = l("div")`
+import { Box as s } from "@mui/material";
+const e = l(s)`
   display: block;
   pre code.hljs {
     display: block;
@@ -82,5 +83,5 @@ const t = l("div")`
   }
 `;
 export {
-  t as default
+  e as default
 };

package/lib/CookieConsent/index.js

@@ -43,7 +43,7 @@ function h({
     }
   ) }));
 }
-const c = p("div")`
+const c = p(Box)`
   box-sizing: border-box;
   position: fixed;
   right: 20px;

package/lib/CountDown/index.js

@@ -1,31 +1,32 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
 import { Component as b } from "react";
+import { Box as y } from "@mui/material";
 import p from "lodash/isUndefined";
-import { getColor as u, mergeProps as y } from "../Util/index.js";
-import { styled as k } from "../Theme/index.js";
-const c = 60, d = 60 * c, m = 24 * d;
+import { getColor as u, mergeProps as k } from "../Util/index.js";
+import { styled as N } from "../Theme/index.js";
+const d = 60, c = 60 * d, m = 24 * c;
 function h(e) {
-  const n = (/* @__PURE__ */ new Date()).getTime(), t = Math.round((e - n) / 1e3), i = Math.floor(t / m), r = Math.floor(t % m / d), o = Math.floor(t % m % d / c), a = Math.round(t % m % d % c);
-  return { days: i, hours: r, minutes: o, seconds: a, done: t <= 0 };
+  const n = (/* @__PURE__ */ new Date()).getTime(), t = Math.round((e - n) / 1e3), i = Math.floor(t / m), s = Math.floor(t % m / c), o = Math.floor(t % m % c / d), a = Math.round(t % m % c % d);
+  return { days: i, hours: s, minutes: o, seconds: a, done: t <= 0 };
 }
 function l({ number: e, label: n, length: t = 2 }) {
   let i = e.toString();
   for (; i.length < t; )
     i = `0${i}`;
-  const r = i.split("");
+  const s = i.split("");
   return /* @__PURE__ */ g("span", { className: "num-group", children: [
-    /* @__PURE__ */ s("span", { className: "num-items", children: r.map((o, a) => (
+    /* @__PURE__ */ r("span", { className: "num-items", children: s.map((o, a) => (
       // eslint-disable-next-line react/no-array-index-key
-      /* @__PURE__ */ s("strong", { className: "num-item", children: o }, `num-${a}`)
+      /* @__PURE__ */ r("strong", { className: "num-item", children: o }, `num-${a}`)
     )) }),
-    /* @__PURE__ */ s("span", { className: "num-label", children: n })
+    /* @__PURE__ */ r("span", { className: "num-label", children: n })
   ] });
 }
 class f extends b {
   constructor(n) {
     const t = Object.assign({}, n);
     p(t.dark) && (t.dark = !0), p(t.style) && (t.style = {}), super(t);
-    const i = y(t, f, ["dark", "endTime", "style"]);
+    const i = k(t, f, ["dark", "endTime", "style"]);
     this.state = h(i.endTime), this.timer = void 0;
   }
   componentDidMount() {
@@ -38,20 +39,20 @@ class f extends b {
     this.timer && (clearInterval(this.timer), this.timer = void 0);
   }
   render() {
-    const { dark: n, endTime: t, ...i } = this.props, { days: r, hours: o, minutes: a, seconds: x } = this.state;
-    return /* @__PURE__ */ g(w, { dark: n, ...i, children: [
-      /* @__PURE__ */ s(l, { number: r, label: "D" }),
-      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
-      /* @__PURE__ */ s(l, { number: o, label: "H" }),
-      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
-      /* @__PURE__ */ s(l, { number: a, label: "M" }),
-      /* @__PURE__ */ s("span", { className: "num-sep", children: ":" }),
-      /* @__PURE__ */ s(l, { number: x, label: "S" })
+    const { dark: n, endTime: t, ...i } = this.props, { days: s, hours: o, minutes: a, seconds: x } = this.state;
+    return /* @__PURE__ */ g(v, { dark: n, ...i, children: [
+      /* @__PURE__ */ r(l, { number: s, label: "D" }),
+      /* @__PURE__ */ r("span", { className: "num-sep", children: ":" }),
+      /* @__PURE__ */ r(l, { number: o, label: "H" }),
+      /* @__PURE__ */ r("span", { className: "num-sep", children: ":" }),
+      /* @__PURE__ */ r(l, { number: a, label: "M" }),
+      /* @__PURE__ */ r("span", { className: "num-sep", children: ":" }),
+      /* @__PURE__ */ r(l, { number: x, label: "S" })
     ] });
   }
 }
-const N = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`, w = k("div", { shouldForwardProp: (e) => e !== "dark" })`
+const w = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`, v = N(y, { shouldForwardProp: (e) => e !== "dark" })`
   color: ${(e) => u(e)};
   font-size: 50px;
   display: flex;
@@ -83,7 +84,7 @@ linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0,
       width: 40px;
       height: 60px;
       line-height: 60px;
-      background-image: ${(e) => e.dark ? N : "none"};
+      background-image: ${(e) => e.dark ? w : "none"};
       text-align: center;
 
       &:first-of-type {