@metamask-previews/design-system-react 0.3.0-preview.022dda1 → 0.3.1-preview.1775c68

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/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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/design-system-react",
-  "version": "0.3.0-preview.022dda1",
+  "version": "0.3.1-preview.1775c68",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",
@@ -53,13 +53,12 @@
     "@metamask/jazzicon": "^2.0.0",
     "@radix-ui/react-slot": "^1.1.0",
     "blo": "^2.0.0",
-    "dompurify": "^3.2.5",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.0.0",
     "@jest/globals": "^29.7.0",
-    "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.022dda1",
+    "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.1775c68",
     "@metamask/auto-changelog": "^5.0.2",
     "@metamask/utils": "^11.4.2",
     "@solana/addresses": "^2.0.0",