@metamask-previews/design-system-react 0.16.0-preview.d854123 → 0.17.0-preview.ba86146

package/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.17.0]
+
+### Changed
+
+- Updated `AvatarFavicon` type internals to use ADR-0003/ADR-0004 shared types; imports from `@metamask/design-system-react` are unchanged ([#1062](https://github.com/MetaMask/metamask-design-system/pull/1062))
+- **BREAKING:** Migrated `Text` typography types (`TextVariant`, `TextColor`, `FontWeight`, `FontStyle`, `FontFamily`) to `@metamask/design-system-shared`; all imports through `@metamask/design-system-react` continue to work without change ([#1047](https://github.com/MetaMask/metamask-design-system/pull/1047))
+  - `FontWeight`, `FontStyle`, and `FontFamily` underlying string values changed to semantic identifiers (e.g. `FontWeight.Bold` was `'font-bold'`, now `'bold'`); idiomatic usage is unaffected
+  - Projects scanning `node_modules` for Tailwind class names must also scan `@metamask/design-system-shared`
+  - See [Migration Guide](./MIGRATION.md#from-version-0160-to-0170)
+
 ## [0.16.0]
 
 ### Changed
@@ -231,7 +241,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.16.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.0...HEAD
+[0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.16.0...@metamask/design-system-react@0.17.0
 [0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.15.0...@metamask/design-system-react@0.16.0
 [0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...@metamask/design-system-react@0.15.0
 [0.14.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.13.0...@metamask/design-system-react@0.14.0

package/dist/components/AvatarFavicon/AvatarFavicon.cjs

@@ -26,9 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFavicon = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
-exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = types_1.AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
+exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = (0, react_1.useState)('');
     const backupFallbackText = fallbackText || name?.[0] || '';
     const altText = name || 'Dapp logo'; // TBC: Add localization for default text

package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA0E;AAC1E,+CAAoD;AAEpD,iDAAgD;AAChD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
+{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAAoD;AAEpD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.mjs

@@ -4,10 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { AvatarBaseShape } from "@metamask-previews/design-system-shared";
+import { AvatarBaseShape, AvatarFaviconSize } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef, useState } from "react";
 const React = $importDefault($React);
-import { AvatarFaviconSize } from "../../types/index.mjs";
 import { AvatarBase } from "../AvatarBase/index.mjs";
 export const AvatarFavicon = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = useState('');

package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
+{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarFaviconProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional name of the dapp\n     * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n     */\n    name?: string;\n    /**\n     * Optional URL for the dapp favicon/logo\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the dapp name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}
+{"version":3,"file":"AvatarFavicon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarFaviconPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarFavicon component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarFaviconProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> &\n  AvatarFaviconPropsShared & {\n    /**\n     * Optional URL for the dapp favicon/logo\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the dapp name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.types.d.cts

@@ -1,11 +1,11 @@
+import type { AvatarFaviconPropsShared } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
-export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
-    /**
-     * Optional name of the dapp
-     * Used as alt text for image and first letter is used as fallback if no fallbackText provided
-     */
-    name?: string;
+/**
+ * AvatarFavicon component props (React platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
+ */
+export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarFaviconPropsShared & {
     /**
      * Optional URL for the dapp favicon/logo
      * When provided, displays the image instead of fallback text

package/dist/components/AvatarFavicon/AvatarFavicon.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
+{"version":3,"file":"AvatarFavicon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.types.d.mts

@@ -1,11 +1,11 @@
+import type { AvatarFaviconPropsShared } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
-export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
-    /**
-     * Optional name of the dapp
-     * Used as alt text for image and first letter is used as fallback if no fallbackText provided
-     */
-    name?: string;
+/**
+ * AvatarFavicon component props (React platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
+ */
+export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarFaviconPropsShared & {
     /**
      * Optional URL for the dapp favicon/logo
      * When provided, displays the image instead of fallback text

package/dist/components/AvatarFavicon/AvatarFavicon.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
+{"version":3,"file":"AvatarFavicon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarFaviconProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional name of the dapp\n     * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n     */\n    name?: string;\n    /**\n     * Optional URL for the dapp favicon/logo\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the dapp name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}
+{"version":3,"file":"AvatarFavicon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarFaviconPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarFavicon component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarFaviconProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> &\n  AvatarFaviconPropsShared & {\n    /**\n     * Optional URL for the dapp favicon/logo\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the dapp name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}

package/dist/components/AvatarFavicon/index.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFavicon = exports.AvatarFaviconSize = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return types_1.AvatarFaviconSize; } });
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarFaviconSize; } });
 var AvatarFavicon_1 = require("./AvatarFavicon.cjs");
 Object.defineProperty(exports, "AvatarFavicon", { enumerable: true, get: function () { return AvatarFavicon_1.AvatarFavicon; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/AvatarFavicon/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":";;;AAAA,+CAAgD;AAAvC,0GAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarFaviconSize } from '../../types';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":";;;AAAA,gFAA4E;AAAnE,yHAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarFaviconSize } from '@metamask-previews/design-system-shared';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}

package/dist/components/AvatarFavicon/index.d.cts

@@ -1,4 +1,4 @@
-export { AvatarFaviconSize } from "../../types/index.cjs";
+export { AvatarFaviconSize } from "@metamask-previews/design-system-shared";
 export { AvatarFavicon } from "./AvatarFavicon.cjs";
 export type { AvatarFaviconProps } from "./AvatarFavicon.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/AvatarFavicon/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/AvatarFavicon/index.d.mts

@@ -1,4 +1,4 @@
-export { AvatarFaviconSize } from "../../types/index.mjs";
+export { AvatarFaviconSize } from "@metamask-previews/design-system-shared";
 export { AvatarFavicon } from "./AvatarFavicon.mjs";
 export type { AvatarFaviconProps } from "./AvatarFavicon.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/AvatarFavicon/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/AvatarFavicon/index.mjs

@@ -1,3 +1,3 @@
-export { AvatarFaviconSize } from "../../types/index.mjs";
+export { AvatarFaviconSize } from "@metamask-previews/design-system-shared";
 export { AvatarFavicon } from "./AvatarFavicon.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/AvatarFavicon/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarFaviconSize } from '../../types';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarFaviconSize } from '@metamask-previews/design-system-shared';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}

package/dist/components/BannerAlert/BannerAlert.cjs

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerAlert = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
+const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
 const BannerBase_1 = require("../BannerBase/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
@@ -36,7 +37,7 @@ exports.BannerAlert = (0, react_1.forwardRef)(({ severity = design_system_shared
     const backgroundColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
     const borderColorClass = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];
     const mergedClassName = (0, tw_merge_1.twMerge)('border-l-4', borderColorClass, className);
-    return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, startAccessory: react_1.default.createElement(Icon_1.Icon, { name: iconName, color: iconColor, size: Icon_1.IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, paddingLeft: 2, className: mergedClassName, ...props }));
+    return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, startAccessory: react_1.default.createElement(Icon_1.Icon, { name: iconName, color: iconColor, size: types_1.IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, paddingLeft: 2, className: mergedClassName, ...props }));
 });
 exports.BannerAlert.displayName = 'BannerAlert';
 //# sourceMappingURL=BannerAlert.cjs.map

package/dist/components/BannerAlert/BannerAlert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA8E;AAC9E,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAAyC;AAEzC,uEAKiC;AAGpB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAAE,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,8DAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,IAAA,kBAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,eAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon, IconSize } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n  (\n    { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n    ref,\n  ) => {\n    const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n    const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n    const backgroundColor =\n      MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n    const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n    const mergedClassName = twMerge('border-l-4', borderColorClass, className);\n\n    return (\n      <BannerBase\n        ref={ref}\n        startAccessory={\n          <Icon\n            name={iconName}\n            color={iconColor}\n            size={IconSize.Lg}\n            {...iconProps}\n          />\n        }\n        backgroundColor={backgroundColor}\n        paddingLeft={2}\n        className={mergedClassName}\n        {...props}\n      />\n    );\n  },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
+{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA8E;AAC9E,+CAA0C;AAE1C,iDAAuC;AACvC,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAKiC;AAGpB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAAE,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,8DAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,IAAA,kBAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,gBAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n  (\n    { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n    ref,\n  ) => {\n    const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n    const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n    const backgroundColor =\n      MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n    const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n    const mergedClassName = twMerge('border-l-4', borderColorClass, className);\n\n    return (\n      <BannerBase\n        ref={ref}\n        startAccessory={\n          <Icon\n            name={iconName}\n            color={iconColor}\n            size={IconSize.Lg}\n            {...iconProps}\n          />\n        }\n        backgroundColor={backgroundColor}\n        paddingLeft={2}\n        className={mergedClassName}\n        {...props}\n      />\n    );\n  },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}

package/dist/components/BannerAlert/BannerAlert.d.cts

@@ -42,7 +42,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         nonce?: string | undefined;
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
-        size?: import("../index.cjs").ButtonSize | undefined;
+        size?: import("../../types/index.cjs").ButtonBaseSize | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -297,10 +297,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
-        startIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        startIconName?: import("../Icon/index.cjs").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         startAccessory?: React.ReactNode;
-        endIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        endIconName?: import("../Icon/index.cjs").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
@@ -352,7 +352,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         nonce?: string | undefined;
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
-        size?: import("../index.cjs").ButtonSize | undefined;
+        size?: import("../../types/index.cjs").ButtonBaseSize | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -607,10 +607,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
         loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
-        startIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        startIconName?: import("../Icon/index.cjs").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         startAccessory?: React.ReactNode;
-        endIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        endIconName?: import("../Icon/index.cjs").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
         endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;

package/dist/components/BannerAlert/BannerAlert.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAc1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
+{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}

package/dist/components/BannerAlert/BannerAlert.d.mts

@@ -42,7 +42,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         nonce?: string | undefined;
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
-        size?: import("../index.mjs").ButtonSize | undefined;
+        size?: import("../../types/index.mjs").ButtonBaseSize | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -297,10 +297,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
-        startIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        startIconName?: import("../Icon/index.mjs").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         startAccessory?: React.ReactNode;
-        endIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        endIconName?: import("../Icon/index.mjs").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;
@@ -352,7 +352,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         nonce?: string | undefined;
         tabIndex?: number | undefined;
         disabled?: boolean | undefined;
-        size?: import("../index.mjs").ButtonSize | undefined;
+        size?: import("../../types/index.mjs").ButtonBaseSize | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -607,10 +607,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
         isLoading?: boolean | undefined;
         loadingText?: string | undefined;
         loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
-        startIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        startIconName?: import("../Icon/index.mjs").IconName | undefined;
         startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         startAccessory?: React.ReactNode;
-        endIconName?: import("@metamask-previews/design-system-shared").IconName | undefined;
+        endIconName?: import("../Icon/index.mjs").IconName | undefined;
         endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
         endAccessory?: React.ReactNode;
         isDisabled?: boolean | undefined;

package/dist/components/BannerAlert/BannerAlert.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAc1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
+{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}

package/dist/components/BannerAlert/BannerAlert.mjs

@@ -7,9 +7,10 @@ function $importDefault(module) {
 import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
+import { IconSize } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { BannerBase } from "../BannerBase/index.mjs";
-import { Icon, IconSize } from "../Icon/index.mjs";
+import { Icon } from "../Icon/index.mjs";
 import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME } from "./BannerAlert.constants.mjs";
 export const BannerAlert = forwardRef(({ severity = BannerAlertSeverity.Info, iconProps, className, ...props }, ref) => {
     const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];

package/dist/components/BannerAlert/BannerAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,0BAAgB;AAEzC,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EACtC,oCAAoC,EACpC,mCAAmC,EACpC,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon, IconSize } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n  (\n    { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n    ref,\n  ) => {\n    const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n    const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n    const backgroundColor =\n      MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n    const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n    const mergedClassName = twMerge('border-l-4', borderColorClass, className);\n\n    return (\n      <BannerBase\n        ref={ref}\n        startAccessory={\n          <Icon\n            name={iconName}\n            color={iconColor}\n            size={IconSize.Lg}\n            {...iconProps}\n          />\n        }\n        backgroundColor={backgroundColor}\n        paddingLeft={2}\n        className={mergedClassName}\n        {...props}\n      />\n    );\n  },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
+{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EACtC,oCAAoC,EACpC,mCAAmC,EACpC,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n  (\n    { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n    ref,\n  ) => {\n    const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n    const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n    const backgroundColor =\n      MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n    const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n    const mergedClassName = twMerge('border-l-4', borderColorClass, className);\n\n    return (\n      <BannerBase\n        ref={ref}\n        startAccessory={\n          <Icon\n            name={iconName}\n            color={iconColor}\n            size={IconSize.Lg}\n            {...iconProps}\n          />\n        }\n        backgroundColor={backgroundColor}\n        paddingLeft={2}\n        className={mergedClassName}\n        {...props}\n      />\n    );\n  },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}

package/dist/components/BannerBase/BannerBase.cjs

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerBase = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
 const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
@@ -42,10 +43,10 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
         startAccessory,
         react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
             hasContent(title) &&
-                (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, fontWeight: types_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
-            hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
+                (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
+            hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
             hasContent(children) &&
-                (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
+                (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
             shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
                 react_1.default.createElement(Button_1.Button, { size: types_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
         shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: types_1.IconName.Close, size: types_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));

package/dist/components/BannerBase/BannerBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  BoxFlexDirection,\n  IconName,\n  TextVariant,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n  (\n    {\n      title,\n      titleProps,\n      description,\n      descriptionProps,\n      children,\n      childrenWrapperProps,\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      startAccessory,\n      onClose,\n      closeButtonProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedActionButtonProps = actionButtonProps ?? {};\n\n    const {\n      ariaLabel: closeButtonAriaLabel = 'Close banner',\n      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', className)}\n        {...props}\n      >\n        {startAccessory}\n\n        <Box className=\"min-w-0 flex-1\">\n          {hasContent(title) &&\n            (isTextContent(title) ? (\n              <Text\n                variant={TextVariant.BodyMd}\n                fontWeight={FontWeight.Medium}\n                {...titleProps}\n              >\n                {title}\n              </Text>\n            ) : (\n              title\n            ))}\n\n          {hasContent(description) && (\n            <Box className={hasContent(title) ? 'mt-1' : undefined}>\n              {isTextContent(description) ? (\n                <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </Box>\n          )}\n\n          {hasContent(children) &&\n            (isTextContent(children) ? (\n              <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n                {children}\n              </Text>\n            ) : (\n              children\n            ))}\n\n          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  BoxFlexDirection,\n  IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n  (\n    {\n      title,\n      titleProps,\n      description,\n      descriptionProps,\n      children,\n      childrenWrapperProps,\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      startAccessory,\n      onClose,\n      closeButtonProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedActionButtonProps = actionButtonProps ?? {};\n\n    const {\n      ariaLabel: closeButtonAriaLabel = 'Close banner',\n      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', className)}\n        {...props}\n      >\n        {startAccessory}\n\n        <Box className=\"min-w-0 flex-1\">\n          {hasContent(title) &&\n            (isTextContent(title) ? (\n              <Text\n                variant={TextVariant.BodyMd}\n                fontWeight={FontWeight.Medium}\n                {...titleProps}\n              >\n                {title}\n              </Text>\n            ) : (\n              title\n            ))}\n\n          {hasContent(description) && (\n            <Box className={hasContent(title) ? 'mt-1' : undefined}>\n              {isTextContent(description) ? (\n                <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </Box>\n          )}\n\n          {hasContent(children) &&\n            (isTextContent(children) ? (\n              <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n                {children}\n              </Text>\n            ) : (\n              children\n            ))}\n\n          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

package/dist/components/BannerBase/BannerBase.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAGV,QAAQ,EAET,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
+{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}

package/dist/components/BannerBase/BannerBase.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAGV,QAAQ,EAET,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
+{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs

@@ -4,9 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
+import { FontWeight, TextVariant } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
-import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, FontWeight, BoxFlexDirection, IconName, TextVariant } from "../../types/index.mjs";
+import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, BoxFlexDirection, IconName } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { Box } from "../Box/index.mjs";
 import { Button } from "../Button/index.mjs";

package/dist/components/BannerBase/BannerBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  BoxFlexDirection,\n  IconName,\n  TextVariant,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n  (\n    {\n      title,\n      titleProps,\n      description,\n      descriptionProps,\n      children,\n      childrenWrapperProps,\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      startAccessory,\n      onClose,\n      closeButtonProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedActionButtonProps = actionButtonProps ?? {};\n\n    const {\n      ariaLabel: closeButtonAriaLabel = 'Close banner',\n      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', className)}\n        {...props}\n      >\n        {startAccessory}\n\n        <Box className=\"min-w-0 flex-1\">\n          {hasContent(title) &&\n            (isTextContent(title) ? (\n              <Text\n                variant={TextVariant.BodyMd}\n                fontWeight={FontWeight.Medium}\n                {...titleProps}\n              >\n                {title}\n              </Text>\n            ) : (\n              title\n            ))}\n\n          {hasContent(description) && (\n            <Box className={hasContent(title) ? 'mt-1' : undefined}>\n              {isTextContent(description) ? (\n                <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </Box>\n          )}\n\n          {hasContent(children) &&\n            (isTextContent(children) ? (\n              <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n                {children}\n              </Text>\n            ) : (\n              children\n            ))}\n\n          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
+{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  BoxFlexDirection,\n  IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n  (\n    {\n      title,\n      titleProps,\n      description,\n      descriptionProps,\n      children,\n      childrenWrapperProps,\n      actionButtonLabel,\n      actionButtonOnClick,\n      actionButtonProps,\n      startAccessory,\n      onClose,\n      closeButtonProps,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedActionButtonProps = actionButtonProps ?? {};\n\n    const {\n      ariaLabel: closeButtonAriaLabel = 'Close banner',\n      onClick: closeButtonPropsOnClick,\n      className: closeButtonClassName,\n      ...resolvedCloseButtonProps\n    } = closeButtonProps ?? {};\n\n    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n    const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n    return (\n      <Box\n        ref={ref}\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Start}\n        gap={2}\n        backgroundColor={BoxBackgroundColor.BackgroundDefault}\n        padding={3}\n        className={twMerge('rounded-sm', className)}\n        {...props}\n      >\n        {startAccessory}\n\n        <Box className=\"min-w-0 flex-1\">\n          {hasContent(title) &&\n            (isTextContent(title) ? (\n              <Text\n                variant={TextVariant.BodyMd}\n                fontWeight={FontWeight.Medium}\n                {...titleProps}\n              >\n                {title}\n              </Text>\n            ) : (\n              title\n            ))}\n\n          {hasContent(description) && (\n            <Box className={hasContent(title) ? 'mt-1' : undefined}>\n              {isTextContent(description) ? (\n                <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                  {description}\n                </Text>\n              ) : (\n                description\n              )}\n            </Box>\n          )}\n\n          {hasContent(children) &&\n            (isTextContent(children) ? (\n              <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n                {children}\n              </Text>\n            ) : (\n              children\n            ))}\n\n          {shouldShowActionButton && (\n            <Box className=\"mt-4\">\n              <Button\n                size={ButtonSize.Md}\n                onClick={actionButtonOnClick}\n                {...resolvedActionButtonProps}\n              >\n                {actionButtonLabel}\n              </Button>\n            </Box>\n          )}\n        </Box>\n\n        {shouldShowCloseButton && (\n          <ButtonIcon\n            className={twMerge('ml-3 self-start', closeButtonClassName)}\n            iconName={IconName.Close}\n            size={ButtonIconSize.Sm}\n            ariaLabel={closeButtonAriaLabel}\n            onClick={onClose ?? closeButtonPropsOnClick}\n            {...resolvedCloseButtonProps}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts

@@ -1,11 +1,12 @@
+import { IconSize } from "../Icon/index.cjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: "md";
-    readonly md: "lg";
-    readonly lg: "xl";
+    readonly sm: IconSize.Md;
+    readonly md: IconSize.Lg;
+    readonly lg: IconSize.Xl;
 };
 //# sourceMappingURL=ButtonIcon.constants.d.cts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts

@@ -1,11 +1,12 @@
+import { IconSize } from "../Icon/index.mjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: "md";
-    readonly md: "lg";
-    readonly lg: "xl";
+    readonly sm: IconSize.Md;
+    readonly md: IconSize.Lg;
+    readonly lg: IconSize.Xl;
 };
 //# sourceMappingURL=ButtonIcon.constants.d.mts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}