@blocklet/ui-react 3.0.11 → 3.0.12

package/lib/Footer/brand.js

@@ -1,15 +1,15 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { isValidElement as l } from "react";
+import { isValidElement as s } from "react";
 import i from "prop-types";
-import { styled as s } from "@arcblock/ux/lib/Theme";
-import { Box as m } from "@mui/material";
-function p({ name: e = "", logo: t = "", description: r = "", ...a }) {
+import { styled as m } from "@arcblock/ux/lib/Theme";
+import { Box as a } from "@mui/material";
+function p({ name: e = "", logo: t = "", description: r = "", ...d }) {
   if (!e && !t && !r)
     return null;
-  const d = l(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
-  return /* @__PURE__ */ n(h, { ...a, children: [
+  const l = s(t) ? t : /* @__PURE__ */ o("img", { src: t, alt: e });
+  return /* @__PURE__ */ n(h, { ...d, children: [
     /* @__PURE__ */ n("div", { children: [
-      t && /* @__PURE__ */ o(m, { component: "a", href: "/", className: "footer-brand-logo", children: d }),
+      t && /* @__PURE__ */ o(a, { component: "a", href: "/", className: "footer-brand-logo", children: l }),
       e && /* @__PURE__ */ o("div", { className: "footer-brand-name", children: e })
     ] }),
     r && /* @__PURE__ */ o("div", { className: "footer-brand-desc", children: r })
@@ -20,7 +20,7 @@ p.propTypes = {
   logo: i.node,
   description: i.string
 };
-const h = s("div")`
+const h = m(a)`
   display: flex;
   flex-direction: column;
   font-size: 14px;

package/lib/Footer/layout/plain.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as n, Fragment as a } from "react/jsx-runtime";
 import { cloneElement as l } from "react";
 import e from "prop-types";
-import { Container as r } from "@mui/material";
-import { styled as p } from "@arcblock/ux/lib/Theme";
-import d from "./row.js";
-function s({ elements: i, data: m, ...o }) {
-  return /* @__PURE__ */ t(c, { ...o, children: /* @__PURE__ */ t(r, { style: { padding: 0 }, children: /* @__PURE__ */ n(r, { className: "plain-layout-container", children: [
-    i.links && /* @__PURE__ */ n(d, { sx: { width: 1 }, autoCenter: !0, children: [
+import { Box as p, Container as r } from "@mui/material";
+import { styled as d } from "@arcblock/ux/lib/Theme";
+import s from "./row.js";
+function c({ elements: i, data: u, ...o }) {
+  return /* @__PURE__ */ t(m, { ...o, children: /* @__PURE__ */ t(r, { style: { padding: 0 }, children: /* @__PURE__ */ n(r, { className: "plain-layout-container", children: [
+    i.links && /* @__PURE__ */ n(s, { sx: { width: 1 }, autoCenter: !0, children: [
       i.copyright,
       i.links
     ] }),
@@ -16,7 +16,7 @@ function s({ elements: i, data: m, ...o }) {
     ] })
   ] }) }) });
 }
-s.propTypes = {
+c.propTypes = {
   elements: e.shape({
     brand: e.element,
     navigation: e.element,
@@ -26,7 +26,7 @@ s.propTypes = {
   }).isRequired,
   data: e.object.isRequired
 };
-const c = p("div")`
+const m = d(p)`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;
@@ -37,5 +37,5 @@ const c = p("div")`
   }
 `;
 export {
-  s as default
+  c as default
 };

package/lib/Footer/layout/standard.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import o from "prop-types";
 import m from "clsx";
-import { Container as t, Box as r } from "@mui/material";
+import { Box as r, Container as t } from "@mui/material";
 import { styled as x } from "@arcblock/ux/lib/Theme";
 import f from "./row.js";
 function h({ elements: e, data: l, className: s = "", ...p }) {
@@ -79,7 +79,7 @@ h.propTypes = {
   data: o.object.isRequired,
   className: o.string
 };
-const g = x("div")`
+const g = x(r)`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {

package/lib/Footer/links.js

@@ -5,13 +5,14 @@ import { useCreation as $ } from "ahooks";
 import j from "lodash/isInteger";
 import I from "lodash/isString";
 import { styled as z } from "@arcblock/ux/lib/Theme";
+import { Box as M } from "@mui/material";
 import c from "clsx";
-import { ExpandMore as M } from "@mui/icons-material";
-import C from "../Icon/index.js";
-import A from "../hooks/use-mobile.js";
-import { splitNavColumns as E } from "../utils.js";
-function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
-  const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((t) => t.items?.length), k = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
+import { ExpandMore as C } from "@mui/icons-material";
+import A from "../Icon/index.js";
+import E from "../hooks/use-mobile.js";
+import { splitNavColumns as F } from "../utils.js";
+function R({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
+  const [g, b] = N(-1), y = E({ key: "md" }), h = e.some((t) => t.items?.length), x = !y && h && j(u) && u > 1, p = ({ label: t, link: o, icon: i, render: a, props: n }) => {
     let s = t;
     if (a)
       s = a({ label: t, link: o, props: n });
@@ -30,10 +31,10 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
       );
     }
     return /* @__PURE__ */ m(v, { children: [
-      i && /* @__PURE__ */ r(C, { icon: i, size: 20, sx: { mr: 0.5 } }),
+      i && /* @__PURE__ */ r(A, { icon: i, size: 20, sx: { mr: 0.5 } }),
       s
     ] });
-  }, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : k ? E(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
+  }, w = $(() => e?.length ? d ? e.map((t, o) => /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(t) }, o)) : x ? F(e, { columns: u }).map((t, o) => /* @__PURE__ */ r("div", { className: "footer-links-column", children: t.filter((i) => i.group).map((i, a) => {
     const { items: n } = i;
     return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
       /* @__PURE__ */ r("span", { className: "footer-links-item", children: p(i) }),
@@ -59,7 +60,7 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
           /* @__PURE__ */ m("span", { className: "footer-links-item", children: [
             p(t),
             !!i?.length && /* @__PURE__ */ r("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ r(
-              M,
+              C,
               {
                 style: {
                   transform: `rotate(${a ? 180 : 0}deg)`
@@ -72,21 +73,21 @@ function F({ links: e = [], flowLayout: d = !1, columns: u, ...x }) {
       },
       o
     );
-  }) : null, [e, d, k, g]);
+  }) : null, [e, d, x, g]);
   return e?.length ? /* @__PURE__ */ r(
-    R,
+    S,
     {
-      ...x,
-      className: c(x.className, {
+      ...k,
+      className: c(k.className, {
         "footer-links--grouped": h,
         "footer-links--flow": d,
-        "footer-links--columns": k
+        "footer-links--columns": x
       }),
       children: /* @__PURE__ */ r("div", { className: "footer-links-inner", children: w })
     }
   ) : null;
 }
-F.propTypes = {
+R.propTypes = {
   links: l.arrayOf(
     l.shape({
       label: l.string,
@@ -100,7 +101,7 @@ F.propTypes = {
   // 列布局
   columns: l.number.isRequired
 };
-const R = z("div")`
+const S = z(M)`
   overflow: hidden;
   color: ${({ theme: e }) => e.palette.text.secondary};
   .footer-links-inner {
@@ -250,5 +251,5 @@ const R = z("div")`
   }
 `;
 export {
-  F as default
+  R as default
 };

package/lib/Footer/social-media.js

@@ -1,30 +1,31 @@
-import { jsx as o } from "react/jsx-runtime";
-import t from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import o from "prop-types";
 import { styled as a } from "@arcblock/ux/lib/Theme";
-import l from "../Icon/index.js";
-function p({ items: e = null, ...n }) {
-  return e?.length ? /* @__PURE__ */ o(c, { ...n, children: e.map((r, i) => /* @__PURE__ */ o(
+import { Box as l } from "@mui/material";
+import p from "../Icon/index.js";
+function c({ items: e = null, ...n }) {
+  return e?.length ? /* @__PURE__ */ t(s, { ...n, children: e.map((r, i) => /* @__PURE__ */ t(
     "a",
     {
       href: r.link,
       target: "_blank",
       "aria-label": `Social media icon${r.title ? ` for ${r.title}` : ""}`,
       rel: "noreferrer",
-      children: /* @__PURE__ */ o(l, { icon: r.icon || r.title, size: 24, component: "span" })
+      children: /* @__PURE__ */ t(p, { icon: r.icon || r.title, size: 24, component: "span" })
     },
     i
   )) }) : null;
 }
-p.propTypes = {
-  items: t.arrayOf(
-    t.shape({
+c.propTypes = {
+  items: o.arrayOf(
+    o.shape({
       // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-      icon: t.string,
-      link: t.string
+      icon: o.string,
+      link: o.string
     })
   )
 };
-const c = a("div")`
+const s = a(l)`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -43,5 +44,5 @@ const c = a("div")`
   }
 `;
 export {
-  p as default
+  c as default
 };

package/lib/UserCenter/components/notification.js

@@ -37,6 +37,7 @@ function y({
         /* @__PURE__ */ h(
           A,
           {
+            component: "div",
             onClick: r,
             sx: {
               color: "text.primary",

package/lib/UserCenter/components/user-center.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as f, Fragment as D } from "react/jsx-runtime";
 import { use as fe } from "react";
-import { Box as a, Typography as pe, CircularProgress as me, Divider as he } from "@mui/material";
+import { styled as oe, Box as a, Typography as pe, CircularProgress as me, Divider as he } from "@mui/material";
 import { useMemoizedFn as y, useCreation as d, useRequest as Y } from "ahooks";
 import xe from "p-wait-for";
 import { SessionContext as ge } from "@arcblock/did-connect/lib/Session";
@@ -12,7 +12,6 @@ import { useConfirm as ye } from "@arcblock/ux/lib/Dialog";
 import { translate as Ce } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback as Pe } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled as oe } from "@arcblock/ux/lib/Theme";
 import Se from "lodash/cloneDeep";
 import { joinURL as C, getQuery as De, withoutTrailingSlash as Z, withQuery as $ } from "ufo";
 import { PROFILE_URL as k } from "@arcblock/ux/lib/Util/constant";
@@ -64,7 +63,7 @@ const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe
     }
   }
 }));
-function Sr({
+function Pr({
   children: v,
   notLoginContent: L = null,
   currentTab: h,
@@ -440,5 +439,5 @@ function Sr({
   );
 }
 export {
-  Sr as default
+  Pr as default
 };

package/lib/UserCenter/components/user-info/user-info-item.js

@@ -1,20 +1,20 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { Box as n, Typography as o } from "@mui/material";
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Box as o, Typography as r } from "@mui/material";
 import { Verified as l } from "@mui/icons-material";
-function x({ data: e, verified: s = !1, ...r }) {
+function x({ data: e, verified: s = !1, ...i }) {
   return /* @__PURE__ */ t(
-    n,
+    o,
     {
-      ...r,
+      ...i,
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        ...r.sx
+        ...i.sx
       },
       children: [
         /* @__PURE__ */ t(
-          o,
+          r,
           {
             sx: {
               display: "flex",
@@ -31,7 +31,7 @@ function x({ data: e, verified: s = !1, ...r }) {
           }
         ),
         /* @__PURE__ */ t(
-          n,
+          o,
           {
             sx: {
               display: "flex",
@@ -39,9 +39,10 @@ function x({ data: e, verified: s = !1, ...r }) {
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ i(
-                o,
+              /* @__PURE__ */ n(
+                r,
                 {
+                  component: "div",
                   sx: {
                     color: "text.secondary",
                     whiteSpace: "pre-wrap",
@@ -50,7 +51,7 @@ function x({ data: e, verified: s = !1, ...r }) {
                   children: e.content
                 }
               ),
-              s && /* @__PURE__ */ i(l, { color: "success", style: { fontSize: 16, marginLeft: 4 } })
+              s && /* @__PURE__ */ n(l, { color: "success", style: { fontSize: 16, marginLeft: 4 } })
             ]
           }
         )

package/lib/UserCenter/components/user-info/user-status.js

@@ -1,7 +1,7 @@
-import { jsxs as w, jsx as s } from "react/jsx-runtime";
-import { Tooltip as E, Box as H, Badge as z } from "@mui/material";
+import { jsxs as E, jsx as s } from "react/jsx-runtime";
+import { Box as I, Tooltip as H, Badge as z } from "@mui/material";
 import B from "@emotion/styled";
-import { lazy as c, useState as k, useEffect as U, useCallback as q, useMemo as A, Suspense as F } from "react";
+import { lazy as c, useState as v, useEffect as U, useCallback as q, useMemo as A, Suspense as F } from "react";
 import { useMemoizedFn as C, useInterval as L, useUnmount as Q, useCreation as G } from "ahooks";
 import { useLocaleContext as J } from "@arcblock/ux/lib/Locale/context";
 import { translate as K } from "@arcblock/ux/lib/Locale/util";
@@ -38,21 +38,21 @@ const _ = c(() => import("@arcblock/icons/lib/Meeting")), tt = c(() => import("@
     durationName: "userStatus.duration.ThisWeek"
   }
 };
-function vt({
+function yt({
   isMobile: t = void 0,
-  size: I,
+  size: R,
   isMyself: h,
   status: i,
   onChange: d,
-  timezone: R = void 0
+  timezone: W = void 0
 }) {
-  const { locale: l } = J(), u = C((n, e = {}) => K(X, n, l, "en", e)), [W, m] = k(void 0), p = C(() => {
+  const { locale: l } = J(), u = C((n, e = {}) => K(X, n, l, "en", e)), [b, m] = v(void 0), p = C(() => {
     m(void 0);
   });
   U(() => {
     m(1e3);
   }, [i]);
-  const b = L(() => {
+  const N = L(() => {
     if (i?.value && i?.dateRange?.length === 2) {
       if (T(i))
         return;
@@ -64,11 +64,11 @@ function vt({
       }
     } else
       p();
-  }, W);
+  }, b);
   Q(() => {
-    b();
+    N();
   });
-  const [N, g] = k(null), S = q(() => Object.keys(a).map((e) => ({
+  const [O, g] = v(null), S = q(() => Object.keys(a).map((e) => ({
     id: a[e],
     name: u(`userStatus.duration.${e}`)
   })), [u]), f = G(() => {
@@ -83,49 +83,49 @@ function vt({
         children: n
       };
     });
-  }, [u, S, l]), O = (n) => {
+  }, [u, S, l]), D = (n) => {
     h && g(n.currentTarget);
   }, x = () => {
     g(null);
-  }, D = (n) => {
+  }, j = (n) => {
     h && (d(n), x());
-  }, v = $[i?.value], j = A(() => {
+  }, y = $[i?.value], M = A(() => {
     const n = f.find((e) => e.id === i?.value);
     if (n) {
       const e = l === "zh" ? "zh-cn" : "en-us";
       let r;
-      return T(i) || (r = i?.dateRange?.map((M) => P(M, { locale: e }))), r && r.length > 0 ? `${n.name}: ${r.join("~")}` : n.name;
+      return T(i) || (r = i?.dateRange?.map((w) => P(w, { locale: e }))), r && r.length > 0 ? `${n.name}: ${r.join("~")}` : n.name;
     }
     return null;
-  }, [i, f, l]), y = !!N;
-  return /* @__PURE__ */ w(rt, { size: I, isMobile: t, children: [
-    /* @__PURE__ */ s(E, { title: j, children: /* @__PURE__ */ s(
-      H,
+  }, [i, f, l]), k = !!O;
+  return /* @__PURE__ */ E(rt, { size: R, isMobile: t, children: [
+    /* @__PURE__ */ s(H, { title: M, children: /* @__PURE__ */ s(
+      I,
       {
         className: "status-icon",
-        onClick: O,
+        onClick: D,
         sx: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: v ? /* @__PURE__ */ s(F, { fallback: null, children: /* @__PURE__ */ s(v, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ s(z, { color: "success", variant: "dot" })
+        children: y ? /* @__PURE__ */ s(F, { fallback: null, children: /* @__PURE__ */ s(y, { style: { width: 16, height: 16 } }) }) : /* @__PURE__ */ s(z, { color: "success", variant: "dot" })
       }
     ) }),
-    y && /* @__PURE__ */ s(
+    k && /* @__PURE__ */ s(
       V,
       {
         selected: i,
         data: f,
-        open: y,
-        onSelect: D,
+        open: k,
+        onSelect: j,
         onClose: x,
-        timezone: R
+        timezone: W
       }
     )
   ] });
 }
-const rt = B("div")`
+const rt = B(I)`
   position: absolute;
   left: ${({ size: t }) => `${t * 3 / 4}px`};
   top: ${({ size: t }) => `${t * 0.65}px`};
@@ -149,5 +149,5 @@ const rt = B("div")`
   }
 `;
 export {
-  vt as default
+  yt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.45",
     "@abtnode/util": "^1.16.45",
-    "@arcblock/bridge": "3.0.11",
-    "@arcblock/icons": "3.0.11",
-    "@arcblock/react-hooks": "3.0.11",
+    "@arcblock/bridge": "3.0.12",
+    "@arcblock/icons": "3.0.12",
+    "@arcblock/react-hooks": "3.0.12",
     "@arcblock/ws": "^1.20.15",
     "@blocklet/constant": "^1.16.45",
     "@blocklet/did-space-react": "^1.1.0",
@@ -90,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "3619d5d23622fb8074ace5f6c685bcc25c14c056"
+  "gitHead": "ebe824e4b0ddfc1cbdd9ffecc22283e57a58c042"
 }

package/src/Footer/brand.jsx

@@ -31,7 +31,7 @@ Brand.propTypes = {
   description: PropTypes.string,
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   display: flex;
   flex-direction: column;
   font-size: 14px;

package/src/Footer/layout/plain.jsx

@@ -1,6 +1,6 @@
 import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { Container } from '@mui/material';
+import { Box, Container } from '@mui/material';
 import { styled } from '@arcblock/ux/lib/Theme';
 import Row from './row';
 
@@ -41,7 +41,7 @@ PlainLayout.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   padding: 24px 0;
   .plain-layout-container {
     display: flex;

package/src/Footer/layout/standard.jsx

@@ -92,7 +92,7 @@ StandardLayout.propTypes = {
   className: PropTypes.string,
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   padding: 32px 0 24px 0;
   .footer-brand-name,
   .footer-brand-desc {

package/src/Footer/links.jsx

@@ -5,6 +5,7 @@ import { useCreation } from 'ahooks';
 import isInteger from 'lodash/isInteger';
 import isString from 'lodash/isString';
 import { styled } from '@arcblock/ux/lib/Theme';
+import { Box } from '@mui/material';
 import clsx from 'clsx';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import Icon from '../Icon';
@@ -162,7 +163,7 @@ Links.propTypes = {
   columns: PropTypes.number.isRequired,
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   overflow: hidden;
   color: ${({ theme }) => theme.palette.text.secondary};
   .footer-links-inner {

package/src/Footer/social-media.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
+import { Box } from '@mui/material';
+
 import Icon from '../Icon';
 
 export default function SocialMedia({ items = null, ...rest }) {
@@ -35,7 +37,7 @@ SocialMedia.propTypes = {
   ),
 };
 
-const Root = styled('div')`
+const Root = styled(Box)`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;

package/src/UserCenter/components/notification.tsx

@@ -44,6 +44,7 @@ function NotificationItem({
       }}>
       <Switch checked={value} size="small" onChange={onChange} />
       <Typography
+        component="div"
         onClick={handleClick}
         sx={{
           color: 'text.primary',

package/src/UserCenter/components/user-center.tsx

@@ -1,5 +1,5 @@
 import { use } from 'react';
-import { Box, CircularProgress, Divider, Typography } from '@mui/material';
+import { Box, CircularProgress, Divider, Typography, styled } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
@@ -13,7 +13,6 @@ import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { styled } from '@arcblock/ux/lib/Theme';
 import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery, joinURL, withoutTrailingSlash } from 'ufo';
 import type { AxiosError } from 'axios';

package/src/UserCenter/components/user-info/user-info-item.tsx

@@ -39,6 +39,7 @@ export default function UserInfoItem({ data, verified = false, ...rest }: TUserI
           alignItems: 'center',
         }}>
         <Typography
+          component="div"
           sx={{
             color: 'text.secondary',
             whiteSpace: 'pre-wrap',

package/src/UserCenter/components/user-info/user-status.tsx

@@ -209,7 +209,7 @@ export default function UserStatus({
   );
 }
 
-const StatusDiv = styled('div')<{ size: number; isMobile?: boolean }>`
+const StatusDiv = styled(Box)<{ size: number; isMobile?: boolean }>`
   position: absolute;
   left: ${({ size }) => `${(size * 3) / 4}px`};
   top: ${({ size }) => `${size * 0.65}px`};