@arcblock/ux 3.0.43 → 3.1.0

package/lib/DIDConnect/did-connect-logo.js

@@ -1,10 +1,10 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "@arcblock/icons/lib/DidBrandConnect";
-import { useTheme as r } from "@mui/material";
-function d() {
-  const e = r();
-  return /* @__PURE__ */ t(o, { style: { filter: e.palette.mode === "dark" ? "invert(1)" : "none" } });
+import { jsx as e } from "react/jsx-runtime";
+import { useTheme as t } from "@mui/material";
+import r from "../DIDLogo/index.js";
+function i() {
+  const o = t();
+  return /* @__PURE__ */ e(r, { size: 16, name: "connect", dark: o.palette.mode === "dark" });
 }
 export {
-  d as default
+  i as default
 };

package/lib/DIDLogo/index.d.ts

@@ -0,0 +1,37 @@
+declare const presetMap: {
+    default: {
+        color: string;
+        text: undefined;
+    };
+    wallet: {
+        color: string;
+        text: string;
+    };
+    spaces: {
+        color: string;
+        text: string;
+    };
+    names: {
+        color: string;
+        text: string;
+    };
+    connect: {
+        color: string;
+        text: string;
+    };
+};
+export interface DIDLogoProps {
+    style?: React.CSSProperties;
+    size?: string | number;
+    className?: string;
+    color?: string;
+    text?: string;
+    textColor?: string;
+    fontSize?: string | number;
+    gap?: number;
+    variant?: 'contained' | 'default';
+    name?: keyof typeof presetMap;
+    dark?: boolean;
+}
+export default function DIDLogo({ style, className, size, color, text, textColor, fontSize, gap, variant, name, dark, }: DIDLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/DIDLogo/index.js

@@ -0,0 +1,114 @@
+import { jsxs as l, jsx as C, Fragment as f } from "react/jsx-runtime";
+import { useRef as g, useState as d, useEffect as P } from "react";
+const w = {
+  default: {
+    color: "#4598FA",
+    text: void 0
+  },
+  wallet: {
+    color: "#4598FA",
+    text: "Wallet"
+  },
+  spaces: {
+    color: "#8C6AFC",
+    text: "Spaces"
+  },
+  names: {
+    color: "#5D8BB4",
+    text: "Names"
+  },
+  connect: {
+    color: "#1DC1C7",
+    text: "Connect"
+  }
+};
+function H({
+  style: m = {},
+  className: B = "",
+  size: p = "1em",
+  color: v = void 0,
+  text: W = void 0,
+  textColor: S = void 0,
+  fontSize: h = void 0,
+  gap: x = 10,
+  variant: T = "default",
+  name: y = void 0,
+  dark: A = !1
+}) {
+  const c = T === "contained", M = w[y] || w.default, o = W || M?.text, F = v || M?.color, R = S || (A ? "white" : "#121212");
+  let e = 1, t = 80, n = h, i = x + 5;
+  !c && o && (t = 64, e = 1.25, i = x, h || (n = 32)), n = n || 40;
+  const Z = g(null), L = g(null), [z, D] = d(), [j, $] = d(t), [b, I] = d(t), N = c ? t / 2 + 5 : t / 2 + 3, r = t / 5;
+  P(() => {
+    if (L.current) {
+      const E = Z.current?.getBBox(), G = L.current.getBoundingClientRect(), a = E?.width || 0, O = G.height / t, u = t * e + a + (a ? i : 0);
+      I(u), $(t * e + (a ? i : 0)), D(u * O);
+    }
+  }, [o, i, e, t]);
+  const V = /* @__PURE__ */ l(f, { children: [
+    /* @__PURE__ */ C("rect", { ref: L, width: t, height: t, rx: r, fill: "currentColor", opacity: 0.1 }),
+    /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M63.660598583984374,17.9996337890625C67.41619858398437,17.9997131347625,70.46059858398438,21.0441537890625,70.46059858398438,24.7996337890625L70.46059858398438,55.4496337890625C70.46059858398438,59.2048337890625,67.41619858398437,62.2496337890625,63.660598583984374,62.2496337890625L15.999798583984376,62.2496337890625C12.244398583984374,62.2496337890625,9.199918364984375,59.2048337890625,9.199798583984375,55.4496337890625L9.199798583984375,54.6668337890625L13.199798583984375,54.6668337890625L13.199798583984375,55.4496337890625C13.199918583984374,56.9960337890625,14.453558583984375,58.2496337890625,15.999798583984376,58.2496337890625L63.660598583984374,58.2496337890625C65.20699858398437,58.2496337890625,66.46059858398438,56.9960337890625,66.46059858398438,55.4496337890625L66.46059858398438,24.7996337890625C66.46059858398438,23.2532737890625,65.20699858398437,21.9997137890625,63.660598583984374,21.9996337890625L15.999798583984376,21.9996337890625C14.453478583984374,21.9997137890625,13.199798583984375,23.2532737890625,13.199798583984375,24.7996337890625L13.199798583984375,25.7683937890625L9.199798583984375,25.7683937890625L9.199798583984375,24.7996337890625C9.199798583984375,21.0441537890625,12.244318583984375,17.9997131347625,15.999798583984376,17.9996337890625L63.660598583984374,17.9996337890625ZM16.728718583984374,29.982433789062497C18.729478583984374,29.982433789062497,20.462598583984374,30.4036337890625,21.927498583984374,31.2457337890625C23.410198583984375,32.0687337890625,24.562398583984375,33.2364337890625,25.384198583984375,34.7484337890625C26.205998583984375,36.2605337890625,26.616998583984376,38.0406337890625,26.616998583984376,40.088833789062505C26.616998583984376,42.117633789062495,26.205898583984375,43.8784337890625,25.384198583984375,45.3716337890625C24.562398583984375,46.8644337890625,23.410198583984375,48.0228337890625,21.927498583984374,48.845633789062504C20.462598583984374,49.668833789062504,18.729478583984374,50.0800337890625,16.728718583984374,50.0800337890625L9.734958583984374,50.0800337890625L9.734958583984374,29.982433789062497L16.728718583984374,29.982433789062497ZM32.97789858398437,50.0800337890625L29.360398583984374,50.0800337890625L29.360398583984374,29.982433789062497L32.97789858398437,29.982433789062497L32.97789858398437,50.0800337890625ZM43.629798583984375,29.982433789062497C45.63059858398437,29.982433789062497,47.36379858398438,30.4036337890625,48.82859858398437,31.2457337890625C50.31139858398438,32.0687337890625,51.46339858398437,33.2364337890625,52.285398583984374,34.7484337890625C53.10699858398438,36.2605337890625,53.51819858398437,38.0406337890625,53.51819858398437,40.088833789062505C53.51819858398437,42.117633789062495,53.10699858398438,43.8784337890625,52.285398583984374,45.3716337890625C51.46339858398437,46.8644337890625,50.31139858398438,48.0228337890625,48.82859858398437,48.845633789062504C47.36379858398438,49.668833789062504,45.63059858398437,50.0800337890625,43.629798583984375,50.0800337890625L36.63609858398438,50.0800337890625L36.63609858398438,29.982433789062497L43.629798583984375,29.982433789062497ZM58.98419858398437,42.9380337890625C60.101798583984376,42.9380337890625,61.008198583984374,43.8440337890625,61.008198583984374,44.9616337890625C61.008198583984374,46.0796337890625,60.101798583984376,46.9860337890625,58.98419858398437,46.9860337890625C57.86659858398438,46.985633789062504,56.96059858398438,46.0792337890625,56.96019858398437,44.9616337890625C56.96059858398438,43.8440337890625,57.86659858398438,42.9380337890625,58.98419858398437,42.9380337890625ZM13.352518583984375,46.8360337890625L16.621678583984377,46.8360337890625C18.640238583984377,46.8360337890625,20.194398583984373,46.2424337890625,21.284198583984377,45.0560337890625C22.373898583984374,43.8500337890625,22.918998583984376,42.1940337890625,22.918998583984376,40.088833789062505C22.918898583984372,37.9641337890625,22.373898583984374,36.2894337890625,21.284198583984377,35.064433789062505C20.194398583984373,33.8395337890625,18.640278583984376,33.2270337890625,16.621678583984377,33.2270337890625L13.352518583984375,33.2270337890625L13.352518583984375,46.8360337890625ZM40.25379858398438,46.8360337890625L43.522998583984375,46.8360337890625C45.541398583984375,46.8360337890625,47.095798583984376,46.2424337890625,48.18539858398437,45.0560337890625C49.27499858398438,43.8500337890625,49.82019858398437,42.1940337890625,49.82019858398437,40.088833789062505C49.82019858398437,37.9641337890625,49.27499858398438,36.2894337890625,48.18539858398437,35.064433789062505C47.095798583984376,33.8395337890625,45.541398583984375,33.2270337890625,43.522998583984375,33.2270337890625L40.25379858398438,33.2270337890625L40.25379858398438,46.8360337890625ZM58.98419858398437,33.4934337890625C60.101798583984376,33.4934337890625,61.008198583984374,34.3994337890625,61.008198583984374,35.5172337890625C61.008198583984374,36.6349337890625,60.101798583984376,37.541033789062496,58.98419858398437,37.541033789062496C57.86659858398438,37.5408337890625,56.96059858398438,36.6348337890625,56.96019858398437,35.5172337890625C56.96019858398437,34.3995337890625,57.86659858398438,33.4935337890625,58.98419858398437,33.4934337890625Z",
+        fill: "currentColor"
+      }
+    )
+  ] }), X = /* @__PURE__ */ l(f, { children: [
+    /* @__PURE__ */ C("rect", { ref: L, width: t * e, height: t, rx: r, fill: "none" }),
+    /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M71.3426,5C75.0978,5.000119781,78.1426,8.04456,78.1426,11.8L78.1426,52.9101C78.1426,56.6657,75.0978,59.7101,71.3426,59.7101L8.79998,59.7101C5.0445,59.7101,2.0000801086,56.6657,2,52.9101L2,50.6765L5.99998,50.6765L5.99998,52.9101C6.00006,54.4565,7.25366,55.7101,8.79998,55.7101L71.3426,55.7101C72.8886,55.7101,74.1426,54.4565,74.1426,52.9101L74.1426,11.8C74.1426,10.25368,72.889,9.000119999999999,71.3426,9L8.79998,9C7.25358,9,5.99998,10.253599999999999,5.99998,11.8L5.99998,14.26796L2,14.26796L2,11.8C2,8.04448,5.04446,5,8.79998,5L71.3426,5ZM10.96602,19.576999999999998C13.4867,19.576999999999998,15.6701,20.107799999999997,17.5156,21.1688C19.3837,22.2057,20.8358,23.6766,21.8711,25.5816C22.9064,27.4867,23.4238,29.7295,23.4238,32.3097C23.4238,34.8661,22.9064,37.0845,21.8711,38.9657C20.8358,40.8465,19.3837,42.3057,17.5156,43.3425C15.6701,44.3793,13.4867,44.8981,10.96602,44.8981L2.154688,44.8981L2.154688,19.576999999999998L10.96602,19.576999999999998ZM31.4383,44.8981L26.8805,44.8981L26.8805,19.5774L31.4383,19.5774L31.4383,44.8981ZM44.8586,19.5774C47.3794,19.5774,49.5626,20.107799999999997,51.4082,21.1688C53.2762,22.2057,54.7282,23.6766,55.7638,25.5816C56.799,27.4867,57.3162,29.7296,57.3162,32.3097C57.3162,34.8661,56.799,37.0849,55.7638,38.9657C54.7282,40.8465,53.2762,42.3057,51.4082,43.3425C49.5626,44.3793,47.3794,44.8981,44.8586,44.8981L36.0469,44.8981L36.0469,19.5774L44.8586,19.5774ZM64.2034,35.899699999999996C65.6118,35.899699999999996,66.7534,37.0413,66.7534,38.4497C66.7534,39.8577,65.6118,40.9993,64.2034,40.9993C62.7954,40.9993,61.6534,39.8577,61.6534,38.4497C61.6534,37.0413,62.7954,35.899699999999996,64.2034,35.899699999999996ZM6.7121,40.8105L10.83126,40.8105C13.3745,40.8105,15.3326,40.0625,16.7055,38.5677C18.0783,37.0485,18.7648,34.9625,18.7648,32.3097C18.7648,29.6331,18.0784,27.523,16.7055,25.9797C15.3326,24.4364,13.3745,23.6645,10.83126,23.6644L6.7121,23.6644L6.7121,40.8105ZM40.6046,40.8105L44.7238,40.8105C47.267,40.8105,49.225,40.0629,50.5982,38.5681C51.971,37.0489,52.6574,34.9625,52.6574,32.3097C52.6574,29.6331,51.971,27.523,50.5982,25.9797C49.225,24.4364,47.267,23.6649,44.7238,23.6648L40.6046,23.6648L40.6046,40.8105ZM64.2034,24.0004C65.6118,24.0005,66.7534,25.1422,66.7534,26.5504C66.7534,27.9586,65.6118,29.1003,64.2034,29.1004C62.795,29.1004,61.6534,27.9587,61.6534,26.5504C61.6534,25.1421,62.7954,24.0004,64.2034,24.0004Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+  let s = /* @__PURE__ */ l(f, { children: [
+    /* @__PURE__ */ C("rect", { ref: L, width: t * e, height: t, rx: r, fill: "none" }),
+    /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M71.342621,13C75.097809,13.00011978147,78.142624,16.0445597,78.142624,19.799999200000002L78.142624,60.910069C78.142624,64.665668,75.097809,67.710068,71.342621,67.710068L8.799983000000001,67.710068C5.0445037,67.710068,2.000080108621,64.665668,2,60.910069L2,58.676472L5.9999835,58.676472L5.9999835,60.910069C6.0000634,62.456467,7.253664,63.710068,8.799983000000001,63.710068L71.342621,63.710068C72.888603,63.710068,74.142609,62.456467,74.142609,60.910069L74.142609,19.799999200000002C74.142609,18.2536793,72.889008,17.0001183,71.342621,16.9999986L8.799983000000001,16.9999986C7.2535834,16.9999986,5.9999835,18.2535977,5.9999835,19.799999200000002L5.9999835,22.267959599999998L2,22.267959599999998L2,19.799999200000002C2,16.0444784,5.0444634,13,8.799983000000001,13L71.342621,13ZM10.9660225,27.576957C13.486742,27.576957,15.670061,28.107757,17.515621,29.168756C19.383659,30.205677,20.835781,31.676603,21.871099,33.581635C22.906384,35.486677,23.423822,37.729511,23.423822,40.309677C23.423822,42.86607,22.906384,45.084473,21.871099,46.965672C20.835781,48.846466,19.383701,50.305676,17.515621,51.342476C15.670061,52.379284,13.486703,52.898083,10.9660225,52.898083L2.15468803,52.898083L2.15468803,27.576957L10.9660225,27.576957ZM31.438259,52.898083L26.880459,52.898083L26.880459,27.577358L31.438259,27.577358L31.438259,52.898083ZM44.858624,27.577358C47.379414,27.577358,49.562618,28.107757,51.408211,29.168756C53.276222,30.205677,54.728218,31.676636,55.763813,33.581635C56.799011,35.486677,57.316219,37.729555000000005,57.316219,40.309677C57.316219,42.86607,56.799011,45.084873,55.763813,46.965672C54.728218,48.846466,53.276222,50.305676,51.408211,51.342476C49.562618,52.379284,47.379414,52.898083,44.858624,52.898083L36.046856,52.898083L36.046856,27.577358L44.858624,27.577358ZM64.20340300000001,43.899673C65.611801,43.899673,66.75341,45.041279,66.75341,46.44968C66.75341,47.85767,65.611801,48.999275,64.20340300000001,48.999275C62.79541,48.999275,61.653412,47.85767,61.653412,46.44968C61.653412,45.041279,62.79541,43.899673,64.20340300000001,43.899673ZM6.7121043,48.810471L10.8312635,48.810471C13.374459,48.810471,15.332582,48.062473,16.705461,46.567677C18.078341,45.048477,18.764822,42.962473,18.764822,40.309677C18.764822,37.633072,18.078381,35.523035,16.705461,33.979670999999996C15.332582,32.436394,13.374459,31.664515,10.8312635,31.664434L6.7121043,31.664434L6.7121043,48.810471ZM40.604622,48.810471L44.723808,48.810471C47.267017,48.810471,49.225018,48.062874,50.598221,46.568077C51.97102,45.04887,52.657417,42.962473,52.657417,40.309677C52.657417,37.633114,51.97102,35.522997000000004,50.598221,33.979670999999996C49.225018,32.436394,47.267017,31.664913,44.723808,31.664837L40.604622,31.664837L40.604622,48.810471ZM64.20340300000001,32.000399C65.611801,32.000515,66.75341,33.142193,66.75341,34.550396C66.75341,35.958591,65.611801,37.100274999999996,64.20340300000001,37.100391C62.79501,37.100391,61.653412,35.958675,61.653412,34.550396C61.653412,33.142112999999995,62.79541,32.000399,64.20340300000001,32.000399Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+  return c ? s = V : o && (s = X), /* @__PURE__ */ l(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: z,
+      height: p,
+      viewBox: `0 0 ${b} ${t}`,
+      fill: "currentColor",
+      className: `${B}`.trim(),
+      style: Object.assign({ color: F }, m),
+      children: [
+        s,
+        o && /* @__PURE__ */ C(
+          "text",
+          {
+            ref: Z,
+            x: j,
+            y: N,
+            fontSize: n,
+            fill: R,
+            textAnchor: "start",
+            dominantBaseline: "middle",
+            fontFamily: "Lato, Arial, sans-serif",
+            fontWeight: "normal",
+            style: {
+              userSelect: "none",
+              textTransform: "capitalize"
+            },
+            children: o
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as default
+};

package/lib/index.d.ts

@@ -20,7 +20,7 @@ import { default as RelativeTime } from './RelativeTime';
 import { default as SessionManager } from './SessionManager';
 import { default as Datatable } from './Datatable';
 import { default as Dialog } from './Dialog';
-import { default as DidLogo } from './DidLogo';
+import { default as DIDLogo } from './DIDLogo';
 import { default as SocialShare } from './SocialShare';
 import { default as Tabs } from './Tabs';
 import { default as Tag } from './Tag';
@@ -36,4 +36,4 @@ import { default as withTracker } from './withTracker';
 import { default as Img } from './Img';
 import * as Theme from './Theme';
 import * as Util from './Util';
-export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, SocialShare, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img, };
+export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DIDLogo, SocialShare, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img, };

package/lib/index.js

@@ -7,8 +7,8 @@ import { default as h } from "./Async/index.js";
 import { default as C } from "./Avatar/index.js";
 import { default as S } from "./Badge/index.js";
 import { default as B } from "./Button/index.js";
-import { default as k } from "./ClickToCopy/index.js";
-import { default as y } from "./CodeBlock/index.js";
+import { default as b } from "./ClickToCopy/index.js";
+import { default as v } from "./CodeBlock/index.js";
 import { default as L } from "./ContactForm/index.js";
 import { default as E } from "./CountDown/index.js";
 import { default as M } from "./Earth/index.js";
@@ -25,7 +25,7 @@ import "react/jsx-runtime";
 import "react";
 import "ahooks";
 import "lodash/noop";
-import { default as _ } from "./DidLogo/index.js";
+import { default as _ } from "./DIDLogo/index.js";
 import { default as to } from "./SocialShare/index.js";
 import { default as ao } from "./Tabs/index.js";
 import { default as fo } from "./Tag/index.js";
@@ -40,7 +40,7 @@ import { default as go } from "./Wallet/Download.js";
 import { default as Wo } from "./WechatPrompt/index.js";
 import { default as Do } from "./withTheme/index.js";
 import { default as wo } from "./withTracker/index.js";
-import { default as bo } from "./Img/index.js";
+import { default as Io } from "./Img/index.js";
 export {
   s as ActionButton,
   x as ActivityIndicator,
@@ -51,17 +51,17 @@ export {
   C as Avatar,
   S as Badge,
   B as Button,
-  k as ClickToCopy,
-  y as CodeBlock,
+  b as ClickToCopy,
+  v as CodeBlock,
   L as ContactForm,
   E as CountDown,
+  _ as DIDLogo,
   Q as Datatable,
   Y as Dialog,
-  _ as DidLogo,
   M as Earth,
   R as Footer,
   V as Icon,
-  bo as Img,
+  Io as Img,
   j as LocaleSelector,
   z as Logo,
   H as RelativeTime,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.43",
+  "version": "3.1.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "8c5736c8aa0cde4ebebc4c5e7c666034bbdded65",
+  "gitHead": "3d6b460689cc9015fc66567efc1b868874ceb18b",
   "dependencies": {
-    "@arcblock/bridge": "3.0.43",
-    "@arcblock/did": "^1.21.0",
+    "@arcblock/bridge": "3.1.0",
+    "@arcblock/did": "^1.21.2",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.43",
-    "@arcblock/nft-display": "3.0.43",
-    "@arcblock/react-hooks": "3.0.43",
+    "@arcblock/icons": "3.1.0",
+    "@arcblock/nft-display": "3.1.0",
+    "@arcblock/react-hooks": "3.1.0",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.43",
+    "@blocklet/theme": "3.1.0",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -77,7 +77,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.21.0",
+    "@ocap/mcrypto": "^1.21.2",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

package/src/DIDConnect/did-connect-logo.tsx

@@ -1,8 +1,8 @@
-import DidBrandConnect from '@arcblock/icons/lib/DidBrandConnect';
 import { useTheme } from '@mui/material';
+import DIDLogo from '../DIDLogo';
 
 export default function DidConnectLogo() {
   const theme = useTheme();
 
-  return <DidBrandConnect style={{ filter: theme.palette.mode === 'dark' ? 'invert(1)' : 'none' }} />;
+  return <DIDLogo size={16} name="connect" dark={theme.palette.mode === 'dark'} />;
 }

package/src/{DidLogo → DIDLogo}/Logo.stories.jsx

@@ -2,6 +2,9 @@ export { default as WithDifferentSizes } from './demo/with-different-sizes';
 export { default as WithDifferentStyles } from './demo/with-different-styles';
 export { default as WithInheritStyles } from './demo/with-inherit-styles';
 export { default as MakeALogo } from './demo/make-a-logo';
+export { default as WithText } from './demo/with-text';
+export { default as WithPreset } from './demo/with-preset';
+export { default as WithDark } from './demo/with-dark';
 
 export default {
   title: 'DID/Logo',

package/src/DIDLogo/index.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState } from 'react';
+
+const presetMap = {
+  default: {
+    color: '#4598FA',
+    text: undefined,
+  },
+  wallet: {
+    color: '#4598FA',
+    text: 'Wallet',
+  },
+  spaces: {
+    color: '#8C6AFC',
+    text: 'Spaces',
+  },
+  names: {
+    color: '#5D8BB4',
+    text: 'Names',
+  },
+  connect: {
+    color: '#1DC1C7',
+    text: 'Connect',
+  },
+};
+
+export interface DIDLogoProps {
+  style?: React.CSSProperties;
+  size?: string | number;
+  className?: string;
+  color?: string;
+  text?: string;
+  textColor?: string;
+  fontSize?: string | number;
+  gap?: number;
+  variant?: 'contained' | 'default';
+  name?: keyof typeof presetMap;
+  dark?: boolean;
+}
+
+export default function DIDLogo({
+  style = {},
+  className = '',
+  size = '1em',
+  color = undefined,
+  text = undefined,
+  textColor = undefined,
+  fontSize = undefined,
+  gap = 10,
+  variant = 'default',
+  name = undefined,
+  dark = false,
+}: DIDLogoProps) {
+  const isContained = variant === 'contained';
+  const currentPreset = presetMap[name as keyof typeof presetMap] || presetMap.default;
+  const finalText = text || currentPreset?.text;
+  const finalColor = color || currentPreset?.color;
+  const finalTextColor = textColor || (dark ? 'white' : '#121212');
+
+  let scaleIcon = 1;
+  let initSize = 80;
+  let finalTextSize = fontSize;
+  let finalGap = gap + 5;
+  if (!isContained && finalText) {
+    initSize = 64;
+    scaleIcon = 1.25;
+    finalGap = gap;
+    if (!fontSize) finalTextSize = 32;
+  }
+  finalTextSize = finalTextSize || 40;
+
+  const textRef = useRef(null);
+  const iconRef = useRef(null);
+  const [svgWidth, setSvgWidth] = useState<number>();
+  const [textX, setTextX] = useState(initSize);
+  const [viewBoxWidth, setViewBoxWidth] = useState(initSize);
+  const textY = isContained ? initSize / 2 + 5 : initSize / 2 + 3;
+
+  const rx = initSize / 5;
+
+  useEffect(() => {
+    if (iconRef.current) {
+      // @ts-ignore
+      const textBbox = textRef.current?.getBBox();
+      // @ts-ignore
+      const iconRect = iconRef.current.getBoundingClientRect();
+
+      const textWidth = textBbox?.width || 0;
+      const scaleSize = iconRect.height / initSize;
+
+      const newViewBoxWidth = initSize * scaleIcon + textWidth + (textWidth ? finalGap : 0);
+      setViewBoxWidth(newViewBoxWidth);
+      setTextX(initSize * scaleIcon + (textWidth ? finalGap : 0));
+      setSvgWidth(newViewBoxWidth * scaleSize);
+    }
+  }, [finalText, finalGap, scaleIcon, initSize]);
+
+  const withBg = (
+    <>
+      <rect ref={iconRef} width={initSize} height={initSize} rx={rx} fill="currentColor" opacity={0.1} />
+      <path
+        d="M63.660598583984374,17.9996337890625C67.41619858398437,17.9997131347625,70.46059858398438,21.0441537890625,70.46059858398438,24.7996337890625L70.46059858398438,55.4496337890625C70.46059858398438,59.2048337890625,67.41619858398437,62.2496337890625,63.660598583984374,62.2496337890625L15.999798583984376,62.2496337890625C12.244398583984374,62.2496337890625,9.199918364984375,59.2048337890625,9.199798583984375,55.4496337890625L9.199798583984375,54.6668337890625L13.199798583984375,54.6668337890625L13.199798583984375,55.4496337890625C13.199918583984374,56.9960337890625,14.453558583984375,58.2496337890625,15.999798583984376,58.2496337890625L63.660598583984374,58.2496337890625C65.20699858398437,58.2496337890625,66.46059858398438,56.9960337890625,66.46059858398438,55.4496337890625L66.46059858398438,24.7996337890625C66.46059858398438,23.2532737890625,65.20699858398437,21.9997137890625,63.660598583984374,21.9996337890625L15.999798583984376,21.9996337890625C14.453478583984374,21.9997137890625,13.199798583984375,23.2532737890625,13.199798583984375,24.7996337890625L13.199798583984375,25.7683937890625L9.199798583984375,25.7683937890625L9.199798583984375,24.7996337890625C9.199798583984375,21.0441537890625,12.244318583984375,17.9997131347625,15.999798583984376,17.9996337890625L63.660598583984374,17.9996337890625ZM16.728718583984374,29.982433789062497C18.729478583984374,29.982433789062497,20.462598583984374,30.4036337890625,21.927498583984374,31.2457337890625C23.410198583984375,32.0687337890625,24.562398583984375,33.2364337890625,25.384198583984375,34.7484337890625C26.205998583984375,36.2605337890625,26.616998583984376,38.0406337890625,26.616998583984376,40.088833789062505C26.616998583984376,42.117633789062495,26.205898583984375,43.8784337890625,25.384198583984375,45.3716337890625C24.562398583984375,46.8644337890625,23.410198583984375,48.0228337890625,21.927498583984374,48.845633789062504C20.462598583984374,49.668833789062504,18.729478583984374,50.0800337890625,16.728718583984374,50.0800337890625L9.734958583984374,50.0800337890625L9.734958583984374,29.982433789062497L16.728718583984374,29.982433789062497ZM32.97789858398437,50.0800337890625L29.360398583984374,50.0800337890625L29.360398583984374,29.982433789062497L32.97789858398437,29.982433789062497L32.97789858398437,50.0800337890625ZM43.629798583984375,29.982433789062497C45.63059858398437,29.982433789062497,47.36379858398438,30.4036337890625,48.82859858398437,31.2457337890625C50.31139858398438,32.0687337890625,51.46339858398437,33.2364337890625,52.285398583984374,34.7484337890625C53.10699858398438,36.2605337890625,53.51819858398437,38.0406337890625,53.51819858398437,40.088833789062505C53.51819858398437,42.117633789062495,53.10699858398438,43.8784337890625,52.285398583984374,45.3716337890625C51.46339858398437,46.8644337890625,50.31139858398438,48.0228337890625,48.82859858398437,48.845633789062504C47.36379858398438,49.668833789062504,45.63059858398437,50.0800337890625,43.629798583984375,50.0800337890625L36.63609858398438,50.0800337890625L36.63609858398438,29.982433789062497L43.629798583984375,29.982433789062497ZM58.98419858398437,42.9380337890625C60.101798583984376,42.9380337890625,61.008198583984374,43.8440337890625,61.008198583984374,44.9616337890625C61.008198583984374,46.0796337890625,60.101798583984376,46.9860337890625,58.98419858398437,46.9860337890625C57.86659858398438,46.985633789062504,56.96059858398438,46.0792337890625,56.96019858398437,44.9616337890625C56.96059858398438,43.8440337890625,57.86659858398438,42.9380337890625,58.98419858398437,42.9380337890625ZM13.352518583984375,46.8360337890625L16.621678583984377,46.8360337890625C18.640238583984377,46.8360337890625,20.194398583984373,46.2424337890625,21.284198583984377,45.0560337890625C22.373898583984374,43.8500337890625,22.918998583984376,42.1940337890625,22.918998583984376,40.088833789062505C22.918898583984372,37.9641337890625,22.373898583984374,36.2894337890625,21.284198583984377,35.064433789062505C20.194398583984373,33.8395337890625,18.640278583984376,33.2270337890625,16.621678583984377,33.2270337890625L13.352518583984375,33.2270337890625L13.352518583984375,46.8360337890625ZM40.25379858398438,46.8360337890625L43.522998583984375,46.8360337890625C45.541398583984375,46.8360337890625,47.095798583984376,46.2424337890625,48.18539858398437,45.0560337890625C49.27499858398438,43.8500337890625,49.82019858398437,42.1940337890625,49.82019858398437,40.088833789062505C49.82019858398437,37.9641337890625,49.27499858398438,36.2894337890625,48.18539858398437,35.064433789062505C47.095798583984376,33.8395337890625,45.541398583984375,33.2270337890625,43.522998583984375,33.2270337890625L40.25379858398438,33.2270337890625L40.25379858398438,46.8360337890625ZM58.98419858398437,33.4934337890625C60.101798583984376,33.4934337890625,61.008198583984374,34.3994337890625,61.008198583984374,35.5172337890625C61.008198583984374,36.6349337890625,60.101798583984376,37.541033789062496,58.98419858398437,37.541033789062496C57.86659858398438,37.5408337890625,56.96059858398438,36.6348337890625,56.96019858398437,35.5172337890625C56.96019858398437,34.3995337890625,57.86659858398438,33.4935337890625,58.98419858398437,33.4934337890625Z"
+        fill="currentColor"
+      />
+    </>
+  );
+  const noBg = (
+    <>
+      <rect ref={iconRef} width={initSize * scaleIcon} height={initSize} rx={rx} fill="none" />
+      <path
+        d="M71.3426,5C75.0978,5.000119781,78.1426,8.04456,78.1426,11.8L78.1426,52.9101C78.1426,56.6657,75.0978,59.7101,71.3426,59.7101L8.79998,59.7101C5.0445,59.7101,2.0000801086,56.6657,2,52.9101L2,50.6765L5.99998,50.6765L5.99998,52.9101C6.00006,54.4565,7.25366,55.7101,8.79998,55.7101L71.3426,55.7101C72.8886,55.7101,74.1426,54.4565,74.1426,52.9101L74.1426,11.8C74.1426,10.25368,72.889,9.000119999999999,71.3426,9L8.79998,9C7.25358,9,5.99998,10.253599999999999,5.99998,11.8L5.99998,14.26796L2,14.26796L2,11.8C2,8.04448,5.04446,5,8.79998,5L71.3426,5ZM10.96602,19.576999999999998C13.4867,19.576999999999998,15.6701,20.107799999999997,17.5156,21.1688C19.3837,22.2057,20.8358,23.6766,21.8711,25.5816C22.9064,27.4867,23.4238,29.7295,23.4238,32.3097C23.4238,34.8661,22.9064,37.0845,21.8711,38.9657C20.8358,40.8465,19.3837,42.3057,17.5156,43.3425C15.6701,44.3793,13.4867,44.8981,10.96602,44.8981L2.154688,44.8981L2.154688,19.576999999999998L10.96602,19.576999999999998ZM31.4383,44.8981L26.8805,44.8981L26.8805,19.5774L31.4383,19.5774L31.4383,44.8981ZM44.8586,19.5774C47.3794,19.5774,49.5626,20.107799999999997,51.4082,21.1688C53.2762,22.2057,54.7282,23.6766,55.7638,25.5816C56.799,27.4867,57.3162,29.7296,57.3162,32.3097C57.3162,34.8661,56.799,37.0849,55.7638,38.9657C54.7282,40.8465,53.2762,42.3057,51.4082,43.3425C49.5626,44.3793,47.3794,44.8981,44.8586,44.8981L36.0469,44.8981L36.0469,19.5774L44.8586,19.5774ZM64.2034,35.899699999999996C65.6118,35.899699999999996,66.7534,37.0413,66.7534,38.4497C66.7534,39.8577,65.6118,40.9993,64.2034,40.9993C62.7954,40.9993,61.6534,39.8577,61.6534,38.4497C61.6534,37.0413,62.7954,35.899699999999996,64.2034,35.899699999999996ZM6.7121,40.8105L10.83126,40.8105C13.3745,40.8105,15.3326,40.0625,16.7055,38.5677C18.0783,37.0485,18.7648,34.9625,18.7648,32.3097C18.7648,29.6331,18.0784,27.523,16.7055,25.9797C15.3326,24.4364,13.3745,23.6645,10.83126,23.6644L6.7121,23.6644L6.7121,40.8105ZM40.6046,40.8105L44.7238,40.8105C47.267,40.8105,49.225,40.0629,50.5982,38.5681C51.971,37.0489,52.6574,34.9625,52.6574,32.3097C52.6574,29.6331,51.971,27.523,50.5982,25.9797C49.225,24.4364,47.267,23.6649,44.7238,23.6648L40.6046,23.6648L40.6046,40.8105ZM64.2034,24.0004C65.6118,24.0005,66.7534,25.1422,66.7534,26.5504C66.7534,27.9586,65.6118,29.1003,64.2034,29.1004C62.795,29.1004,61.6534,27.9587,61.6534,26.5504C61.6534,25.1421,62.7954,24.0004,64.2034,24.0004Z"
+        fill="currentColor"
+      />
+    </>
+  );
+  const noBgText = (
+    <>
+      <rect ref={iconRef} width={initSize * scaleIcon} height={initSize} rx={rx} fill="none" />
+      <path
+        d="M71.342621,13C75.097809,13.00011978147,78.142624,16.0445597,78.142624,19.799999200000002L78.142624,60.910069C78.142624,64.665668,75.097809,67.710068,71.342621,67.710068L8.799983000000001,67.710068C5.0445037,67.710068,2.000080108621,64.665668,2,60.910069L2,58.676472L5.9999835,58.676472L5.9999835,60.910069C6.0000634,62.456467,7.253664,63.710068,8.799983000000001,63.710068L71.342621,63.710068C72.888603,63.710068,74.142609,62.456467,74.142609,60.910069L74.142609,19.799999200000002C74.142609,18.2536793,72.889008,17.0001183,71.342621,16.9999986L8.799983000000001,16.9999986C7.2535834,16.9999986,5.9999835,18.2535977,5.9999835,19.799999200000002L5.9999835,22.267959599999998L2,22.267959599999998L2,19.799999200000002C2,16.0444784,5.0444634,13,8.799983000000001,13L71.342621,13ZM10.9660225,27.576957C13.486742,27.576957,15.670061,28.107757,17.515621,29.168756C19.383659,30.205677,20.835781,31.676603,21.871099,33.581635C22.906384,35.486677,23.423822,37.729511,23.423822,40.309677C23.423822,42.86607,22.906384,45.084473,21.871099,46.965672C20.835781,48.846466,19.383701,50.305676,17.515621,51.342476C15.670061,52.379284,13.486703,52.898083,10.9660225,52.898083L2.15468803,52.898083L2.15468803,27.576957L10.9660225,27.576957ZM31.438259,52.898083L26.880459,52.898083L26.880459,27.577358L31.438259,27.577358L31.438259,52.898083ZM44.858624,27.577358C47.379414,27.577358,49.562618,28.107757,51.408211,29.168756C53.276222,30.205677,54.728218,31.676636,55.763813,33.581635C56.799011,35.486677,57.316219,37.729555000000005,57.316219,40.309677C57.316219,42.86607,56.799011,45.084873,55.763813,46.965672C54.728218,48.846466,53.276222,50.305676,51.408211,51.342476C49.562618,52.379284,47.379414,52.898083,44.858624,52.898083L36.046856,52.898083L36.046856,27.577358L44.858624,27.577358ZM64.20340300000001,43.899673C65.611801,43.899673,66.75341,45.041279,66.75341,46.44968C66.75341,47.85767,65.611801,48.999275,64.20340300000001,48.999275C62.79541,48.999275,61.653412,47.85767,61.653412,46.44968C61.653412,45.041279,62.79541,43.899673,64.20340300000001,43.899673ZM6.7121043,48.810471L10.8312635,48.810471C13.374459,48.810471,15.332582,48.062473,16.705461,46.567677C18.078341,45.048477,18.764822,42.962473,18.764822,40.309677C18.764822,37.633072,18.078381,35.523035,16.705461,33.979670999999996C15.332582,32.436394,13.374459,31.664515,10.8312635,31.664434L6.7121043,31.664434L6.7121043,48.810471ZM40.604622,48.810471L44.723808,48.810471C47.267017,48.810471,49.225018,48.062874,50.598221,46.568077C51.97102,45.04887,52.657417,42.962473,52.657417,40.309677C52.657417,37.633114,51.97102,35.522997000000004,50.598221,33.979670999999996C49.225018,32.436394,47.267017,31.664913,44.723808,31.664837L40.604622,31.664837L40.604622,48.810471ZM64.20340300000001,32.000399C65.611801,32.000515,66.75341,33.142193,66.75341,34.550396C66.75341,35.958591,65.611801,37.100274999999996,64.20340300000001,37.100391C62.79501,37.100391,61.653412,35.958675,61.653412,34.550396C61.653412,33.142112999999995,62.79541,32.000399,64.20340300000001,32.000399Z"
+        fill="currentColor"
+      />
+    </>
+  );
+  let content = noBgText;
+  if (isContained) {
+    content = withBg;
+  } else if (finalText) {
+    content = noBg;
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={svgWidth}
+      height={size}
+      viewBox={`0 0 ${viewBoxWidth} ${initSize}`}
+      fill="currentColor"
+      className={`${className}`.trim()}
+      style={Object.assign({ color: finalColor }, style)}>
+      {content}
+      {finalText && (
+        <text
+          ref={textRef}
+          x={textX}
+          y={textY}
+          fontSize={finalTextSize}
+          fill={finalTextColor}
+          textAnchor="start"
+          dominantBaseline="middle"
+          fontFamily="Lato, Arial, sans-serif"
+          fontWeight="normal"
+          style={{
+            userSelect: 'none',
+            textTransform: 'capitalize',
+          }}>
+          {finalText}
+        </text>
+      )}
+    </svg>
+  );
+}

package/src/index.ts

@@ -20,7 +20,7 @@ import RelativeTime from './RelativeTime';
 import SessionManager from './SessionManager';
 import Datatable from './Datatable';
 import Dialog from './Dialog';
-import DidLogo from './DidLogo';
+import DIDLogo from './DIDLogo';
 import SocialShare from './SocialShare';
 import Tabs from './Tabs';
 import Tag from './Tag';
@@ -61,7 +61,7 @@ export {
   SessionManager,
   Datatable,
   Dialog,
-  DidLogo,
+  DIDLogo,
   SocialShare,
   Tag,
   TextCollapse,

package/lib/DidLogo/index.d.ts

@@ -1,6 +0,0 @@
-export interface DidLogoProps {
-    style?: React.CSSProperties;
-    size?: string | number;
-    className?: string;
-}
-export default function DidLogo({ style, size, className }: DidLogoProps): import("react/jsx-runtime").JSX.Element;

package/lib/DidLogo/index.js

@@ -1,20 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import l from "@arcblock/icons/lib/DidLogo";
-const r = {
-  width: "auto",
-  height: "1em",
-  fill: "currentColor"
-};
-function a({ style: e = r, size: t = 0, className: i = "" }) {
-  const o = Number(t) > 0 ? `${Number(t)}px` : t;
-  return /* @__PURE__ */ m(
-    l,
-    {
-      className: `${i}`.trim(),
-      style: Object.assign({}, r, e, o ? { height: o } : {})
-    }
-  );
-}
-export {
-  a as default
-};

package/src/DidLogo/index.tsx

@@ -1,23 +0,0 @@
-import DidLogoIcon from '@arcblock/icons/lib/DidLogo';
-
-const defaultStyle = {
-  width: 'auto',
-  height: '1em',
-  fill: 'currentColor',
-};
-
-export interface DidLogoProps {
-  style?: React.CSSProperties;
-  size?: string | number;
-  className?: string;
-}
-
-export default function DidLogo({ style = defaultStyle, size = 0, className = '' }: DidLogoProps) {
-  const height = Number(size) > 0 ? `${Number(size)}px` : size;
-  return (
-    <DidLogoIcon
-      className={`${className}`.trim()}
-      style={Object.assign({}, defaultStyle, style, height ? { height } : {})}
-    />
-  );
-}