@arcblock/nft-display 2.13.69 → 3.0.0

package/lib/color.js

@@ -1,201 +1,120 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MOTIF_COLORS = exports.DEFAULT_COLORS = void 0;
-exports.rgbToHsl = rgbToHsl;
-exports.hslToRgb = hslToRgb;
-exports.getNftBGColor = getNftBGColor;
-exports.getPassportColorFromDid = getPassportColorFromDid;
-exports.getNftBGColorFromDid = getNftBGColorFromDid;
-const util_1 = require("@ocap/util");
-const mcrypto_1 = require("@ocap/mcrypto");
-exports.DEFAULT_COLORS = {
-    'did-space': {
-        start: '#7D3AC5',
-        end: '#9761D1',
-    },
-    'app-space': {
-        start: '#6CC68D',
-        end: '#47B871',
-    },
-    'app-purchase': {
-        start: '#DE7021',
-        end: '#E48D4E',
-    },
-    'app-passport': {
-        start: '#3882C7',
-        end: '#7AB2F6',
-    },
-    'app-kyc': {
-        start: '#3882C7',
-        end: '#7AB2F6',
-    },
-};
-exports.MOTIF_COLORS = [
-    '#E94E4E',
-    '#E41115',
-    '#E96B4E',
-    '#E5502E',
-    '#E98F4E',
-    '#E57A2E',
-    '#E98F4E',
-    '#E5A82E',
-    '#DACD5D',
-    '#DAC825',
-    '#BDD13D',
-    '#C8E31C',
-    '#AEE94E',
-    '#7FD558',
-    '#52CC19',
-    '#4FC469',
-    '#59DE9C',
-    '#19CC73',
-    '#5ED9D1',
-    '#19CCC0',
-    '#4ED7E9',
-    '#19B7CC',
-    '#45ACE8',
-    '#1C97DE',
-    '#4E68E9',
-    '#2E4DE5',
-    '#7F4EE9',
-    '#682EE5',
-    '#BE65E7',
-    '#AF40E2',
-    '#DF58C2',
-    '#E94E8F',
+import { toHex as l } from "@ocap/util";
+import { Hasher as f } from "@ocap/mcrypto";
+const d = {
+  "did-space": {
+    start: "#7D3AC5",
+    end: "#9761D1"
+  },
+  "app-space": {
+    start: "#6CC68D",
+    end: "#47B871"
+  },
+  "app-purchase": {
+    start: "#DE7021",
+    end: "#E48D4E"
+  },
+  "app-passport": {
+    start: "#3882C7",
+    end: "#7AB2F6"
+  },
+  "app-kyc": {
+    start: "#3882C7",
+    end: "#7AB2F6"
+  }
+}, b = [
+  "#E94E4E",
+  "#E41115",
+  "#E96B4E",
+  "#E5502E",
+  "#E98F4E",
+  "#E57A2E",
+  "#E98F4E",
+  "#E5A82E",
+  "#DACD5D",
+  "#DAC825",
+  "#BDD13D",
+  "#C8E31C",
+  "#AEE94E",
+  "#7FD558",
+  "#52CC19",
+  "#4FC469",
+  "#59DE9C",
+  "#19CC73",
+  "#5ED9D1",
+  "#19CCC0",
+  "#4ED7E9",
+  "#19B7CC",
+  "#45ACE8",
+  "#1C97DE",
+  "#4E68E9",
+  "#2E4DE5",
+  "#7F4EE9",
+  "#682EE5",
+  "#BE65E7",
+  "#AF40E2",
+  "#DF58C2",
+  "#E94E8F"
 ];
-/**
- * Convert RGB color to HSL color.
- * @param {string} rgbString - The RGB color value.
- * @returns {number[]} - The HSL color value.
- */
-function rgbToHsl(rgbString) {
-    const color = rgbString.replace('#', '');
-    const r = parseInt(color.slice(0, 2), 16) / 255;
-    const g = parseInt(color.slice(2, 4), 16) / 255;
-    const b = parseInt(color.slice(4, 6), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h;
-    let s;
-    const l = (max + min) / 2;
-    if (max === min) {
-        h = 0;
-        s = 0;
-    }
-    else {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch (max) {
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-            default:
-                break;
-        }
-        h /= 6;
+function h(r) {
+  const e = r.replace("#", ""), t = parseInt(e.slice(0, 2), 16) / 255, n = parseInt(e.slice(2, 4), 16) / 255, s = parseInt(e.slice(4, 6), 16) / 255, o = Math.max(t, n, s), a = Math.min(t, n, s);
+  let E, i;
+  const C = (o + a) / 2;
+  if (o === a)
+    E = 0, i = 0;
+  else {
+    const c = o - a;
+    switch (i = C > 0.5 ? c / (2 - o - a) : c / (o + a), o) {
+      case t:
+        E = (n - s) / c + (n < s ? 6 : 0);
+        break;
+      case n:
+        E = (s - t) / c + 2;
+        break;
+      case s:
+        E = (t - n) / c + 4;
+        break;
     }
-    return [h, s, l];
+    E /= 6;
+  }
+  return [E, i, C];
 }
-/**
- * Convert HSL color value to RGB.
- * @param {number} h - The hue.
- * @param {number} s - The saturation.
- * @param {number} l - The lightness.
- * @returns {string} - The RGB color string.
- */
-function hslToRgb(h, s, l) {
-    let r;
-    let g;
-    let b;
-    if (s === 0) {
-        r = l;
-        g = l;
-        b = l;
-    }
-    else {
-        const hue2rgb = (p, q, t2) => {
-            let t = t2;
-            if (t < 0)
-                t += 1;
-            if (t > 1)
-                t -= 1;
-            if (t < 1 / 6)
-                return p + (q - p) * 6 * t;
-            if (t < 1 / 2)
-                return q;
-            if (t < 2 / 3)
-                return p + (q - p) * (2 / 3 - t) * 6;
-            return p;
-        };
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
-    }
-    return `#${[Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
-        .map((e) => e.toString(16).padStart(2, '0'))
-        .join('')}`;
+function u(r, e, t) {
+  let n, s, o;
+  if (e === 0)
+    n = t, s = t, o = t;
+  else {
+    const a = (C, c, D) => {
+      let p = D;
+      return p < 0 && (p += 1), p > 1 && (p -= 1), p < 0.16666666666666666 ? C + (c - C) * 6 * p : p < 0.5 ? c : p < 0.6666666666666666 ? C + (c - C) * (0.6666666666666666 - p) * 6 : C;
+    }, E = t < 0.5 ? t * (1 + e) : t + e - t * e, i = 2 * t - E;
+    n = a(i, E, r + 1 / 3), s = a(i, E, r), o = a(i, E, r - 1 / 3);
+  }
+  return `#${[Math.round(n * 255), Math.round(s * 255), Math.round(o * 255)].map((a) => a.toString(16).padStart(2, "0")).join("")}`;
 }
-/**
- * Convert a single color to usable NFT gradient background colors.
- * @param {string} rgbString - The background color in RGB format.
- * @returns {NFTColor} - The NFT gradient background colors.
- */
-function getNftBGColor(rgbString) {
-    if (rgbString) {
-        const data = rgbToHsl(rgbString);
-        // Hue h can be arbitrary
-        // Saturation s should not exceed 0.8
-        // Lightness l should not exceed 0.6 and should be above 0.3
-        const newHsl = [data[0]];
-        if (data[1] > 0.7) {
-            newHsl.push(0.7);
-        }
-        else {
-            newHsl.push(data[1]);
-        }
-        if (data[2] > 0.6) {
-            newHsl.push(0.6);
-        }
-        else if (data[2] < 0.3) {
-            newHsl.push(0.3);
-        }
-        else {
-            newHsl.push(data[2]);
-        }
-        const newRepeatHsl = [newHsl[0], newHsl[1], newHsl[2] - 0.1];
-        // @ts-ignore
-        const newColor = hslToRgb(...newHsl);
-        // @ts-ignore
-        const newRepeatColor = hslToRgb(...newRepeatHsl);
-        return {
-            start: newRepeatColor,
-            end: newColor,
-        };
-    }
-    return exports.DEFAULT_COLORS['app-passport'];
+function F(r) {
+  if (r) {
+    const e = h(r), t = [e[0]];
+    e[1] > 0.7 ? t.push(0.7) : t.push(e[1]), e[2] > 0.6 ? t.push(0.6) : e[2] < 0.3 ? t.push(0.3) : t.push(e[2]);
+    const n = [t[0], t[1], t[2] - 0.1], s = u(...t);
+    return {
+      start: u(...n),
+      end: s
+    };
+  }
+  return d["app-passport"];
 }
-/**
- * Get passport color from DID.
- * @param {string} did - The DID.
- * @returns {string} - The passport color.
- */
-function getPassportColorFromDid(did) {
-    return `#${(0, util_1.toHex)(mcrypto_1.Hasher.SHA3.hash224(did)).slice(-6)}`;
+function A(r) {
+  return `#${l(f.SHA3.hash224(r)).slice(-6)}`;
 }
-/**
- * Get NFT background color from DID.
- * @param {string} did - The DID.
- * @returns {NFTColor} - The NFT background colors.
- */
-function getNftBGColorFromDid(did) {
-    return getNftBGColor(getPassportColorFromDid(did));
+function g(r) {
+  return F(A(r));
 }
+export {
+  d as DEFAULT_COLORS,
+  b as MOTIF_COLORS,
+  F as getNftBGColor,
+  g as getNftBGColorFromDid,
+  A as getPassportColorFromDid,
+  u as hslToRgb,
+  h as rgbToHsl
+};

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import type { LiteralUnion } from 'type-fest';
+import { LiteralUnion } from 'type-fest';
 import { NFTColor } from './color';
 export * from './color';
 export type NFTLayout = (data: string, width: any, height: any) => string;

package/lib/index.js

@@ -1,53 +1,24 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSvg = exports.nanoid = exports.getTagSvg = exports.getBadgesSvg = exports.getChainBadge = exports.getVerifiableBadge = exports.getDidSvg = exports.getExtraSvg = exports.getIssuerSvg = exports.getHeaderSvg = exports.getLayoutSvg = exports.formatDid = void 0;
-const did_motif_1 = require("@arcblock/did-motif");
-const color_1 = require("./color");
-__exportStar(require("./color"), exports);
-const getId = (id, suffix) => [id, suffix].join('-');
-const DEFAULT_WIDTH = 228;
-const DEFAULT_HEIGHT = 258;
-const isEthereumDid = (addr) => /^(0x)?[0-9a-f]{40}$/i.test(addr);
-const getEthereumColor = (did) => {
-    const index = Uint8Array.from(did
-        .slice(2)
-        .match(/.{1,2}/g)
-        .map((pair) => parseInt(pair, 16)))
-        .slice(0, 8)
-        .reduce((acc, val) => acc + val, 0) % color_1.MOTIF_COLORS.length;
-    return color_1.MOTIF_COLORS[index];
-};
-const formatDid = (did, length = 5) => did.length > 2 * length ? `${did.slice(0, length)}..${did.slice(-length)}` : did;
-exports.formatDid = formatDid;
-const getLayoutSvg = (variant, id, color) => {
-    if (variant === 'did-space') {
-        return (content, width, height) => `<svg
-    width="${width}"
-    height="${height}"
+import { getDIDMotifInfo as g, toSvg as C } from "@arcblock/did-motif";
+import { DEFAULT_COLORS as d, MOTIF_COLORS as h } from "./color.js";
+import { getNftBGColor as A, getNftBGColorFromDid as _, getPassportColorFromDid as I, hslToRgb as j, rgbToHsl as E } from "./color.js";
+const l = (e, t) => [e, t].join("-"), m = 228, u = 258, x = (e) => /^(0x)?[0-9a-f]{40}$/i.test(e), w = (e) => {
+  const t = Uint8Array.from(
+    e.slice(2).match(/.{1,2}/g).map((a) => parseInt(a, 16))
+  ).slice(0, 8).reduce((a, i) => a + i, 0) % h.length;
+  return h[t];
+}, y = (e, t = 5) => e.length > 2 * t ? `${e.slice(0, t)}..${e.slice(-t)}` : e, $ = (e, t, a) => e === "did-space" ? (i, s, r) => `<svg
+    width="${s}"
+    height="${r}"
     viewBox="0 0 228 258"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g filter="url(#${getId(id, 'layout-filter')})">
+    <g filter="url(#${l(t, "layout-filter")})">
       <path
         d="M56.9706 2C53.788 2 50.7357 3.26428 48.4853 5.51472L7.51472 46.4853C5.26428 48.7357 4 51.788 4 54.9706V240C4 246.627 9.37258 252 16 252H212C218.627 252 224 246.627 224 240V14C224 7.37258 218.627 2 212 2H56.9706Z"
-        fill="url(#${getId(id, 'header-paint')})" />
+        fill="url(#${l(t, "header-paint")})" />
       <mask
-        id="${getId(id, 'layout-mask')}"
+        id="${l(t, "layout-mask")}"
         style="mask-type: alpha"
         maskUnits="userSpaceOnUse"
         x="4"
@@ -58,14 +29,14 @@ const getLayoutSvg = (variant, id, color) => {
           d="M56.9706 2C53.788 2 50.7357 3.26428 48.4853 5.51472L7.51472 46.4853C5.26428 48.7357 4 51.788 4 54.9706V240C4 246.627 9.37258 252 16 252H212C218.627 252 224 246.627 224 240V14C224 7.37258 218.627 2 212 2H56.9706Z"
           fill="#D9D9D9" />
       </mask>
-      <g mask="url(#${getId(id, 'layout-mask')})">
+      <g mask="url(#${l(t, "layout-mask")})">
         <rect x="4" y="2" width="220" height="125" fill="none" />
-        <rect x="4" y="127" width="220" height="125" fill="url(#${getId(id, 'footer-paint')})" />
+        <rect x="4" y="127" width="220" height="125" fill="url(#${l(t, "footer-paint")})" />
       </g>
     </g>
     <defs>
       <filter
-        id="${getId(id, 'layout-filter')}"
+        id="${l(t, "layout-filter")}"
         x="0"
         y="0"
         width="228"
@@ -86,17 +57,17 @@ const getLayoutSvg = (variant, id, color) => {
         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1582_53235" result="shape" />
       </filter>
       <linearGradient
-        id="${getId(id, 'header-paint')}"
+        id="${l(t, "header-paint")}"
         x1="220.071"
         y1="252"
         x2="-24.022"
         y2="33.2716"
         gradientUnits="userSpaceOnUse">
-        <stop stop-color="${color.start}" />
-        <stop offset="1" stop-color="${color.end}" />
+        <stop stop-color="${a.start}" />
+        <stop offset="1" stop-color="${a.end}" />
       </linearGradient>
       <linearGradient
-        id="${getId(id, 'footer-paint')}"
+        id="${l(t, "footer-paint")}"
         x1="224"
         y1="157.738"
         x2="1.00001"
@@ -106,20 +77,17 @@ const getLayoutSvg = (variant, id, color) => {
         <stop offset="1" stop-color="#272727" />
       </linearGradient>
     </defs>
-    ${content}
-  </svg>`;
-    }
-    if (variant === 'app-space') {
-        return (content, width, height) => `<svg
-    width="${width}"
-    height="${height}"
+    ${i}
+  </svg>` : e === "app-space" ? (i, s, r) => `<svg
+    width="${s}"
+    height="${r}"
     viewBox="0 0 228 258"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g filter="url(#${getId(id, 'layout-filter')})">
+    <g filter="url(#${l(t, "layout-filter")})">
       <mask
-        id="${getId(id, 'layout-mask')}"
+        id="${l(t, "layout-mask")}"
         style="mask-type: alpha"
         maskUnits="userSpaceOnUse"
         x="4"
@@ -130,17 +98,17 @@ const getLayoutSvg = (variant, id, color) => {
           d="M187.029 2C190.212 2 193.264 3.26428 195.515 5.51472L220.485 30.4853C222.736 32.7357 224 35.788 224 38.9706V240C224 246.627 218.627 252 212 252H40.4706C37.288 252 34.2357 250.736 31.9853 248.485L7.51472 224.015C5.26428 221.764 4 218.712 4 215.529V14C4 7.37258 9.37259 2 16 2H187.029Z"
           fill="#7D37D7" />
       </mask>
-      <g mask="url(#${getId(id, 'layout-mask')})">
+      <g mask="url(#${l(t, "layout-mask")})">
         <path
           d="M187.029 2C190.212 2 193.264 3.26428 195.515 5.51472L220.485 30.4853C222.736 32.7357 224 35.788 224 38.9706V240C224 246.627 218.627 252 212 252H40.4706C37.288 252 34.2357 250.736 31.9853 248.485L7.51472 224.015C5.26428 221.764 4 218.712 4 215.529V14C4 7.37258 9.37259 2 16 2H187.029Z"
-          fill="url(#${getId(id, 'header-paint')})" />
+          fill="url(#${l(t, "header-paint")})" />
         <rect x="4" y="2" width="220" height="125" fill="none" />
-        <path d="M4 127H224V252H4V127Z" fill="url(#${getId(id, 'footer-paint')})" />
+        <path d="M4 127H224V252H4V127Z" fill="url(#${l(t, "footer-paint")})" />
       </g>
     </g>
     <defs>
       <filter
-        id="${getId(id, 'layout-filter')}"
+        id="${l(t, "layout-filter")}"
         x="0"
         y="0"
         width="228"
@@ -161,17 +129,17 @@ const getLayoutSvg = (variant, id, color) => {
         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1583_54199" result="shape" />
       </filter>
       <linearGradient
-        id="${getId(id, 'header-paint')}"
+        id="${l(t, "header-paint")}"
         x1="211.69"
         y1="7.13393"
         x2="51.0187"
         y2="272.342"
         gradientUnits="userSpaceOnUse">
-        <stop stop-color="${color.start}" />
-        <stop offset="1" stop-color="${color.end}" />
+        <stop stop-color="${a.start}" />
+        <stop offset="1" stop-color="${a.end}" />
       </linearGradient>
       <linearGradient
-        id="${getId(id, 'footer-paint')}"
+        id="${l(t, "footer-paint")}"
         x1="224"
         y1="157.738"
         x2="1.00001"
@@ -181,20 +149,17 @@ const getLayoutSvg = (variant, id, color) => {
         <stop offset="1" stop-color="#272727" />
       </linearGradient>
     </defs>
-    ${content}
-  </svg>`;
-    }
-    if (variant === 'app-purchase') {
-        return (content, width, height) => `<svg
-    width="${width}"
-    height="${height}"
+    ${i}
+  </svg>` : e === "app-purchase" ? (i, s, r) => `<svg
+    width="${s}"
+    height="${r}"
     viewBox="0 0 228 258"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g filter="url(#${getId(id, 'layout-filter')})">
+    <g filter="url(#${l(t, "layout-filter")})">
       <mask
-        id="${getId(id, 'layout-mask')}"
+        id="${l(t, "layout-mask")}"
         style="mask-type: alpha"
         maskUnits="userSpaceOnUse"
         x="4"
@@ -205,16 +170,16 @@ const getLayoutSvg = (variant, id, color) => {
           d="M4 14C4 7.37258 9.37258 2 16 2H212C218.627 2 224 7.37258 224 14V240C224 246.627 218.627 252 212 252H16C9.37258 252 4 246.627 4 240V14Z"
           fill="#7D37D7" />
       </mask>
-      <g mask="url(#${getId(id, 'layout-mask')})">
-        <rect x="4" y="2" width="220" height="250" rx="12" fill="url(#${getId(id, 'header-paint')})" />
+      <g mask="url(#${l(t, "layout-mask")})">
+        <rect x="4" y="2" width="220" height="250" rx="12" fill="url(#${l(t, "header-paint")})" />
         <rect x="4.5" y="2.5" width="219" height="249" rx="11.5" stroke="black" stroke-opacity="0.08" />
         <rect x="4" y="2" width="220" height="125" fill="none" />
-        <rect x="4" y="127" width="220" height="125" fill="url(#${getId(id, 'footer-paint')})" />
+        <rect x="4" y="127" width="220" height="125" fill="url(#${l(t, "footer-paint")})" />
       </g>
     </g>
     <defs>
       <filter
-        id="${getId(id, 'layout-filter')}"
+        id="${l(t, "layout-filter")}"
         x="0"
         y="0"
         width="228"
@@ -235,17 +200,17 @@ const getLayoutSvg = (variant, id, color) => {
         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1583_54637" result="shape" />
       </filter>
       <linearGradient
-        id="${getId(id, 'header-paint')}"
+        id="${l(t, "header-paint")}"
         x1="224"
         y1="252"
         x2="46.7372"
         y2="-25.3178"
         gradientUnits="userSpaceOnUse">
-        <stop stop-color="${color.start}" />
-        <stop offset="1" stop-color="${color.end}" />
+        <stop stop-color="${a.start}" />
+        <stop offset="1" stop-color="${a.end}" />
       </linearGradient>
       <linearGradient
-        id="${getId(id, 'footer-paint')}"
+        id="${l(t, "footer-paint")}"
         x1="224"
         y1="157.738"
         x2="1.00001"
@@ -255,20 +220,17 @@ const getLayoutSvg = (variant, id, color) => {
         <stop offset="1" stop-color="#272727" />
       </linearGradient>
     </defs>
-    ${content}
-  </svg>`;
-    }
-    if (variant === 'app-passport') {
-        return (content, width, height) => `<svg
-    width="${width}"
-    height="${height}"
+    ${i}
+  </svg>` : e === "app-passport" ? (i, s, r) => `<svg
+    width="${s}"
+    height="${r}"
     viewBox="0 0 228 258"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g filter="url(#${getId(id, 'layout-filter')})">
+    <g filter="url(#${l(t, "layout-filter")})">
       <mask
-        id="${getId(id, 'layout-mask')}"
+        id="${l(t, "layout-mask")}"
         style="mask-type: alpha"
         maskUnits="userSpaceOnUse"
         x="4"
@@ -281,16 +243,16 @@ const getLayoutSvg = (variant, id, color) => {
           d="M4 14C4 7.37258 9.37258 2 16 2H212C218.627 2 224 7.37258 224 14V115C224 117.209 222.102 118.917 220.164 119.978C217.683 121.336 216 123.972 216 127C216 130.028 217.683 132.664 220.164 134.022C222.102 135.083 224 136.791 224 139V240C224 246.627 218.627 252 212 252H16C9.37258 252 4 246.627 4 240V139C4 136.791 5.89809 135.083 7.83588 134.022C10.3173 132.664 12 130.028 12 127C12 123.972 10.3173 121.336 7.83589 119.978C5.89809 118.917 4 117.209 4 115V14Z"
           fill="#7D37D7" />
       </mask>
-      <g mask="url(#${getId(id, 'layout-mask')})">
-        <rect x="4" y="2" width="220" height="250" rx="12" fill="url(#${getId(id, 'header-paint')})" />
+      <g mask="url(#${l(t, "layout-mask")})">
+        <rect x="4" y="2" width="220" height="250" rx="12" fill="url(#${l(t, "header-paint")})" />
         <rect x="4.5" y="2.5" width="219" height="249" rx="11.5" stroke="black" stroke-opacity="0.08" />
         <rect x="4" y="2" width="220" height="125" fill="none" />
-        <rect x="4" y="127" width="220" height="125" fill="url(#${getId(id, 'footer-paint')})" />
+        <rect x="4" y="127" width="220" height="125" fill="url(#${l(t, "footer-paint")})" />
       </g>
     </g>
     <defs>
       <filter
-        id="${getId(id, 'layout-filter')}"
+        id="${l(t, "layout-filter")}"
         x="0"
         y="0"
         width="228"
@@ -311,17 +273,17 @@ const getLayoutSvg = (variant, id, color) => {
         <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1583_54471" result="shape" />
       </filter>
       <linearGradient
-        id="${getId(id, 'header-paint')}"
+        id="${l(t, "header-paint")}"
         x1="224"
         y1="252"
         x2="46.7372"
         y2="-25.3178"
         gradientUnits="userSpaceOnUse">
-        <stop stop-color="${color.start}" />
-        <stop offset="1" stop-color="${color.end}" />
+        <stop stop-color="${a.start}" />
+        <stop offset="1" stop-color="${a.end}" />
       </linearGradient>
       <linearGradient
-        id="${getId(id, 'footer-paint')}"
+        id="${l(t, "footer-paint")}"
         x1="224"
         y1="157.738"
         x2="1.00001"
@@ -331,18 +293,15 @@ const getLayoutSvg = (variant, id, color) => {
         <stop offset="1" stop-color="#272727" />
       </linearGradient>
     </defs>
-    ${content}
-  </svg>`;
-    }
-    if (variant === 'app-kyc') {
-        return (content, width, height) => `<svg width="${width}" height="${height}" viewBox="0 0 228 258" fill="none" xmlns="http://www.w3.org/2000/svg"
+    ${i}
+  </svg>` : e === "app-kyc" ? (i, s, r) => `<svg width="${s}" height="${r}" viewBox="0 0 228 258" fill="none" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g clip-path="url(#${getId(id, 'border-top')})">
-    <g clip-path="url(#${getId(id, 'border-bottom')})">
+  <g clip-path="url(#${l(t, "border-top")})">
+    <g clip-path="url(#${l(t, "border-bottom")})">
       <path fill-rule="evenodd" clip-rule="evenodd"
         d="M224 2H4V127H224V2ZM102 12C99.7909 12 98 13.7909 98 16C98 18.2091 99.7909 20 102 20H126C128.209 20 130 18.2091 130 16C130 13.7909 128.209 12 126 12H102Z"
-        style="fill:${color.start};fill-opacity:1;" />
-      <g clip-path="url(#${getId(id, 'header-icon')})">
+        style="fill:${a.start};fill-opacity:1;" />
+      <g clip-path="url(#${l(t, "header-icon")})">
         <path
           d="M96.5 61C96.5 59.5413 97.0795 58.1424 98.1109 57.1109C99.1424 56.0795 100.541 55.5 102 55.5H104.5C105.952 55.4992 107.345 54.924 108.375 53.9L110.125 52.15C110.636 51.636 111.244 51.2281 111.913 50.9498C112.582 50.6714 113.3 50.5281 114.025 50.5281C114.75 50.5281 115.468 50.6714 116.137 50.9498C116.806 51.2281 117.414 51.636 117.925 52.15L119.675 53.9C120.705 54.925 122.1 55.5 123.55 55.5H126.05C127.509 55.5 128.908 56.0795 129.939 57.1109C130.971 58.1424 131.55 59.5413 131.55 61V63.5C131.55 64.95 132.125 66.345 133.15 67.375L134.9 69.125C135.414 69.6361 135.822 70.2438 136.1 70.9131C136.379 71.5824 136.522 72.3001 136.522 73.025C136.522 73.7499 136.379 74.4676 136.1 75.1369C135.822 75.8062 135.414 76.4139 134.9 76.925L133.15 78.675C132.126 79.7048 131.551 81.0977 131.55 82.55V85.05C131.55 86.5087 130.971 87.9076 129.939 88.9391C128.908 89.9705 127.509 90.55 126.05 90.55H123.55C122.098 90.5508 120.705 91.126 119.675 92.15L117.925 93.9C117.414 94.414 116.806 94.8219 116.137 95.1002C115.468 95.3786 114.75 95.5219 114.025 95.5219C113.3 95.5219 112.582 95.3786 111.913 95.1002C111.244 94.8219 110.636 94.414 110.125 93.9L108.375 92.15C107.345 91.126 105.952 90.5508 104.5 90.55H102C100.541 90.55 99.1424 89.9705 98.1109 88.9391C97.0795 87.9076 96.5 86.5087 96.5 85.05V82.55C96.4992 81.0977 95.924 79.7048 94.9 78.675L93.15 76.925C92.636 76.4139 92.2281 75.8062 91.9498 75.1369C91.6714 74.4676 91.5281 73.7499 91.5281 73.025C91.5281 72.3001 91.6714 71.5824 91.9498 70.9131C92.2281 70.2438 92.636 69.6361 93.15 69.125L94.9 67.375C95.924 66.3452 96.4992 64.9522 96.5 63.5V61Z"
           stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="3" stroke-linecap="round"
@@ -351,47 +310,42 @@ const getLayoutSvg = (variant, id, color) => {
           stroke-linecap="round" stroke-linejoin="round" />
       </g>
     </g>
-    <rect width="220" height="125" transform="translate(4 126)" fill="url(#${getId(id, 'body-paint')})" style="" />
-    ${content}
+    <rect width="220" height="125" transform="translate(4 126)" fill="url(#${l(t, "body-paint")})" style="" />
+    ${i}
   </g>
   <defs>
-    <linearGradient id="${getId(id, 'body-paint')}" x1="220" y1="30.7377" x2="-2.99999" y2="30.7377"
+    <linearGradient id="${l(t, "body-paint")}" x1="220" y1="30.7377" x2="-2.99999" y2="30.7377"
       gradientUnits="userSpaceOnUse">
       <stop stop-color="#101010"
         style="stop-color:#101010;stop-color:color(display-p3 0.0625 0.0625 0.0625);stop-opacity:1;" />
       <stop offset="1" stop-color="#272727"
         style="stop-color:#272727;stop-color:color(display-p3 0.1542 0.1542 0.1542);stop-opacity:1;" />
     </linearGradient>
-    <clipPath id="${getId(id, 'border-top')}">
+    <clipPath id="${l(t, "border-top")}">
       <rect x="4" y="2" width="220" height="250" rx="8" fill="white" style="fill:white;fill-opacity:1;" />
     </clipPath>
-    <clipPath id="${getId(id, 'border-bottom')}">
+    <clipPath id="${l(t, "border-bottom")}">
       <rect width="220" height="125" fill="white" style="fill:white;fill-opacity:1;" transform="translate(4 2)" />
     </clipPath>
-    <clipPath id="${getId(id, 'header-icon')}">
+    <clipPath id="${l(t, "header-icon")}">
       <rect width="60" height="60" fill="white" style="fill:white;fill-opacity:1;" transform="translate(84 43)" />
     </clipPath>
   </defs>
-</svg>`;
-    }
-    return () => '';
-};
-exports.getLayoutSvg = getLayoutSvg;
-const getHeaderSvg = (variant, id, header) => {
-    const gid = getId(id, 'header');
-    if (variant === 'did-space') {
-        return `<g id="${gid}" transform="translate(90, 42)" width="48" height="47" viewBox="0 0 48 47" fill="none">
+</svg>` : () => "", Z = (e, t, a) => {
+  const i = l(t, "header");
+  if (e === "did-space")
+    return `<g id="${i}" transform="translate(90, 42)" width="48" height="47" viewBox="0 0 48 47" fill="none">
     <path
       d="M27.5999 2.53821L31.9962 0H47.9999V46.9586H31.9962L14.7939 37.0269L14.7939 9.93175L16.8325 8.75477L20.4222 10.8272L18.3836 12.0042V34.9544L32.9581 43.369H44.4103V3.58962H32.9581L31.1896 4.61068L27.5999 2.53821Z"
-      fill="url(#${getId(id, 'space-gradient1')})" />
+      fill="url(#${l(t, "space-gradient1")})" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M29.6164 34.9544V12.0042L15.0419 3.58962H3.58962V43.369H15.0419L16.8159 42.3448L20.4055 44.4173L16.0037 46.9586H0V0H16.0037L33.206 9.93175V37.0269L31.1729 38.2007L27.5833 36.1282L29.6164 34.9544Z"
-      fill="url(#${getId(id, 'space-gradient2')})" />
+      fill="url(#${l(t, "space-gradient2")})" />
     <defs>
       <linearGradient
-        id="${getId(id, 'space-gradient1')}"
+        id="${l(t, "space-gradient1")}"
         x1="31.3969"
         y1="0"
         x2="31.3969"
@@ -401,7 +355,7 @@ const getHeaderSvg = (variant, id, header) => {
         <stop offset="1" stop-color="white" />
       </linearGradient>
       <linearGradient
-        id="${getId(id, 'space-gradient2')}"
+        id="${l(t, "space-gradient2")}"
         x1="16.603"
         y1="0"
         x2="16.603"
@@ -412,9 +366,8 @@ const getHeaderSvg = (variant, id, header) => {
       </linearGradient>
     </defs>
   </g>`;
-    }
-    if (variant === 'app-purchase') {
-        return `<g id="${gid}" transform="translate(90, 42)" width="47" height="48" viewBox="0 0 47 48" fill="none">
+  if (e === "app-purchase")
+    return `<g id="${i}" transform="translate(90, 42)" width="47" height="48" viewBox="0 0 47 48" fill="none">
     <path
       opacity="0.6"
       fill-rule="evenodd"
@@ -432,9 +385,8 @@ const getHeaderSvg = (variant, id, header) => {
       d="M15.9236 25.8547V19.5111H22.2671V25.8547H15.9236ZM28.3539 19.5111H30.2908V21.448C30.2908 23.8817 28.3179 25.8547 25.8842 25.8547H23.9473V23.9177C23.9473 21.484 25.9202 19.5111 28.3539 19.5111ZM15.9236 33.8523H22.2671V27.5088H15.9236V33.8523ZM23.9473 33.8523V27.5088H30.2908V33.8523H23.9473Z"
       fill="white" />
   </g>`;
-    }
-    if (variant === 'app-space') {
-        return `<g id="${gid}" transform="translate(90, 42)" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  if (e === "app-space")
+    return `<g id="${i}" transform="translate(90, 42)" width="48" height="48" viewBox="0 0 48 48" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -446,57 +398,46 @@ const getHeaderSvg = (variant, id, header) => {
       d="M37.6141 18.623L23.7901 10.6417L9.96606 18.623V34.5856L23.7901 42.5669L37.6141 34.5856V18.623ZM11.4061 19.4544L23.7901 12.3045L36.1741 19.4544V33.7542L23.7901 40.9041L11.4061 33.7542V19.4544ZM21.4098 17.2848C21.4981 16.9757 21.7806 16.7626 22.1021 16.7626H25.478C25.7995 16.7626 26.082 16.9757 26.1703 17.2848L26.8128 19.5335L28.4022 20.4511L30.6709 19.8832C30.9827 19.8051 31.3085 19.9432 31.4693 20.2216L33.1572 23.1453C33.318 23.4237 33.2747 23.7749 33.0511 24.0059L31.4249 25.6867V27.5219L33.0511 29.2027C33.2747 29.4337 33.318 29.7849 33.1572 30.0633L31.4693 32.987C31.3085 33.2654 30.9827 33.4035 30.6709 33.3254L28.4022 32.7575L26.8128 33.6751L26.1703 35.9238C26.082 36.2329 25.7995 36.446 25.478 36.446H22.1021C21.7806 36.446 21.4981 36.2329 21.4098 35.9238L20.7673 33.6751L19.1779 32.7575L16.9093 33.3254C16.5974 33.4035 16.2716 33.2654 16.1109 32.987L14.4229 30.0633C14.2622 29.7849 14.3055 29.4337 14.529 29.2027L16.1552 27.5219V25.6867L14.529 24.0059C14.3055 23.7749 14.2622 23.4237 14.4229 23.1453L16.1109 20.2216C16.2716 19.9432 16.5974 19.8051 16.9093 19.8832L19.1779 20.4511L20.7673 19.5335L21.4098 17.2848ZM21.7396 20.6349C21.9014 20.5415 22.0205 20.3888 22.0719 20.2092L22.6452 18.2026H24.9349L25.5083 20.2092C25.5596 20.3888 25.6787 20.5415 25.8406 20.6349L27.9345 21.8438C28.0963 21.9373 28.2881 21.9641 28.4693 21.9187L30.4937 21.4119L31.6386 23.3949L30.1875 24.8947C30.0576 25.029 29.9849 25.2085 29.9849 25.3954V27.8132C29.9849 28.0001 30.0576 28.1796 30.1875 28.3139L31.6386 29.8137L30.4937 31.7967L28.4693 31.2899C28.2881 31.2445 28.0963 31.2713 27.9345 31.3648L25.8406 32.5737C25.6787 32.6671 25.5596 32.8198 25.5083 32.9994L24.9349 35.006H22.6452L22.0719 32.9994C22.0205 32.8198 21.9014 32.6671 21.7396 32.5737L19.6457 31.3648C19.4839 31.2713 19.2921 31.2445 19.1108 31.2899L17.0864 31.7967L15.9415 29.8137L17.3926 28.3139C17.5226 28.1796 17.5952 28.0001 17.5952 27.8132V25.3954C17.5952 25.2085 17.5226 25.029 17.3926 24.8947L15.9415 23.3949L17.0864 21.4119L19.1108 21.9187C19.2921 21.9641 19.4839 21.9373 19.6457 21.8438L21.7396 20.6349ZM23.7901 31.2306C21.2351 31.2306 19.1638 29.1593 19.1638 26.6043C19.1638 24.0493 21.2351 21.9781 23.7901 21.9781C26.3451 21.9781 28.4163 24.0493 28.4163 26.6043C28.4163 29.1593 26.3451 31.2306 23.7901 31.2306ZM26.9763 26.6043C26.9763 28.364 25.5498 29.7906 23.7901 29.7906C22.0303 29.7906 20.6038 28.364 20.6038 26.6043C20.6038 24.8446 22.0303 23.418 23.7901 23.418C25.5498 23.418 26.9763 24.8446 26.9763 26.6043Z"
       fill="white" />
   </g>`;
-    }
-    if (variant === 'app-passport') {
-        const clipId = getId(id, 'passport-avatar-mask');
-        if (header.icon) {
-            return `<g id="${gid}" transform="translate(0, 30)" width="228" height="70" viewBox="0 0 228 70">
+  if (e === "app-passport") {
+    const s = l(t, "passport-avatar-mask");
+    return a.icon ? `<g id="${i}" transform="translate(0, 30)" width="228" height="70" viewBox="0 0 228 70">
     <defs>
-      <clipPath id="${clipId}">
+      <clipPath id="${s}">
         <circle cx="114" cy="20" r="20" fill="#FFFFFF" />
       </clipPath>
     </defs>
-    <image xlink:href="${header.icon}" x="94" y="0" width="40" height="40" clip-path="url(#${clipId})" />
-    <text x="50%" y="55" width="228" font-size="14" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica, Arial, sans-serif">${header.name}</text>
-  </g>`;
-        }
-        return `<g id="${gid}" transform="translate(0, 30)" width="228" height="70" viewBox="0 0 228 70">
+    <image xlink:href="${a.icon}" x="94" y="0" width="40" height="40" clip-path="url(#${s})" />
+    <text x="50%" y="55" width="228" font-size="14" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica, Arial, sans-serif">${a.name}</text>
+  </g>` : `<g id="${i}" transform="translate(0, 30)" width="228" height="70" viewBox="0 0 228 70">
     <circle cx="114" cy="15" r="20" fill="#D9D9D9"/>
-    <text x="50%" y="55" width="228" font-size="14" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica, Arial, sans-serif">${header.name}</text>
+    <text x="50%" y="55" width="228" font-size="14" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle" font-family="Helvetica, Arial, sans-serif">${a.name}</text>
   </g>`;
-    }
-    if (variant === 'app-kyc') {
-        return `<g id="${getId(id, 'holder')}" transform="translate(24, 151)" width="180" height="24">
-  <circle cx="12" cy="12" r="12" fill="url(#${getId(id, 'holder-image')})" />
+  }
+  return e === "app-kyc" ? `<g id="${l(t, "holder")}" transform="translate(24, 151)" width="180" height="24">
+  <circle cx="12" cy="12" r="12" fill="url(#${l(t, "holder-image")})" />
   <foreignObject x="32" y="0" width="156" height="24">
     <div
       xmlns="http://www.w3.org/1999/xhtml"
       style="font-size: 18px; line-height: 24px; color: #FFFFFF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
     >
-      ${header.name}
+      ${a.name}
     </div>
   </foreignObject>
   <defs>
-    <pattern id="${getId(id, 'holder-image')}" width="24" height="24" patternUnits="userSpaceOnUse">
+    <pattern id="${l(t, "holder-image")}" width="24" height="24" patternUnits="userSpaceOnUse">
       <image
-        xlink:href="${header.icon}"
+        xlink:href="${a.icon}"
         x="0"
         y="0"
         width="24"
         height="24" />
     </pattern>
   </defs>
-</g>`;
-    }
-    return '';
-};
-exports.getHeaderSvg = getHeaderSvg;
-const getIssuerSvg = (issuer, id, variant, fontSize = 12) => {
-    const translateX = variant === 'app-kyc' ? 24 : 24;
-    const translateY = variant === 'app-kyc' ? 188 : 151;
-    if (variant === 'app-kyc') {
-        return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
-  <g id="${getId(id, 'issuer-badge')}">
+</g>` : "";
+}, M = (e, t, a, i = 12) => {
+  const r = a === "app-kyc" ? 188 : 151;
+  return a === "app-kyc" ? `<g id="${l(t, "issuer")}" transform="translate(24, ${r})" width="180" height="14">
+  <g id="${l(t, "issuer-badge")}">
     <path
       d="M11.3727 8.65674L12.5195 10.6436C12.5667 10.7254 12.5933 10.8174 12.5972 10.9118C12.601 11.0061 12.5818 11.1 12.5414 11.1854C12.501 11.2707 12.4404 11.345 12.365 11.4018C12.2895 11.4586 12.2014 11.4963 12.1083 11.5116L12.0423 11.518L11.977 11.5174L10.2661 11.4066L9.506 12.9442C9.46474 13.0275 9.4042 13.0997 9.32941 13.1549C9.25463 13.21 9.16775 13.2465 9.07602 13.2614C8.98428 13.2762 8.89033 13.2689 8.80198 13.2402C8.71362 13.2114 8.6334 13.1619 8.568 13.0959L8.52017 13.0411L8.47817 12.9769L7.33017 10.9895C8.13831 10.939 8.92378 10.7021 9.6251 10.2974C10.3264 9.89269 10.9246 9.33115 11.3727 8.65674Z"
       style="fill:white;fill-opacity:1;" />
@@ -510,55 +451,46 @@ const getIssuerSvg = (issuer, id, variant, fontSize = 12) => {
   <foreignObject x="18" y="-2" width="156" height="18">
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      style="font-size: ${fontSize}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+      style="font-size: ${i}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
     >
-      ${issuer.name}
+      ${e.name}
     </div>
   </foreignObject>
-</g>`;
-    }
-    if (issuer.icon) {
-        return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
-  <rect x="0" y="0" width="14" height="14" rx="2" fill="url(#${getId(id, 'issuer-image')})" />
+</g>` : e.icon ? `<g id="${l(t, "issuer")}" transform="translate(24, ${r})" width="180" height="14">
+  <rect x="0" y="0" width="14" height="14" rx="2" fill="url(#${l(t, "issuer-image")})" />
   <foreignObject x="20" y="-2" width="156" height="18">
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      style="font-size: ${fontSize}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+      style="font-size: ${i}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
     >
-      ${issuer.name}
+      ${e.name}
     </div>
   </foreignObject>
   <defs>
-    <pattern id="${getId(id, 'issuer-image')}" width="14" height="14" patternUnits="userSpaceOnUse">
+    <pattern id="${l(t, "issuer-image")}" width="14" height="14" patternUnits="userSpaceOnUse">
       <image
-        xlink:href="${issuer.icon}"
+        xlink:href="${e.icon}"
         x="0"
         y="0"
         width="14"
         height="14" />
     </pattern>
   </defs>
-</g>`;
-    }
-    return `<g id="${getId(id, 'issuer')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
+</g>` : `<g id="${l(t, "issuer")}" transform="translate(24, ${r})" width="180" height="14">
   <rect x="0" y="0" width="14" height="14" rx="2" fill="#6D6D6D"/>
   <foreignObject x="0" y="-2" width="176" height="18">
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      style="font-size: ${fontSize}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
+      style="font-size: ${i}px; line-height: 18px; color: #D1D1D1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
     >
-      ${issuer.name}
+      ${e.name}
     </div>
   </foreignObject>
 </g>`;
-};
-exports.getIssuerSvg = getIssuerSvg;
-const getExtraSvg = (extra, id, variant, fontSize = 12) => {
-    const translateX = variant === 'app-kyc' ? 24 : 24;
-    const translateY = variant === 'app-kyc' ? 211 : 181;
-    if (variant === 'app-kyc' && extra.key === 'email') {
-        return `<g id="${getId(id, 'extra')}" transform="translate(${translateX}, ${translateY})" width="180" height="15">
-  <g id="${getId(id, 'extra-badge')}">
+}, v = (e, t, a, i = 12) => {
+  const r = a === "app-kyc" ? 211 : 181;
+  return a === "app-kyc" && e.key === "email" ? `<g id="${l(t, "extra")}" transform="translate(24, ${r})" width="180" height="15">
+  <g id="${l(t, "extra-badge")}">
     <path
       d="M12.8333 4.89545V10.4167C12.8334 10.8631 12.6628 11.2926 12.3566 11.6173C12.0504 11.9421 11.6316 12.1376 11.186 12.1638L11.0833 12.1667H2.91666C2.47029 12.1667 2.04078 11.9962 1.71601 11.6899C1.39124 11.3837 1.19577 10.965 1.16958 10.5194L1.16666 10.4167V4.89545L6.67625 8.5687L6.74391 8.6072C6.82366 8.64616 6.91124 8.66641 7 8.66641C7.08875 8.66641 7.17634 8.64616 7.25608 8.6072L7.32375 8.5687L12.8333 4.89545Z"
       style="fill:white;fill-opacity:1;" />
@@ -569,60 +501,53 @@ const getExtraSvg = (extra, id, variant, fontSize = 12) => {
   <text
     x="18"
     y="8"
-    font-size="${fontSize}"
+    font-size="${i}"
     font-family="Helvetica, Arial, sans-serif"
     fill="#D1D1D1"
     text-anchor="start"
     alignment-baseline="middle"
     dominant-baseline="middle">
-    ${extra.value}
+    ${e.value}
   </text>
-</g>`;
-    }
-    return `<g id="${getId(id, 'extra')}" transform="translate(${translateX}, ${translateY})" width="180" height="14">
+</g>` : `<g id="${l(t, "extra")}" transform="translate(24, ${r})" width="180" height="14">
   <text
     x="0"
     y="8"
-    font-size="${fontSize}"
+    font-size="${i}"
     font-family="Helvetica, Arial, sans-serif"
     fill="#D1D1D1"
     text-anchor="start"
     alignment-baseline="middle"
     dominant-baseline="middle">
-    ${extra.key}
+    ${e.key}
     <tspan
-      dx="${extra.key.length ? 4 : 0}"
+      dx="${e.key.length ? 4 : 0}"
       dy="0"
-      font-size="${fontSize}"
+      font-size="${i}"
       font-family="Helvetica, Arial, sans-serif"
       fill="#FFFFFF"
       text-anchor="start"
       alignment-baseline="middle"
       dominant-baseline="middle">
-      ${extra.value}
+      ${e.value}
     </tspan>
   </text>
 </g>`;
-};
-exports.getExtraSvg = getExtraSvg;
-const getDidSvg = (did, id, fontSize = 10) => {
-    const address = did.replace('did:abt:', '');
-    const isEth = isEthereumDid(address);
-    const color = isEth ? getEthereumColor(address) : (0, did_motif_1.getDIDMotifInfo)(address).color;
-    const prefix = `<g id="${getId(id, 'did-prefix')}" transform="translate(24, 210)" height="14">
+}, k = (e, t, a = 10) => {
+  const i = e.replace("did:abt:", ""), s = x(i), r = s ? w(i) : g(i).color, n = `<g id="${l(t, "did-prefix")}" transform="translate(24, 210)" height="14">
   <text
     x="0"
     y="8"
-    font-size="${fontSize}"
+    font-size="${a}"
     font-family="Helvetica, Arial, sans-serif"
-    fill="${color}"
+    fill="${r}"
     text-anchor="start"
     alignment-baseline="middle"
     dominant-baseline="middle">
     DID:<tspan
       dx="0"
       dy="0"
-      font-size="${fontSize}"
+      font-size="${a}"
       font-family="Helvetica, Arial, sans-serif"
       fill="#D1D1D1"
       text-anchor="start"
@@ -630,40 +555,35 @@ const getDidSvg = (did, id, fontSize = 10) => {
       dominant-baseline="middle">ABT:</tspan>
   </text>
 </g>`;
-    let motif = '';
-    if (isEth === false) {
-        motif = (0, did_motif_1.toSvg)(address)
-            .replace('<svg ', `<g id="${getId(id, 'did-motif')}" transform="translate(67, 211) scale(0.12, 0.12)" width="12" height="12" `)
-            .replace('</svg>', '</g>');
-    }
-    const suffix = `<g id="${getId(id, 'did-suffix')}" transform="translate(${isEth ? 67 : 80}, 210)" height="14">
+  let o = "";
+  s === !1 && (o = C(i).replace(
+    "<svg ",
+    `<g id="${l(t, "did-motif")}" transform="translate(67, 211) scale(0.12, 0.12)" width="12" height="12" `
+  ).replace("</svg>", "</g>"));
+  const c = `<g id="${l(t, "did-suffix")}" transform="translate(${s ? 67 : 80}, 210)" height="14">
   <text
     x="0"
     y="8"
-    font-size="${fontSize}"
+    font-size="${a}"
     font-family="monospace, Arial, sans-serif"
     fill="#D1D1D1"
     text-anchor="start"
     alignment-baseline="middle"
     dominant-baseline="middle">
-    ${(0, exports.formatDid)(address)}
+    ${y(i)}
   </text>
 </g>`;
-    return [prefix, motif, suffix].filter(Boolean).join('');
-};
-exports.getDidSvg = getDidSvg;
-const getVerifiableBadge = (id) => {
-    const gid = getId(id, 'verifiable-badge');
-    return `<g id="${gid}" transform="translate(189, 206)" width="22" height="22" viewBox="0 0 22 22" fill="none">
+  return [n, o, c].filter(Boolean).join("");
+}, V = (e) => `<g id="${l(e, "verifiable-badge")}" transform="translate(189, 206)" width="22" height="22" viewBox="0 0 22 22" fill="none">
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M9.32218 0.226122L10.6305 0.0488281L10.6849 0.437063L9.84501 0.550946L9.90971 1.03495L10.6267 0.937887L10.6797 1.32612L9.96277 1.42318L10.0715 2.22942L9.60301 2.29283L9.32218 0.226122ZM7.90771 0.615652L7.46254 0.776122L8.17301 2.74448L8.61818 2.584L7.90771 0.615652ZM4.86783 2.18153L5.50065 1.77259C5.87336 1.53189 6.26289 1.46459 6.53595 1.88259C6.71202 2.15212 6.68901 2.3969 6.55052 2.60097L7.39783 3.04471L6.95265 3.32553L6.20681 2.91365L5.99371 3.04989L6.40265 3.68271L6.00536 3.94153L4.86783 2.18153ZM5.98983 2.60342C6.19948 2.474 6.24865 2.30706 6.14254 2.13365C6.03642 1.96024 5.88371 1.97448 5.67148 2.10906L5.4683 2.23848L5.78665 2.73153L5.98983 2.60342ZM3.72771 3.16506L2.85289 4.14083L4.40971 5.53848L5.30654 4.52906L5.01148 4.27024L4.43042 4.9173L4.07195 4.59248L4.54689 4.06189L4.25183 3.80306L3.7756 4.33495L3.46371 4.04765L4.02277 3.42389L3.72771 3.16506ZM1.27018 6.79765L1.49795 6.35118L2.48018 6.57118C2.5982 6.59558 2.70984 6.62299 2.82194 6.65053L2.82197 6.65053L2.82199 6.65054C2.9299 6.67704 3.03825 6.70365 3.15313 6.72777V6.71612C3.06117 6.63161 2.97134 6.55416 2.88178 6.47695L2.88178 6.47694L2.88177 6.47694L2.88177 6.47693C2.79991 6.40636 2.71829 6.33598 2.63548 6.26059L1.87971 5.598L2.09971 5.16706L3.67465 6.68118L3.41583 7.18718L1.27018 6.79765ZM12.0668 13.0321V8.62819L9.27011 7.0135H7.07252V14.6468H9.27011L9.61052 14.4503L10.2993 14.848L9.45467 15.3356H6.3837V6.32468H9.45467L12.7556 8.2305V13.4298L12.3655 13.6551L11.6767 13.2574L12.0668 13.0321ZM11.6799 6.81176L12.5235 6.3247H15.5945V15.3356H12.7914C12.6159 15.3356 12.4435 15.2894 12.2914 15.2017L9.22253 13.4298V8.23051L9.61372 8.00466L10.3025 8.40235L9.91135 8.6282V13.0321L12.7081 14.6468H14.9057V7.01351H12.7081L12.3687 7.20944L11.6799 6.81176ZM3.02371 13.5788C2.87489 13.0612 2.35465 12.7364 1.68042 12.9318C0.997126 13.1311 0.765479 13.6642 0.915596 14.1832C0.949598 14.3085 1.01116 14.4247 1.09579 14.5232C1.18042 14.6217 1.28599 14.7001 1.40477 14.7526L1.62089 14.4174C1.54869 14.3853 1.48413 14.3383 1.43148 14.2794C1.37883 14.2205 1.33929 14.1511 1.31548 14.0758C1.23007 13.7807 1.42418 13.5115 1.83313 13.3925C2.24207 13.2734 2.55007 13.4222 2.6303 13.7005C2.64794 13.7684 2.65199 13.8392 2.64222 13.9087C2.63245 13.9782 2.60905 14.0451 2.57336 14.1055L2.9383 14.266C2.99751 14.1629 3.03556 14.049 3.05022 13.931C3.06489 13.813 3.05588 13.6933 3.02371 13.5788ZM3.50642 14.9351L3.90889 15.5821C4.14571 15.9626 4.20654 16.3586 3.77948 16.6174C3.50841 16.7817 3.2655 16.7593 3.06364 16.6238L2.59795 17.478L2.31583 17.0238L2.74969 16.2773L2.6083 16.0506L1.96124 16.4518L1.71148 16.0467L3.50642 14.9351ZM3.06124 16.0635C3.19065 16.2771 3.3563 16.334 3.5336 16.2253C3.71089 16.1166 3.69795 15.9665 3.56595 15.7491L3.43654 15.542L2.93183 15.8552L3.06124 16.0635ZM5.8863 17.8404L4.91571 16.9345L3.47536 18.4861L4.46795 19.4114L4.74877 19.1086L4.10171 18.5094L4.4343 18.1522L4.96101 18.644L5.23407 18.3502L4.70736 17.8585L4.99465 17.5531L5.61324 18.1315L5.8863 17.8404ZM6.62136 18.3761L7.15065 18.6531C7.72265 18.9507 7.94265 19.4295 7.60748 20.0766C7.2723 20.7237 6.7443 20.8285 6.1956 20.5425L5.64301 20.2539L6.62136 18.3761ZM6.32501 20.1711C6.64207 20.3367 6.93842 20.2927 7.17266 19.8449C7.40689 19.3972 7.26454 19.1448 6.94748 18.9792L6.86595 18.9365L6.24477 20.1284L6.32501 20.1711ZM10.2061 19.6871L8.91195 19.4114L8.47324 21.4678L9.79971 21.7499L9.88383 21.3617L9.02324 21.1818L9.12418 20.7055L9.82948 20.8557L9.9123 20.4674L9.2083 20.3173L9.29501 19.898L10.1232 20.0753L10.2061 19.6871ZM11.1119 19.7647L11.6011 19.7337L12.2171 20.7482L12.4552 21.1986H12.4682C12.4606 21.152 12.452 21.1022 12.443 21.0501L12.443 21.0501C12.4093 20.8548 12.3704 20.6292 12.3582 20.4351L12.3116 19.6897L12.7658 19.6612L12.8952 21.7706L12.4061 21.8017L11.7901 20.7845L11.5519 20.3367H11.539C11.5471 20.3861 11.5559 20.4378 11.5651 20.491L11.5651 20.4913C11.5986 20.6862 11.6355 20.9012 11.6477 21.0964L11.6956 21.8457L11.2414 21.8741L11.1119 19.7647ZM13.6704 19.8812L14.2191 19.6871L14.7924 21.3034L15.2428 21.1442L14.6721 19.5279L15.2234 19.3351L15.0939 18.9572L13.541 19.5033L13.6704 19.8812ZM15.8031 18.5431L16.2095 18.292L17.3224 20.0882L16.9161 20.3393L15.8031 18.5431ZM17.7132 17.0458L17.303 17.4444L18.2956 19.4244L18.6489 19.084L18.3941 18.6348L18.8557 18.1822L19.2985 18.4525L19.6622 18.1005L17.7132 17.0458ZM18.5275 17.9818L18.3551 17.8766C18.2405 17.8103 18.1169 17.7327 17.9943 17.6557C17.9135 17.605 17.8331 17.5546 17.7559 17.5078L17.7469 17.5168L17.7557 17.5312C17.8724 17.7228 18.0005 17.9331 18.1028 18.1212L18.2027 18.2974L18.5275 17.9818ZM18.5932 16.0066L18.8417 15.5989L20.3041 16.4906L20.7389 15.7788L21.0805 15.9872L20.3972 17.1079L18.5932 16.0066ZM21.1038 14.4304L21.3381 14.7888C21.5849 14.64 21.7682 14.4055 21.8531 14.1301C21.9994 13.6474 21.7936 13.2799 21.4584 13.1777C21.1737 13.0897 20.9602 13.1945 20.7855 13.4106L20.603 13.6371C20.4788 13.7924 20.3843 13.9075 20.2691 13.8726C20.1539 13.8377 20.119 13.7173 20.1669 13.5594C20.2163 13.4062 20.3174 13.275 20.4529 13.188L20.2355 12.8697C20.0129 12.992 19.8467 13.1963 19.7722 13.4391C19.6492 13.8622 19.8252 14.244 20.1604 14.3449C20.2839 14.3807 20.4155 14.3768 20.5367 14.3339C20.6579 14.2909 20.7625 14.2111 20.8359 14.1055L21.0275 13.8726L21.0309 13.8685C21.1558 13.7168 21.2382 13.6167 21.3575 13.6539C21.4778 13.6914 21.5244 13.8066 21.4662 13.9981C21.3986 14.1796 21.2707 14.3322 21.1038 14.4304ZM12.4255 0.0967106L11.9544 0.0617694L11.7991 2.14789L12.2715 2.18283L12.4255 0.0967106ZM14.2592 0.430593L14.8015 0.593652L14.8248 2.79365L14.3459 2.64871L14.3668 2.12973L13.7601 1.9465L13.4879 2.39377L13.0259 2.254L14.2592 0.430593ZM14.3899 1.55518L14.3822 1.74864L13.9585 1.62052L14.0574 1.45812C14.166 1.28796 14.2813 1.08628 14.3877 0.900319L14.3877 0.900299L14.4107 0.86024H14.4223C14.4189 0.944179 14.4136 1.03189 14.4082 1.12017L14.4082 1.12021C14.3991 1.26873 14.3899 1.41883 14.3899 1.55518ZM17.2008 1.74024L16.5964 1.352L15.4757 3.12236L16.1305 3.53906C16.5136 3.78236 16.9199 3.81471 17.1477 3.45495C17.2142 3.36233 17.2452 3.24887 17.235 3.1353C17.2248 3.02172 17.1741 2.91561 17.0921 2.83636L17.0998 2.826C17.193 2.83723 17.2874 2.82105 17.3716 2.77945C17.4557 2.73785 17.5258 2.67263 17.5735 2.59177C17.7883 2.25789 17.567 1.97318 17.2008 1.74024ZM16.7737 3.17671C16.6728 3.33459 16.511 3.34236 16.2936 3.20518L16.0645 3.06283L16.3544 2.6073L16.5822 2.74836C16.8022 2.88812 16.8747 3.01883 16.7737 3.17671ZM17.1464 2.39506C17.0649 2.52448 16.9264 2.55812 16.7336 2.42871L16.5408 2.30965L16.7996 1.91106L16.9898 2.03142C17.1762 2.14918 17.2279 2.26565 17.1464 2.39506ZM18.9918 3.13271L19.3115 3.48083L18.064 4.62871L18.6243 5.23565L18.3318 5.50483L17.4518 4.54977L18.9918 3.13271ZM21.2928 6.38612L20.6729 5.23177L18.8262 6.22177L19.4603 7.40459L19.8149 7.21695L19.4034 6.45083L19.8278 6.22306L20.1643 6.85071L20.5137 6.66306L20.1772 6.03542L20.5474 5.83612L20.9434 6.57377L21.2928 6.38612Z"
-    fill="url(#${getId(id, 'badge-gradient')})"
+    fill="url(#${l(e, "badge-gradient")})"
   />
   <defs>
     <radialGradient
-      id="${getId(id, 'badge-gradient')}"
+      id="${l(e, "badge-gradient")}"
       cx="0"
       cy="0"
       r="1"
@@ -675,15 +595,9 @@ const getVerifiableBadge = (id) => {
       <stop offset="1" stop-color="#94F0BA" />
     </radialGradient>
   </defs>
-</g>`;
-};
-exports.getVerifiableBadge = getVerifiableBadge;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getChainBadge = (chain, only, id) => {
-    const gid = getId(id, 'chain-badge');
-    const x = only ? 189 : 162;
-    if (chain === 'ethereum') {
-        return `<g id="${gid}" transform="translate(${x}, 205)" width="24" height="24" viewBox="0 0 24 24">
+</g>`, H = (e, t, a) => {
+  const i = l(a, "chain-badge"), s = t ? 189 : 162;
+  return e === "ethereum" ? `<g id="${i}" transform="translate(${s}, 205)" width="24" height="24" viewBox="0 0 24 24">
     <defs>
       <style>
         .cls-1,
@@ -765,10 +679,7 @@ const getChainBadge = (chain, only, id) => {
       </g>
       <path class="cls-3" d="M15,12.09l-3,1.82L9,12.09,12,7Zm-3,2.4L9,12.68,12,17l3-4.32Z" />
     </g>
-  </g>`;
-    }
-    if (chain === 'arcblock') {
-        return `<g id="${gid}" transform="translate(${x}, 205)" width="24" height="24" viewBox="0 0 24 24">
+  </g>` : e === "arcblock" ? `<g id="${i}" transform="translate(${s}, 205)" width="24" height="24" viewBox="0 0 24 24">
     <defs>
       <style>
         .cls-1 {
@@ -871,63 +782,62 @@ const getChainBadge = (chain, only, id) => {
         />
       </g>
     </g>
-  </g>`;
-    }
-    return '';
-};
-exports.getChainBadge = getChainBadge;
-const getBadgesSvg = (verifiable, chain, id) => {
-    const verifiableBadge = verifiable ? (0, exports.getVerifiableBadge)(id) : '';
-    const chainBadge = (0, exports.getChainBadge)(chain, !verifiable, id);
-    return [verifiableBadge, chainBadge].filter(Boolean).join('');
-};
-exports.getBadgesSvg = getBadgesSvg;
-const getTagSvg = (tag, variant, id) => {
-    const colors = {
-        success: '#34BE74',
-        error: '#F16E6E',
-        info: '#0775F8',
-        warning: '#DE9E37',
-    };
-    if (tag) {
-        const filterId = getId(id, 'tag-distort');
-        return `<g id="${getId(id, 'tag')}" transform="translate(112,-36) rotate(45)">
-      <rect x="60" y="0" width="95" height="30" stroke="${colors[variant]}" stroke-width="2" />
+  </g>` : "";
+}, D = (e, t, a) => {
+  const i = e ? V(a) : "", s = H(t, !e, a);
+  return [i, s].filter(Boolean).join("");
+}, F = (e, t, a) => {
+  const i = {
+    success: "#34BE74",
+    error: "#F16E6E",
+    info: "#0775F8",
+    warning: "#DE9E37"
+  };
+  if (e) {
+    const s = l(a, "tag-distort");
+    return `<g id="${l(a, "tag")}" transform="translate(112,-36) rotate(45)">
+      <rect x="60" y="0" width="95" height="30" stroke="${i[t]}" stroke-width="2" />
       <text
     x="104"
     y="12"
     font-size="14"
     font-weight="bold"
     font-family="Helvetica, Arial, sans-serif"
-    fill="${colors[variant]}"
+    fill="${i[t]}"
     text-anchor="middle"
     alignment-baseline="middle"
-    dominant-baseline="middle" filter="url(#${filterId})">${tag.toUpperCase()}</text>
+    dominant-baseline="middle" filter="url(#${s})">${e.toUpperCase()}</text>
     <defs>
-      <filter id="${filterId}">
+      <filter id="${s}">
         <feTurbulence baseFrequency="0.01 0.01" numOctaves="1" result="noise"  />
         <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="R" />
       </filter>
     </defs>
     </g>`;
-    }
-    return '';
+  }
+  return "";
+}, b = (e = 8) => [...Array(e)].map(() => Math.random().toString(36)[2]).join(""), U = (e) => {
+  const t = e.id || b(8), a = e.width || m, i = e.height || u, s = e.color || d[e.variant] || d["app-passport"], r = $(e.variant, t, s), n = Z(e.variant, t, e.header), o = M(e.issuer, t, e.variant), c = v(e.extra, t, e.variant), L = D(e.verifiable, e.chain, t), f = e.variant !== "app-kyc" ? k(e.did, t) : "", p = F(e.tag, e.tagVariant, t);
+  return r([n, o, c, L, f, p].filter(Boolean).join(""), a, i);
 };
-exports.getTagSvg = getTagSvg;
-const nanoid = (length = 8) => [...Array(length)].map(() => Math.random().toString(36)[2]).join('');
-exports.nanoid = nanoid;
-const getSvg = (props) => {
-    const id = props.id || (0, exports.nanoid)(8);
-    const width = props.width || DEFAULT_WIDTH;
-    const height = props.height || DEFAULT_HEIGHT;
-    const color = props.color || color_1.DEFAULT_COLORS[props.variant] || color_1.DEFAULT_COLORS['app-passport'];
-    const layout = (0, exports.getLayoutSvg)(props.variant, id, color);
-    const header = (0, exports.getHeaderSvg)(props.variant, id, props.header);
-    const issuer = (0, exports.getIssuerSvg)(props.issuer, id, props.variant);
-    const extra = (0, exports.getExtraSvg)(props.extra, id, props.variant);
-    const badges = (0, exports.getBadgesSvg)(props.verifiable, props.chain, id);
-    const identity = props.variant !== 'app-kyc' ? (0, exports.getDidSvg)(props.did, id) : '';
-    const tag = (0, exports.getTagSvg)(props.tag, props.tagVariant, id);
-    return layout([header, issuer, extra, badges, identity, tag].filter(Boolean).join(''), width, height);
+export {
+  d as DEFAULT_COLORS,
+  h as MOTIF_COLORS,
+  y as formatDid,
+  D as getBadgesSvg,
+  H as getChainBadge,
+  k as getDidSvg,
+  v as getExtraSvg,
+  Z as getHeaderSvg,
+  M as getIssuerSvg,
+  $ as getLayoutSvg,
+  A as getNftBGColor,
+  _ as getNftBGColorFromDid,
+  I as getPassportColorFromDid,
+  U as getSvg,
+  F as getTagSvg,
+  V as getVerifiableBadge,
+  j as hslToRgb,
+  b as nanoid,
+  E as rgbToHsl
 };
-exports.getSvg = getSvg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/nft-display",
-  "version": "2.13.69",
+  "version": "3.0.0",
   "description": "arcblock's nft display generic component",
   "keywords": [
     "nft"
@@ -19,9 +19,9 @@
     "lint:fix": "eslint src --fix",
     "test": "node tools/jest.js",
     "coverage": "npm run test -- --coverage",
-    "clean": "rm -fr lib",
     "start": "nodemon tools/server.ts -w src -w tools",
-    "build": "npm run clean && tsc"
+    "build": "vite build",
+    "watch": "vite build --watch"
   },
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
@@ -30,16 +30,14 @@
   },
   "devDependencies": {
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^20.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
-    "express": "^4.19.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^24.0.4",
+    "express": "^4.21.2",
     "jest": "29",
-    "nodemon": "^3.1.4",
+    "nodemon": "^3.1.10",
     "ts-jest": "29",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.2"
+    "typescript": "^5.8.3"
   },
-  "gitHead": "d8a03a6d869bf5f7be34b448463a07c435b21cea"
+  "gitHead": "b001c32ca85d40d8a0784ca581bfd54d90550b24"
 }