@metamask-previews/design-system-react 0.3.0-preview.022dda1 → 0.3.1-preview.374d60e

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.1]
+
+### Fixed
+
+- Removed DOMPurify dependency from Maskicon component ([#812](https://github.com/MetaMask/metamask-design-system/pull/812))
+- Aligned React peer dependencies with MetaMask extension React 17 ([#809](https://github.com/MetaMask/metamask-design-system/pull/809))
+
 ## [0.3.0]
 
 ### Added
@@ -62,7 +69,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - Tailwind CSS integration with design token support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.3.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.3.1...HEAD
+[0.3.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.3.0...@metamask/design-system-react@0.3.1
 [0.3.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.2.0...@metamask/design-system-react@0.3.0
 [0.2.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.1.0...@metamask/design-system-react@0.2.0
 [0.1.0]: https://github.com/MetaMask/metamask-design-system/releases/tag/@metamask/design-system-react@0.1.0

package/dist/components/temp-components/Blockies/Blockies.cjs

@@ -4,10 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Blockies = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const blo_1 = require("blo");
 const react_1 = __importDefault(require("react"));
 const Blockies = ({ address, size = 32, ...props }) => {
-    return (react_1.default.createElement("img", { src: (0, blo_1.blo)(address), height: size, width: size, alt: `Blockies for ${address}`, ...props }));
+    // Extract the account address from CAIP-10 format if needed
+    const accountAddress = (0, design_system_shared_1.extractAccountAddress)(address);
+    return (react_1.default.createElement("img", { src: (0, blo_1.blo)(accountAddress), height: size, width: size, alt: `Blockies for ${address}`, ...props }));
 };
 exports.Blockies = Blockies;
 exports.Blockies.displayName = 'Blockies';

package/dist/components/temp-components/Blockies/Blockies.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockies.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":";;;;;;AAAA,6BAA0B;AAC1B,kDAA0B;AAInB,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE;IAC1E,OAAO,CACL,uCACE,GAAG,EAAE,IAAA,SAAG,EAAC,OAAwB,CAAC,EAClC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,gBAAgB,OAAO,EAAE,KAC1B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,QAAQ,YAUnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { blo } from 'blo';\nimport React from 'react';\n\nimport type { BlockiesProps } from './Blockies.types';\n\nexport const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {\n  return (\n    <img\n      src={blo(address as `0x${string}`)}\n      height={size}\n      width={size}\n      alt={`Blockies for ${address}`} // TODO: Add localization for this\n      {...props}\n    />\n  );\n};\n\nBlockies.displayName = 'Blockies';\n"]}
+{"version":3,"file":"Blockies.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAgF;AAChF,6BAA0B;AAC1B,kDAA0B;AAInB,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE;IAC1E,4DAA4D;IAC5D,MAAM,cAAc,GAAG,IAAA,4CAAqB,EAAC,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,uCACE,GAAG,EAAE,IAAA,SAAG,EAAC,cAA+B,CAAC,EACzC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,gBAAgB,OAAO,EAAE,KAC1B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAbW,QAAA,QAAQ,YAanB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { extractAccountAddress } from '@metamask-previews/design-system-shared';\nimport { blo } from 'blo';\nimport React from 'react';\n\nimport type { BlockiesProps } from './Blockies.types';\n\nexport const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {\n  // Extract the account address from CAIP-10 format if needed\n  const accountAddress = extractAccountAddress(address);\n\n  return (\n    <img\n      src={blo(accountAddress as `0x${string}`)}\n      height={size}\n      width={size}\n      alt={`Blockies for ${address}`} // TODO: Add localization for this\n      {...props}\n    />\n  );\n};\n\nBlockies.displayName = 'Blockies';\n"]}

package/dist/components/temp-components/Blockies/Blockies.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Blockies.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;kCAAsC,aAAa;;CAUvE,CAAC"}
+{"version":3,"file":"Blockies.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;kCAAsC,aAAa;;CAavE,CAAC"}

package/dist/components/temp-components/Blockies/Blockies.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Blockies.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;kCAAsC,aAAa;;CAUvE,CAAC"}
+{"version":3,"file":"Blockies.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ;kCAAsC,aAAa;;CAavE,CAAC"}

package/dist/components/temp-components/Blockies/Blockies.mjs

@@ -4,11 +4,14 @@ function $importDefault(module) {
     }
     return module;
 }
+import { extractAccountAddress } from "@metamask-previews/design-system-shared";
 import { blo } from "blo";
 import $React from "react";
 const React = $importDefault($React);
 export const Blockies = ({ address, size = 32, ...props }) => {
-    return (React.createElement("img", { src: blo(address), height: size, width: size, alt: `Blockies for ${address}`, ...props }));
+    // Extract the account address from CAIP-10 format if needed
+    const accountAddress = extractAccountAddress(address);
+    return (React.createElement("img", { src: blo(accountAddress), height: size, width: size, alt: `Blockies for ${address}`, ...props }));
 };
 Blockies.displayName = 'Blockies';
 //# sourceMappingURL=Blockies.mjs.map

package/dist/components/temp-components/Blockies/Blockies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockies.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,YAAY;AAC1B,OAAO,MAAK,cAAc;;AAI1B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE;IAC1E,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,OAAwB,CAAC,EAClC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,gBAAgB,OAAO,EAAE,KAC1B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { blo } from 'blo';\nimport React from 'react';\n\nimport type { BlockiesProps } from './Blockies.types';\n\nexport const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {\n  return (\n    <img\n      src={blo(address as `0x${string}`)}\n      height={size}\n      width={size}\n      alt={`Blockies for ${address}`} // TODO: Add localization for this\n      {...props}\n    />\n  );\n};\n\nBlockies.displayName = 'Blockies';\n"]}
+{"version":3,"file":"Blockies.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Blockies/Blockies.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,qBAAqB,EAAE,gDAAgD;AAChF,OAAO,EAAE,GAAG,EAAE,YAAY;AAC1B,OAAO,MAAK,cAAc;;AAI1B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE;IAC1E,4DAA4D;IAC5D,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,cAA+B,CAAC,EACzC,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,gBAAgB,OAAO,EAAE,KAC1B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { extractAccountAddress } from '@metamask-previews/design-system-shared';\nimport { blo } from 'blo';\nimport React from 'react';\n\nimport type { BlockiesProps } from './Blockies.types';\n\nexport const Blockies = ({ address, size = 32, ...props }: BlockiesProps) => {\n  // Extract the account address from CAIP-10 format if needed\n  const accountAddress = extractAccountAddress(address);\n\n  return (\n    <img\n      src={blo(accountAddress as `0x${string}`)}\n      height={size}\n      width={size}\n      alt={`Blockies for ${address}`} // TODO: Add localization for this\n      {...props}\n    />\n  );\n};\n\nBlockies.displayName = 'Blockies';\n"]}

package/dist/components/temp-components/Jazzicon/Jazzicon.cjs

@@ -27,11 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Jazzicon = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const jazzicon_1 = __importDefault(require("@metamask/jazzicon"));
-const utils_1 = require("@metamask/utils");
 const react_1 = __importStar(require("react"));
 const tw_merge_1 = require("../../../utils/tw-merge.cjs");
-const Jazzicon_utilities_1 = require("./Jazzicon.utilities.cjs");
 /**
  * Cache for storing generated SVG elements by `address:diameter` so
  * we don't regenerate them repeatedly.
@@ -40,53 +39,43 @@ const iconCache = {};
 const Jazzicon = ({ address, size = 32, className, ...props }) => {
     const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        let isCancelled = false;
-        const generateJazzicon = async () => {
-            if (!containerRef.current) {
-                return;
-            }
-            // Clear any existing content
-            while (containerRef.current.firstChild) {
-                containerRef.current.removeChild(containerRef.current.firstChild);
-            }
-            // Check the cache
-            const cacheKey = `${address.toLowerCase()}:${size}`;
-            if (iconCache[cacheKey]) {
-                // If cached, just append a clone
-                if (!isCancelled) {
-                    const clone = iconCache[cacheKey].cloneNode(true);
-                    containerRef.current.appendChild(clone);
+        if (!containerRef.current) {
+            return () => {
+                // No cleanup needed if container ref was null
+            };
+        }
+        // Clear any existing content
+        while (containerRef.current.firstChild) {
+            containerRef.current.removeChild(containerRef.current.firstChild);
+        }
+        // Check the cache
+        const cacheKey = `${address.toLowerCase()}:${size}`;
+        if (iconCache[cacheKey]) {
+            // If cached, just append a clone
+            const clone = iconCache[cacheKey].cloneNode(true);
+            containerRef.current.appendChild(clone);
+            return () => {
+                if (containerRef.current) {
+                    while (containerRef.current.firstChild) {
+                        containerRef.current.removeChild(containerRef.current.firstChild);
+                    }
                 }
-                return;
-            }
-            // Determine the CAIP namespace
-            const namespace = await (0, Jazzicon_utilities_1.getCaipNamespaceFromAddress)(address);
-            if (isCancelled) {
-                return;
-            }
-            // Pick seeding strategy based on namespace
-            let seed;
-            if (namespace === utils_1.KnownCaipNamespace.Eip155) {
-                seed = (0, Jazzicon_utilities_1.generateSeedEthereum)(address);
-            }
-            else {
-                seed = (0, Jazzicon_utilities_1.generateSeedNonEthereum)(address);
-            }
-            // Create Jazzicon
-            const newIcon = (0, jazzicon_1.default)(size, seed);
-            // Cache it
-            iconCache[cacheKey] = newIcon;
-            // Append a fresh clone
-            if (!isCancelled && containerRef.current) {
-                containerRef.current.appendChild(newIcon.cloneNode(true));
-            }
-        };
-        generateJazzicon().catch(() => {
-            // Silently ignore errors during async generation
-        });
+            };
+        }
+        // Extract the account address from CAIP-10 format if needed
+        const accountAddress = (0, design_system_shared_1.extractAccountAddress)(address);
+        // Generate appropriate seed based on address format
+        const seed = (0, design_system_shared_1.generateIconSeed)(accountAddress);
+        // Create Jazzicon
+        const newIcon = (0, jazzicon_1.default)(size, seed);
+        // Cache it
+        iconCache[cacheKey] = newIcon;
+        // Append a fresh clone
+        if (containerRef.current) {
+            containerRef.current.appendChild(newIcon.cloneNode(true));
+        }
         // Cleanup
         return () => {
-            isCancelled = true;
             if (containerRef.current) {
                 while (containerRef.current.firstChild) {
                     containerRef.current.removeChild(containerRef.current.firstChild);

package/dist/components/temp-components/Jazzicon/Jazzicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Jazzicon.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kEAA0C;AAC1C,2CAAqD;AACrD,+CAAiD;AAEjD,0DAAkD;AAGlD,iEAI8B;AAE9B;;;GAGG;AACH,MAAM,SAAS,GAAmC,EAAE,CAAC;AAE9C,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;gBACzB,OAAO;aACR;YACD,6BAA6B;YAC7B,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;gBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACnE;YAED,kBAAkB;YAClB,MAAM,QAAQ,GAAG,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;YACpD,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;gBACvB,iCAAiC;gBACjC,IAAI,CAAC,WAAW,EAAE;oBAChB,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,IAAI,CAAmB,CAAC;oBACpE,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;iBACzC;gBACD,OAAO;aACR;YAED,+BAA+B;YAC/B,MAAM,SAAS,GAAG,MAAM,IAAA,gDAA2B,EAAC,OAAO,CAAC,CAAC;YAC7D,IAAI,WAAW,EAAE;gBACf,OAAO;aACR;YAED,2CAA2C;YAC3C,IAAI,IAAuB,CAAC;YAC5B,IAAI,SAAS,KAAK,0BAAkB,CAAC,MAAM,EAAE;gBAC3C,IAAI,GAAG,IAAA,yCAAoB,EAAC,OAAO,CAAC,CAAC;aACtC;iBAAM;gBACL,IAAI,GAAG,IAAA,4CAAuB,EAAC,OAAO,CAAC,CAAC;aACzC;YAED,kBAAkB;YAClB,MAAM,OAAO,GAAG,IAAA,kBAAQ,EAAC,IAAI,EAAE,IAAI,CAAmB,CAAC;YAEvD,WAAW;YACX,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAyB,CAAC;YAEhD,uBAAuB;YACvB,IAAI,CAAC,WAAW,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;aAC3D;QACH,CAAC,CAAC;QAEF,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;YAC5B,iDAAiD;QACnD,CAAC,CAAC,CAAC;QAEH,UAAU;QACV,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;YACnB,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;oBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACnE;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,uCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,kBAAO,EAAC,4BAA4B,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AA/EW,QAAA,QAAQ,YA+EnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import jazzicon from '@metamask/jazzicon';\nimport { KnownCaipNamespace } from '@metamask/utils';\nimport React, { useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../../utils/tw-merge';\n\nimport type { JazziconProps } from './Jazzicon.types';\nimport {\n  generateSeedEthereum,\n  generateSeedNonEthereum,\n  getCaipNamespaceFromAddress,\n} from './Jazzicon.utilities';\n\n/**\n * Cache for storing generated SVG elements by `address:diameter` so\n * we don't regenerate them repeatedly.\n */\nconst iconCache: Record<string, HTMLDivElement> = {};\n\nexport const Jazzicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: JazziconProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    const generateJazzicon = async () => {\n      if (!containerRef.current) {\n        return;\n      }\n      // Clear any existing content\n      while (containerRef.current.firstChild) {\n        containerRef.current.removeChild(containerRef.current.firstChild);\n      }\n\n      // Check the cache\n      const cacheKey = `${address.toLowerCase()}:${size}`;\n      if (iconCache[cacheKey]) {\n        // If cached, just append a clone\n        if (!isCancelled) {\n          const clone = iconCache[cacheKey].cloneNode(true) as HTMLDivElement;\n          containerRef.current.appendChild(clone);\n        }\n        return;\n      }\n\n      // Determine the CAIP namespace\n      const namespace = await getCaipNamespaceFromAddress(address);\n      if (isCancelled) {\n        return;\n      }\n\n      // Pick seeding strategy based on namespace\n      let seed: number | number[];\n      if (namespace === KnownCaipNamespace.Eip155) {\n        seed = generateSeedEthereum(address);\n      } else {\n        seed = generateSeedNonEthereum(address);\n      }\n\n      // Create Jazzicon\n      const newIcon = jazzicon(size, seed) as HTMLDivElement;\n\n      // Cache it\n      iconCache[cacheKey] = newIcon as HTMLDivElement;\n\n      // Append a fresh clone\n      if (!isCancelled && containerRef.current) {\n        containerRef.current.appendChild(newIcon.cloneNode(true));\n      }\n    };\n\n    generateJazzicon().catch(() => {\n      // Silently ignore errors during async generation\n    });\n\n    // Cleanup\n    return () => {\n      isCancelled = true;\n      if (containerRef.current) {\n        while (containerRef.current.firstChild) {\n          containerRef.current.removeChild(containerRef.current.firstChild);\n        }\n      }\n    };\n  }, [address, size]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={twMerge('flex [&>div]:!rounded-none', className)}\n      {...props}\n    />\n  );\n};\n\nJazzicon.displayName = 'Jazzicon';\n"]}
+{"version":3,"file":"Jazzicon.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,kEAA0C;AAC1C,+CAAiD;AAEjD,0DAAkD;AAIlD;;;GAGG;AACH,MAAM,SAAS,GAAmC,EAAE,CAAC;AAE9C,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,8CAA8C;YAChD,CAAC,CAAC;SACH;QAED,6BAA6B;QAC7B,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;YACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SACnE;QAED,kBAAkB;QAClB,MAAM,QAAQ,GAAG,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;QACpD,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;YACvB,iCAAiC;YACjC,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,IAAI,CAAmB,CAAC;YACpE,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO,GAAG,EAAE;gBACV,IAAI,YAAY,CAAC,OAAO,EAAE;oBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;wBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;qBACnE;iBACF;YACH,CAAC,CAAC;SACH;QAED,4DAA4D;QAC5D,MAAM,cAAc,GAAG,IAAA,4CAAqB,EAAC,OAAO,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,IAAI,GAAG,IAAA,uCAAgB,EAAC,cAAc,CAAC,CAAC;QAE9C,kBAAkB;QAClB,MAAM,OAAO,GAAG,IAAA,kBAAQ,EAAC,IAAI,EAAE,IAAI,CAAmB,CAAC;QAEvD,WAAW;QACX,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAyB,CAAC;QAEhD,uBAAuB;QACvB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;SAC3D;QAED,UAAU;QACV,OAAO,GAAG,EAAE;YACV,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;oBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACnE;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,uCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,kBAAO,EAAC,4BAA4B,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AArEW,QAAA,QAAQ,YAqEnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import {\n  extractAccountAddress,\n  generateIconSeed,\n} from '@metamask-previews/design-system-shared';\nimport jazzicon from '@metamask/jazzicon';\nimport React, { useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../../utils/tw-merge';\n\nimport type { JazziconProps } from './Jazzicon.types';\n\n/**\n * Cache for storing generated SVG elements by `address:diameter` so\n * we don't regenerate them repeatedly.\n */\nconst iconCache: Record<string, HTMLDivElement> = {};\n\nexport const Jazzicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: JazziconProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return () => {\n        // No cleanup needed if container ref was null\n      };\n    }\n\n    // Clear any existing content\n    while (containerRef.current.firstChild) {\n      containerRef.current.removeChild(containerRef.current.firstChild);\n    }\n\n    // Check the cache\n    const cacheKey = `${address.toLowerCase()}:${size}`;\n    if (iconCache[cacheKey]) {\n      // If cached, just append a clone\n      const clone = iconCache[cacheKey].cloneNode(true) as HTMLDivElement;\n      containerRef.current.appendChild(clone);\n      return () => {\n        if (containerRef.current) {\n          while (containerRef.current.firstChild) {\n            containerRef.current.removeChild(containerRef.current.firstChild);\n          }\n        }\n      };\n    }\n\n    // Extract the account address from CAIP-10 format if needed\n    const accountAddress = extractAccountAddress(address);\n\n    // Generate appropriate seed based on address format\n    const seed = generateIconSeed(accountAddress);\n\n    // Create Jazzicon\n    const newIcon = jazzicon(size, seed) as HTMLDivElement;\n\n    // Cache it\n    iconCache[cacheKey] = newIcon as HTMLDivElement;\n\n    // Append a fresh clone\n    if (containerRef.current) {\n      containerRef.current.appendChild(newIcon.cloneNode(true));\n    }\n\n    // Cleanup\n    return () => {\n      if (containerRef.current) {\n        while (containerRef.current.firstChild) {\n          containerRef.current.removeChild(containerRef.current.firstChild);\n        }\n      }\n    };\n  }, [address, size]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={twMerge('flex [&>div]:!rounded-none', className)}\n      {...props}\n    />\n  );\n};\n\nJazzicon.displayName = 'Jazzicon';\n"]}

package/dist/components/temp-components/Jazzicon/Jazzicon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Jazzicon.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,cAAc;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAatD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CA0Ef,CAAC"}
+{"version":3,"file":"Jazzicon.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4B,cAAc;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAQtD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CAgEf,CAAC"}

package/dist/components/temp-components/Jazzicon/Jazzicon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Jazzicon.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,cAAc;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAatD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CA0Ef,CAAC"}
+{"version":3,"file":"Jazzicon.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4B,cAAc;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAQtD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CAgEf,CAAC"}

package/dist/components/temp-components/Jazzicon/Jazzicon.mjs

@@ -4,13 +4,12 @@ function $importDefault(module) {
     }
     return module;
 }
+import { extractAccountAddress, generateIconSeed } from "@metamask-previews/design-system-shared";
 import $jazzicon from "@metamask/jazzicon";
 const jazzicon = $importDefault($jazzicon);
-import { KnownCaipNamespace } from "@metamask/utils";
 import $React, { useEffect, useRef } from "react";
 const React = $importDefault($React);
 import { twMerge } from "../../../utils/tw-merge.mjs";
-import { generateSeedEthereum, generateSeedNonEthereum, getCaipNamespaceFromAddress } from "./Jazzicon.utilities.mjs";
 /**
  * Cache for storing generated SVG elements by `address:diameter` so
  * we don't regenerate them repeatedly.
@@ -19,53 +18,43 @@ const iconCache = {};
 export const Jazzicon = ({ address, size = 32, className, ...props }) => {
     const containerRef = useRef(null);
     useEffect(() => {
-        let isCancelled = false;
-        const generateJazzicon = async () => {
-            if (!containerRef.current) {
-                return;
-            }
-            // Clear any existing content
-            while (containerRef.current.firstChild) {
-                containerRef.current.removeChild(containerRef.current.firstChild);
-            }
-            // Check the cache
-            const cacheKey = `${address.toLowerCase()}:${size}`;
-            if (iconCache[cacheKey]) {
-                // If cached, just append a clone
-                if (!isCancelled) {
-                    const clone = iconCache[cacheKey].cloneNode(true);
-                    containerRef.current.appendChild(clone);
+        if (!containerRef.current) {
+            return () => {
+                // No cleanup needed if container ref was null
+            };
+        }
+        // Clear any existing content
+        while (containerRef.current.firstChild) {
+            containerRef.current.removeChild(containerRef.current.firstChild);
+        }
+        // Check the cache
+        const cacheKey = `${address.toLowerCase()}:${size}`;
+        if (iconCache[cacheKey]) {
+            // If cached, just append a clone
+            const clone = iconCache[cacheKey].cloneNode(true);
+            containerRef.current.appendChild(clone);
+            return () => {
+                if (containerRef.current) {
+                    while (containerRef.current.firstChild) {
+                        containerRef.current.removeChild(containerRef.current.firstChild);
+                    }
                 }
-                return;
-            }
-            // Determine the CAIP namespace
-            const namespace = await getCaipNamespaceFromAddress(address);
-            if (isCancelled) {
-                return;
-            }
-            // Pick seeding strategy based on namespace
-            let seed;
-            if (namespace === KnownCaipNamespace.Eip155) {
-                seed = generateSeedEthereum(address);
-            }
-            else {
-                seed = generateSeedNonEthereum(address);
-            }
-            // Create Jazzicon
-            const newIcon = jazzicon(size, seed);
-            // Cache it
-            iconCache[cacheKey] = newIcon;
-            // Append a fresh clone
-            if (!isCancelled && containerRef.current) {
-                containerRef.current.appendChild(newIcon.cloneNode(true));
-            }
-        };
-        generateJazzicon().catch(() => {
-            // Silently ignore errors during async generation
-        });
+            };
+        }
+        // Extract the account address from CAIP-10 format if needed
+        const accountAddress = extractAccountAddress(address);
+        // Generate appropriate seed based on address format
+        const seed = generateIconSeed(accountAddress);
+        // Create Jazzicon
+        const newIcon = jazzicon(size, seed);
+        // Cache it
+        iconCache[cacheKey] = newIcon;
+        // Append a fresh clone
+        if (containerRef.current) {
+            containerRef.current.appendChild(newIcon.cloneNode(true));
+        }
         // Cleanup
         return () => {
-            isCancelled = true;
             if (containerRef.current) {
                 while (containerRef.current.firstChild) {
                     containerRef.current.removeChild(containerRef.current.firstChild);

package/dist/components/temp-components/Jazzicon/Jazzicon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Jazzicon.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAQ,2BAA2B;;AAC1C,OAAO,EAAE,kBAAkB,EAAE,wBAAwB;AACrD,OAAO,QAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AAEjD,OAAO,EAAE,OAAO,EAAE,oCAAgC;AAGlD,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,2BAA2B,EAC5B,iCAA6B;AAE9B;;;GAGG;AACH,MAAM,SAAS,GAAmC,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;gBACzB,OAAO;aACR;YACD,6BAA6B;YAC7B,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;gBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACnE;YAED,kBAAkB;YAClB,MAAM,QAAQ,GAAG,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;YACpD,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;gBACvB,iCAAiC;gBACjC,IAAI,CAAC,WAAW,EAAE;oBAChB,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,IAAI,CAAmB,CAAC;oBACpE,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;iBACzC;gBACD,OAAO;aACR;YAED,+BAA+B;YAC/B,MAAM,SAAS,GAAG,MAAM,2BAA2B,CAAC,OAAO,CAAC,CAAC;YAC7D,IAAI,WAAW,EAAE;gBACf,OAAO;aACR;YAED,2CAA2C;YAC3C,IAAI,IAAuB,CAAC;YAC5B,IAAI,SAAS,KAAK,kBAAkB,CAAC,MAAM,EAAE;gBAC3C,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;aACtC;iBAAM;gBACL,IAAI,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;aACzC;YAED,kBAAkB;YAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAmB,CAAC;YAEvD,WAAW;YACX,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAyB,CAAC;YAEhD,uBAAuB;YACvB,IAAI,CAAC,WAAW,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;aAC3D;QACH,CAAC,CAAC;QAEF,gBAAgB,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;YAC5B,iDAAiD;QACnD,CAAC,CAAC,CAAC;QAEH,UAAU;QACV,OAAO,GAAG,EAAE;YACV,WAAW,GAAG,IAAI,CAAC;YACnB,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;oBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACnE;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,OAAO,CAAC,4BAA4B,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import jazzicon from '@metamask/jazzicon';\nimport { KnownCaipNamespace } from '@metamask/utils';\nimport React, { useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../../utils/tw-merge';\n\nimport type { JazziconProps } from './Jazzicon.types';\nimport {\n  generateSeedEthereum,\n  generateSeedNonEthereum,\n  getCaipNamespaceFromAddress,\n} from './Jazzicon.utilities';\n\n/**\n * Cache for storing generated SVG elements by `address:diameter` so\n * we don't regenerate them repeatedly.\n */\nconst iconCache: Record<string, HTMLDivElement> = {};\n\nexport const Jazzicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: JazziconProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    const generateJazzicon = async () => {\n      if (!containerRef.current) {\n        return;\n      }\n      // Clear any existing content\n      while (containerRef.current.firstChild) {\n        containerRef.current.removeChild(containerRef.current.firstChild);\n      }\n\n      // Check the cache\n      const cacheKey = `${address.toLowerCase()}:${size}`;\n      if (iconCache[cacheKey]) {\n        // If cached, just append a clone\n        if (!isCancelled) {\n          const clone = iconCache[cacheKey].cloneNode(true) as HTMLDivElement;\n          containerRef.current.appendChild(clone);\n        }\n        return;\n      }\n\n      // Determine the CAIP namespace\n      const namespace = await getCaipNamespaceFromAddress(address);\n      if (isCancelled) {\n        return;\n      }\n\n      // Pick seeding strategy based on namespace\n      let seed: number | number[];\n      if (namespace === KnownCaipNamespace.Eip155) {\n        seed = generateSeedEthereum(address);\n      } else {\n        seed = generateSeedNonEthereum(address);\n      }\n\n      // Create Jazzicon\n      const newIcon = jazzicon(size, seed) as HTMLDivElement;\n\n      // Cache it\n      iconCache[cacheKey] = newIcon as HTMLDivElement;\n\n      // Append a fresh clone\n      if (!isCancelled && containerRef.current) {\n        containerRef.current.appendChild(newIcon.cloneNode(true));\n      }\n    };\n\n    generateJazzicon().catch(() => {\n      // Silently ignore errors during async generation\n    });\n\n    // Cleanup\n    return () => {\n      isCancelled = true;\n      if (containerRef.current) {\n        while (containerRef.current.firstChild) {\n          containerRef.current.removeChild(containerRef.current.firstChild);\n        }\n      }\n    };\n  }, [address, size]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={twMerge('flex [&>div]:!rounded-none', className)}\n      {...props}\n    />\n  );\n};\n\nJazzicon.displayName = 'Jazzicon';\n"]}
+{"version":3,"file":"Jazzicon.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Jazzicon/Jazzicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EACjB,gDAAgD;AACjD,OAAO,SAAQ,2BAA2B;;AAC1C,OAAO,QAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AAEjD,OAAO,EAAE,OAAO,EAAE,oCAAgC;AAIlD;;;GAGG;AACH,MAAM,SAAS,GAAmC,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,8CAA8C;YAChD,CAAC,CAAC;SACH;QAED,6BAA6B;QAC7B,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;YACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SACnE;QAED,kBAAkB;QAClB,MAAM,QAAQ,GAAG,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,IAAI,EAAE,CAAC;QACpD,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;YACvB,iCAAiC;YACjC,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,IAAI,CAAmB,CAAC;YACpE,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO,GAAG,EAAE;gBACV,IAAI,YAAY,CAAC,OAAO,EAAE;oBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;wBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;qBACnE;iBACF;YACH,CAAC,CAAC;SACH;QAED,4DAA4D;QAC5D,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,IAAI,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAE9C,kBAAkB;QAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAmB,CAAC;QAEvD,WAAW;QACX,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAyB,CAAC;QAEhD,uBAAuB;QACvB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;SAC3D;QAED,UAAU;QACV,OAAO,GAAG,EAAE;YACV,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,OAAO,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE;oBACtC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACnE;aACF;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,OAAO,CAAC,4BAA4B,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import {\n  extractAccountAddress,\n  generateIconSeed,\n} from '@metamask-previews/design-system-shared';\nimport jazzicon from '@metamask/jazzicon';\nimport React, { useEffect, useRef } from 'react';\n\nimport { twMerge } from '../../../utils/tw-merge';\n\nimport type { JazziconProps } from './Jazzicon.types';\n\n/**\n * Cache for storing generated SVG elements by `address:diameter` so\n * we don't regenerate them repeatedly.\n */\nconst iconCache: Record<string, HTMLDivElement> = {};\n\nexport const Jazzicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: JazziconProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return () => {\n        // No cleanup needed if container ref was null\n      };\n    }\n\n    // Clear any existing content\n    while (containerRef.current.firstChild) {\n      containerRef.current.removeChild(containerRef.current.firstChild);\n    }\n\n    // Check the cache\n    const cacheKey = `${address.toLowerCase()}:${size}`;\n    if (iconCache[cacheKey]) {\n      // If cached, just append a clone\n      const clone = iconCache[cacheKey].cloneNode(true) as HTMLDivElement;\n      containerRef.current.appendChild(clone);\n      return () => {\n        if (containerRef.current) {\n          while (containerRef.current.firstChild) {\n            containerRef.current.removeChild(containerRef.current.firstChild);\n          }\n        }\n      };\n    }\n\n    // Extract the account address from CAIP-10 format if needed\n    const accountAddress = extractAccountAddress(address);\n\n    // Generate appropriate seed based on address format\n    const seed = generateIconSeed(accountAddress);\n\n    // Create Jazzicon\n    const newIcon = jazzicon(size, seed) as HTMLDivElement;\n\n    // Cache it\n    iconCache[cacheKey] = newIcon as HTMLDivElement;\n\n    // Append a fresh clone\n    if (containerRef.current) {\n      containerRef.current.appendChild(newIcon.cloneNode(true));\n    }\n\n    // Cleanup\n    return () => {\n      if (containerRef.current) {\n        while (containerRef.current.firstChild) {\n          containerRef.current.removeChild(containerRef.current.firstChild);\n        }\n      }\n    };\n  }, [address, size]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={twMerge('flex [&>div]:!rounded-none', className)}\n      {...props}\n    />\n  );\n};\n\nJazzicon.displayName = 'Jazzicon';\n"]}

package/dist/components/temp-components/Maskicon/Maskicon.cjs

@@ -24,11 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Maskicon = void 0;
-const dompurify = __importStar(require("dompurify"));
 const react_1 = __importStar(require("react"));
 const Maskicon_utilities_1 = require("./Maskicon.utilities.cjs");
-const DOMPurify = dompurify.default;
-const Maskicon = ({ address, size = 32, style, ...props }) => {
+const Maskicon = ({ address, size = 32, className, ...props }) => {
     const [svgString, setSvgString] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
         let cancelled = false;
@@ -43,10 +41,20 @@ const Maskicon = ({ address, size = 32, style, ...props }) => {
             cancelled = true;
         };
     }, [address, size]);
-    if (!svgString) {
-        return react_1.default.createElement("div", { style: { width: size, height: size, ...style }, ...props });
+    const dataUri = (0, react_1.useMemo)(() => {
+        if (!svgString) {
+            return '';
+        }
+        // Normalize whitespace and encode the SVG for safe data URI usage
+        const cleanedSvg = svgString.replace(/\s+/gu, ' ').trim();
+        const encoded = encodeURIComponent(cleanedSvg);
+        return `data:image/svg+xml,${encoded}`;
+    }, [svgString]);
+    if (!dataUri) {
+        // Return an img element with transparent placeholder to maintain consistent typing
+        return (react_1.default.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E", ...props }));
     }
-    return (react_1.default.createElement("div", { style: { width: size, height: size, ...style }, dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(svgString) }, ...props }));
+    return (react_1.default.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: dataUri, ...props }));
 };
 exports.Maskicon = Maskicon;
 exports.Maskicon.displayName = 'Maskicon';

package/dist/components/temp-components/Maskicon/Maskicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAAuC;AACvC,+CAAmD;AAGnD,iEAAsD;AAEtD,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;AAE7B,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,mCAAmC;QACnC,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,MAAM,GAAG,MAAM,IAAA,mCAAc,EAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,EAAE,CAAC;QACL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAC;KAC3E;IAED,OAAO,CACL,uCACE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAC9C,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAC9D,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,QAAQ,YAiCnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as dompurify from 'dompurify';\nimport React, { useEffect, useState } from 'react';\n\nimport type { MaskiconProps } from './Maskicon.types';\nimport { getMaskiconSVG } from './Maskicon.utilities';\n\nconst DOMPurify = dompurify.default;\n\nexport const Maskicon = ({\n  address,\n  size = 32,\n  style,\n  ...props\n}: MaskiconProps) => {\n  const [svgString, setSvgString] = useState('');\n\n  useEffect(() => {\n    let cancelled = false;\n    // eslint-disable-next-line no-void\n    void (async () => {\n      const newSvg = await getMaskiconSVG(address, size);\n      if (!cancelled) {\n        setSvgString(newSvg);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [address, size]);\n\n  if (!svgString) {\n    return <div style={{ width: size, height: size, ...style }} {...props} />;\n  }\n\n  return (\n    <div\n      style={{ width: size, height: size, ...style }}\n      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgString) }}\n      {...props}\n    />\n  );\n};\n\nMaskicon.displayName = 'Maskicon';\n"]}
+{"version":3,"file":"Maskicon.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4D;AAG5D,iEAAsD;AAE/C,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,mCAAmC;QACnC,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,MAAM,GAAG,MAAM,IAAA,mCAAc,EAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,EAAE,CAAC;QACL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,EAAE,CAAC;SACX;QACD,kEAAkE;QAClE,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1D,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;QAC/C,OAAO,sBAAsB,OAAO,EAAE,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,CAAC,OAAO,EAAE;QACZ,mFAAmF;QACnF,OAAO,CACL,uCACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,EAAC,kEAAkE,KAClE,KAAK,GACT,CACH,CAAC;KACH;IAED,OAAO,CACL,uCACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,OAAO,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAxDW,QAAA,QAAQ,YAwDnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\n\nimport type { MaskiconProps } from './Maskicon.types';\nimport { getMaskiconSVG } from './Maskicon.utilities';\n\nexport const Maskicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: MaskiconProps) => {\n  const [svgString, setSvgString] = useState('');\n\n  useEffect(() => {\n    let cancelled = false;\n    // eslint-disable-next-line no-void\n    void (async () => {\n      const newSvg = await getMaskiconSVG(address, size);\n      if (!cancelled) {\n        setSvgString(newSvg);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [address, size]);\n\n  const dataUri = useMemo(() => {\n    if (!svgString) {\n      return '';\n    }\n    // Normalize whitespace and encode the SVG for safe data URI usage\n    const cleanedSvg = svgString.replace(/\\s+/gu, ' ').trim();\n    const encoded = encodeURIComponent(cleanedSvg);\n    return `data:image/svg+xml,${encoded}`;\n  }, [svgString]);\n\n  if (!dataUri) {\n    // Return an img element with transparent placeholder to maintain consistent typing\n    return (\n      <img\n        alt=\"maskicon\"\n        width={size}\n        height={size}\n        className={className}\n        src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E\"\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <img\n      alt=\"maskicon\"\n      width={size}\n      height={size}\n      className={className}\n      src={dataUri}\n      {...props}\n    />\n  );\n};\n\nMaskicon.displayName = 'Maskicon';\n"]}

package/dist/components/temp-components/Maskicon/Maskicon.d.cts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { MaskiconProps } from "./Maskicon.types.cjs";
 export declare const Maskicon: {
-    ({ address, size, style, ...props }: MaskiconProps): React.JSX.Element;
+    ({ address, size, className, ...props }: MaskiconProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Maskicon.d.cts.map

package/dist/components/temp-components/Maskicon/Maskicon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,cAAc;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAKtD,eAAO,MAAM,QAAQ;yCAKlB,aAAa;;CA4Bf,CAAC"}
+{"version":3,"file":"Maskicon.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,cAAc;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAGtD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CAmDf,CAAC"}

package/dist/components/temp-components/Maskicon/Maskicon.d.mts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { MaskiconProps } from "./Maskicon.types.mjs";
 export declare const Maskicon: {
-    ({ address, size, style, ...props }: MaskiconProps): React.JSX.Element;
+    ({ address, size, className, ...props }: MaskiconProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Maskicon.d.mts.map

package/dist/components/temp-components/Maskicon/Maskicon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,cAAc;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAKtD,eAAO,MAAM,QAAQ;yCAKlB,aAAa;;CA4Bf,CAAC"}
+{"version":3,"file":"Maskicon.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,cAAc;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAGtD,eAAO,MAAM,QAAQ;6CAKlB,aAAa;;CAmDf,CAAC"}

package/dist/components/temp-components/Maskicon/Maskicon.mjs

@@ -4,12 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
-import * as dompurify from "dompurify";
-import $React, { useEffect, useState } from "react";
+import $React, { useEffect, useMemo, useState } from "react";
 const React = $importDefault($React);
 import { getMaskiconSVG } from "./Maskicon.utilities.mjs";
-const DOMPurify = dompurify.default;
-export const Maskicon = ({ address, size = 32, style, ...props }) => {
+export const Maskicon = ({ address, size = 32, className, ...props }) => {
     const [svgString, setSvgString] = useState('');
     useEffect(() => {
         let cancelled = false;
@@ -24,10 +22,20 @@ export const Maskicon = ({ address, size = 32, style, ...props }) => {
             cancelled = true;
         };
     }, [address, size]);
-    if (!svgString) {
-        return React.createElement("div", { style: { width: size, height: size, ...style }, ...props });
+    const dataUri = useMemo(() => {
+        if (!svgString) {
+            return '';
+        }
+        // Normalize whitespace and encode the SVG for safe data URI usage
+        const cleanedSvg = svgString.replace(/\s+/gu, ' ').trim();
+        const encoded = encodeURIComponent(cleanedSvg);
+        return `data:image/svg+xml,${encoded}`;
+    }, [svgString]);
+    if (!dataUri) {
+        // Return an img element with transparent placeholder to maintain consistent typing
+        return (React.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E", ...props }));
     }
-    return (React.createElement("div", { style: { width: size, height: size, ...style }, dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(svgString) }, ...props }));
+    return (React.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: dataUri, ...props }));
 };
 Maskicon.displayName = 'Maskicon';
 //# sourceMappingURL=Maskicon.mjs.map

package/dist/components/temp-components/Maskicon/Maskicon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,KAAK,SAAS,kBAAkB;AACvC,OAAO,QAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc;;AAGnD,OAAO,EAAE,cAAc,EAAE,iCAA6B;AAEtD,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;AAEpC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,mCAAmC;QACnC,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,MAAM,GAAG,MAAM,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,EAAE,CAAC;QACL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAC;KAC3E;IAED,OAAO,CACL,6BACE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAC9C,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAC9D,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as dompurify from 'dompurify';\nimport React, { useEffect, useState } from 'react';\n\nimport type { MaskiconProps } from './Maskicon.types';\nimport { getMaskiconSVG } from './Maskicon.utilities';\n\nconst DOMPurify = dompurify.default;\n\nexport const Maskicon = ({\n  address,\n  size = 32,\n  style,\n  ...props\n}: MaskiconProps) => {\n  const [svgString, setSvgString] = useState('');\n\n  useEffect(() => {\n    let cancelled = false;\n    // eslint-disable-next-line no-void\n    void (async () => {\n      const newSvg = await getMaskiconSVG(address, size);\n      if (!cancelled) {\n        setSvgString(newSvg);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [address, size]);\n\n  if (!svgString) {\n    return <div style={{ width: size, height: size, ...style }} {...props} />;\n  }\n\n  return (\n    <div\n      style={{ width: size, height: size, ...style }}\n      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgString) }}\n      {...props}\n    />\n  );\n};\n\nMaskicon.displayName = 'Maskicon';\n"]}
+{"version":3,"file":"Maskicon.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc;;AAG5D,OAAO,EAAE,cAAc,EAAE,iCAA6B;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,IAAI,GAAG,EAAE,EACT,SAAS,EACT,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,mCAAmC;QACnC,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,MAAM,GAAG,MAAM,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,CAAC,MAAM,CAAC,CAAC;aACtB;QACH,CAAC,CAAC,EAAE,CAAC;QACL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,EAAE,CAAC;SACX;QACD,kEAAkE;QAClE,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1D,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;QAC/C,OAAO,sBAAsB,OAAO,EAAE,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,CAAC,OAAO,EAAE;QACZ,mFAAmF;QACnF,OAAO,CACL,6BACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,EAAC,kEAAkE,KAClE,KAAK,GACT,CACH,CAAC;KACH;IAED,OAAO,CACL,6BACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,OAAO,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\n\nimport type { MaskiconProps } from './Maskicon.types';\nimport { getMaskiconSVG } from './Maskicon.utilities';\n\nexport const Maskicon = ({\n  address,\n  size = 32,\n  className,\n  ...props\n}: MaskiconProps) => {\n  const [svgString, setSvgString] = useState('');\n\n  useEffect(() => {\n    let cancelled = false;\n    // eslint-disable-next-line no-void\n    void (async () => {\n      const newSvg = await getMaskiconSVG(address, size);\n      if (!cancelled) {\n        setSvgString(newSvg);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [address, size]);\n\n  const dataUri = useMemo(() => {\n    if (!svgString) {\n      return '';\n    }\n    // Normalize whitespace and encode the SVG for safe data URI usage\n    const cleanedSvg = svgString.replace(/\\s+/gu, ' ').trim();\n    const encoded = encodeURIComponent(cleanedSvg);\n    return `data:image/svg+xml,${encoded}`;\n  }, [svgString]);\n\n  if (!dataUri) {\n    // Return an img element with transparent placeholder to maintain consistent typing\n    return (\n      <img\n        alt=\"maskicon\"\n        width={size}\n        height={size}\n        className={className}\n        src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E\"\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <img\n      alt=\"maskicon\"\n      width={size}\n      height={size}\n      className={className}\n      src={dataUri}\n      {...props}\n    />\n  );\n};\n\nMaskicon.displayName = 'Maskicon';\n"]}

package/dist/components/temp-components/Maskicon/Maskicon.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\n/**\n * Maskicon component props.\n */\nexport type MaskiconProps = ComponentProps<'div'> & {\n  /**\n   * Required address used as a unique identifier to generate the Maskicon.\n   */\n  address: string;\n  /**\n   * Optional prop to control the size of the Maskicon.\n   */\n  size?: number;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Maskicon.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\n/**\n * Maskicon component props.\n */\nexport type MaskiconProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {\n  /**\n   * Required address used as a unique identifier to generate the Maskicon.\n   */\n  address: string;\n  /**\n   * Optional prop to control the size of the Maskicon.\n   * This will set both width and height.\n   */\n  size?: number;\n  /**\n   * Optional CSS class name to apply to the Maskicon.\n   */\n  className?: string;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}

package/dist/components/temp-components/Maskicon/Maskicon.types.d.cts

@@ -2,15 +2,20 @@ import type { ComponentProps } from "react";
 /**
  * Maskicon component props.
  */
-export type MaskiconProps = ComponentProps<'div'> & {
+export type MaskiconProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {
     /**
      * Required address used as a unique identifier to generate the Maskicon.
      */
     address: string;
     /**
      * Optional prop to control the size of the Maskicon.
+     * This will set both width and height.
      */
     size?: number;
+    /**
+     * Optional CSS class name to apply to the Maskicon.
+     */
+    className?: string;
     /**
      * Optional prop to add a test id to the icon
      */

package/dist/components/temp-components/Maskicon/Maskicon.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAClD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"Maskicon.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC5E;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/components/temp-components/Maskicon/Maskicon.types.d.mts

@@ -2,15 +2,20 @@ import type { ComponentProps } from "react";
 /**
  * Maskicon component props.
  */
-export type MaskiconProps = ComponentProps<'div'> & {
+export type MaskiconProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {
     /**
      * Required address used as a unique identifier to generate the Maskicon.
      */
     address: string;
     /**
      * Optional prop to control the size of the Maskicon.
+     * This will set both width and height.
      */
     size?: number;
+    /**
+     * Optional CSS class name to apply to the Maskicon.
+     */
+    className?: string;
     /**
      * Optional prop to add a test id to the icon
      */

package/dist/components/temp-components/Maskicon/Maskicon.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAClD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"Maskicon.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC5E;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

package/dist/components/temp-components/Maskicon/Maskicon.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Maskicon.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\n/**\n * Maskicon component props.\n */\nexport type MaskiconProps = ComponentProps<'div'> & {\n  /**\n   * Required address used as a unique identifier to generate the Maskicon.\n   */\n  address: string;\n  /**\n   * Optional prop to control the size of the Maskicon.\n   */\n  size?: number;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Maskicon.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/Maskicon/Maskicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\n/**\n * Maskicon component props.\n */\nexport type MaskiconProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {\n  /**\n   * Required address used as a unique identifier to generate the Maskicon.\n   */\n  address: string;\n  /**\n   * Optional prop to control the size of the Maskicon.\n   * This will set both width and height.\n   */\n  size?: number;\n  /**\n   * Optional CSS class name to apply to the Maskicon.\n   */\n  className?: string;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}