@metamask-previews/design-system-react 0.7.0-preview.3dc70e1 → 0.11.0-preview.3aca0bd

package/CHANGELOG.md

@@ -7,6 +7,59 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.0]
+
+### Added
+
+- Added `ButtonFilter` component for filter button functionality ([#964](https://github.com/MetaMask/metamask-design-system/pull/964))
+- Added `BannerBase` component for creating custom banner notifications ([#961](https://github.com/MetaMask/metamask-design-system/pull/961))
+
+### Changed
+
+- **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props ([#948](https://github.com/MetaMask/metamask-design-system/pull/948))
+  - Removed `isInverse` and `isFloating` props
+  - Added `variant` prop with three options: `ButtonIconVariant.Default` (default), `ButtonIconVariant.Filled` (new muted background with rounded corners), and `ButtonIconVariant.Floating` (replaces `isFloating` behavior)
+  - Migration: Replace `isFloating={true}` with `variant={ButtonIconVariant.Floating}`, and use `variant={ButtonIconVariant.Default}` for standard transparent background
+  - See [Migration Guide](./MIGRATION.md#from-version-0100-to-0110) for complete migration instructions
+- Updated `Ai` icon to filled version for visual consistency ([#970](https://github.com/MetaMask/metamask-design-system/pull/970))
+
+## [0.10.0]
+
+### Changed
+
+- **BREAKING:** Updated `BadgeCount` type exports to use the ADR-0003/ADR-0004 const-object + string-union pattern instead of TypeScript enums ([#942](https://github.com/MetaMask/metamask-design-system/pull/942))
+  - `BadgeCountSize` is now provided as a const object with a derived union type rather than an enum
+  - `BadgeCount` shared prop types are now sourced from `@metamask/design-system-shared`
+  - Migration: update any enum-specific usage to const-object/union usage, while continuing to import from `@metamask/design-system-react`
+
+## [0.9.0]
+
+### Changed
+
+- **BREAKING:** Migrated `BadgeStatus` component from TypeScript enums to string union types with const objects ([#912](https://github.com/MetaMask/metamask-design-system/pull/912))
+  - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects and derived string union types
+  - **No migration required** - continue importing from `@metamask/design-system-react` as usual
+  - Const object values remain the same (e.g., `BadgeStatusStatus.Active` still works)
+  - String literals now also accepted thanks to structural typing (e.g., `'active'` works where `BadgeStatusStatus.Active` is expected)
+  - We are still evaluating best practices for const objects vs string literals - use whichever approach works best for your codebase
+  - This change implements [ADR-0003](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) and [ADR-0004](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md)
+
+## [0.8.0]
+
+### Added
+
+- Added `CorporateFare` icon to represent stocks ([#920](https://github.com/MetaMask/metamask-design-system/pull/920))
+- Added `Input` component for text input fields ([#909](https://github.com/MetaMask/metamask-design-system/pull/909))
+
+### Changed
+
+- **BREAKING:** Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))
+  - Enum values now use lowercase/kebab-case (e.g., `'primary'` instead of `'Primary'`, `'top-right'` instead of `'TopRight'`)
+  - **Migration likely not needed** - continue using enum constants (e.g., `ButtonVariant.Primary`)
+  - **Migration needed** only if your app persists or transmits these enum values (localStorage, databases, APIs)
+  - This prepares for migration from enums to string union types per ADR #127
+- Updated `@metamask/utils` peer dependency from 11.9.0 to 11.10.0 ([#903](https://github.com/MetaMask/metamask-design-system/pull/903))
+
 ## [0.7.0]
 
 ### Added
@@ -129,7 +182,11 @@ 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.7.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.11.0...HEAD
+[0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.10.0...@metamask/design-system-react@0.11.0
+[0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.9.0...@metamask/design-system-react@0.10.0
+[0.9.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.8.0...@metamask/design-system-react@0.9.0
+[0.8.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.7.0...@metamask/design-system-react@0.8.0
 [0.7.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.6.1...@metamask/design-system-react@0.7.0
 [0.6.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.6.0...@metamask/design-system-react@0.6.1
 [0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.5.0...@metamask/design-system-react@0.6.0

package/dist/components/BadgeCount/BadgeCount.cjs

@@ -24,12 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeCount = 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 Text_1 = require("../Text/index.cjs");
 const BadgeCount_constants_1 = require("./BadgeCount.constants.cjs");
-exports.BadgeCount = (0, react_1.forwardRef)(({ size = types_1.BadgeCountSize.Md, count, max = 99, textProps, className = '', style, ...props }, ref) => {
+exports.BadgeCount = (0, react_1.forwardRef)(({ size = design_system_shared_1.BadgeCountSize.Md, count, max = 99, textProps, className = '', style, ...props }, ref) => {
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Base styles
     'inline-flex items-center justify-center self-start rounded-lg bg-error-default', BadgeCount_constants_1.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], className);

package/dist/components/BadgeCount/BadgeCount.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA6C;AAC7C,uDAA+C;AAC/C,4CAAsD;AAEtD,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,2DAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,OAAO,EAAE,sDAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,gBAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,iBAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,4CAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeCountSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = forwardRef<HTMLDivElement, BadgeCountProps>(\n  (\n    {\n      size = BadgeCountSize.Md,\n      count,\n      max = 99,\n      textProps,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center self-start rounded-lg bg-error-default',\n      TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n      className,\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <Text\n          variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n          color={TextColor.ErrorInverse}\n          fontWeight={FontWeight.Medium}\n          {...textProps}\n          className={`${textProps?.className || ''}`}\n          asChild\n        >\n          <span>{count > max ? `${max}+` : `${count}`}</span>\n        </Text>\n      </div>\n    );\n  },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}
+{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAyE;AACzE,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAAsD;AAEtD,qEAGgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,2DAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,OAAO,EAAE,sDAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,gBAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,iBAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,4CAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = forwardRef<HTMLDivElement, BadgeCountProps>(\n  (\n    {\n      size = BadgeCountSize.Md,\n      count,\n      max = 99,\n      textProps,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center self-start rounded-lg bg-error-default',\n      TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n      className,\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <Text\n          variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n          color={TextColor.ErrorInverse}\n          fontWeight={FontWeight.Medium}\n          {...textProps}\n          className={`${textProps?.className || ''}`}\n          asChild\n        >\n          <span>{count > max ? `${max}+` : `${count}`}</span>\n        </Text>\n      </div>\n    );\n  },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}

package/dist/components/BadgeCount/BadgeCount.constants.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = exports.MAP_BADGECOUNT_SIZE_TEXTVARIANT = void 0;
-const types_1 = require("../../types/index.cjs");
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const Text_1 = require("../Text/index.cjs");
 // Mappings
 exports.MAP_BADGECOUNT_SIZE_TEXTVARIANT = {
-    [types_1.BadgeCountSize.Md]: Text_1.TextVariant.BodyXs,
-    [types_1.BadgeCountSize.Lg]: Text_1.TextVariant.BodySm,
+    [design_system_shared_1.BadgeCountSize.Md]: Text_1.TextVariant.BodyXs,
+    [design_system_shared_1.BadgeCountSize.Lg]: Text_1.TextVariant.BodySm,
 };
 exports.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = {
-    [types_1.BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1',
-    [types_1.BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6
+    [design_system_shared_1.BadgeCountSize.Md]: 'min-w-4 h-4 px-1',
+    [design_system_shared_1.BadgeCountSize.Lg]: 'min-w-6 h- px-1.5', // min-width 24px, height 20px, padding-horizontal 6
 };
 //# sourceMappingURL=BadgeCount.constants.cjs.map

package/dist/components/BadgeCount/BadgeCount.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.constants.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAsC;AAEtC,WAAW;AACE,QAAA,+BAA+B,GAGxC;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACvC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;CACxC,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,yBAAyB;IAC9C,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,2BAA2B,EAAE,wEAAwE;CAC3H,CAAC","sourcesContent":["import { BadgeCountSize } from '../../types';\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n  BadgeCountSize,\n  TextVariant\n> = {\n  [BadgeCountSize.Md]: TextVariant.BodyXs,\n  [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n  BadgeCountSize,\n  string\n> = {\n  [BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1', // min-width 16px, height 14px, padding-vertical 0, padding-horizontal 4\n  [BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6\n};\n"]}
+{"version":3,"file":"BadgeCount.constants.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAyE;AAEzE,4CAAsC;AAEtC,WAAW;AACE,QAAA,+BAA+B,GAGxC;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;CACxC,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kBAAkB;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oDAAoD;CAC/F,CAAC","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\n\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n  BadgeCountSize,\n  TextVariant\n> = {\n  [BadgeCountSize.Md]: TextVariant.BodyXs,\n  [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n  BadgeCountSize,\n  string\n> = {\n  [BadgeCountSize.Md]: 'min-w-4 h-4 px-1', // min-width 16px, height 14px, padding-horizontal 4\n  [BadgeCountSize.Lg]: 'min-w-6 h- px-1.5', // min-width 24px, height 20px, padding-horizontal 6\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { BadgeCountSize } from "../../types/index.cjs";
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import { TextVariant } from "../Text/index.cjs";
 export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
 export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}
+{"version":3,"file":"BadgeCount.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}

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

@@ -1,4 +1,4 @@
-import { BadgeCountSize } from "../../types/index.mjs";
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import { TextVariant } from "../Text/index.mjs";
 export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
 export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}
+{"version":3,"file":"BadgeCount.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}

package/dist/components/BadgeCount/BadgeCount.constants.mjs

@@ -1,4 +1,4 @@
-import { BadgeCountSize } from "../../types/index.mjs";
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import { TextVariant } from "../Text/index.mjs";
 // Mappings
 export const MAP_BADGECOUNT_SIZE_TEXTVARIANT = {
@@ -6,7 +6,7 @@ export const MAP_BADGECOUNT_SIZE_TEXTVARIANT = {
     [BadgeCountSize.Lg]: TextVariant.BodySm,
 };
 export const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = {
-    [BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1',
-    [BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6
+    [BadgeCountSize.Md]: 'min-w-4 h-4 px-1',
+    [BadgeCountSize.Lg]: 'min-w-6 h- px-1.5', // min-width 24px, height 20px, padding-horizontal 6
 };
 //# sourceMappingURL=BadgeCount.constants.mjs.map

package/dist/components/BadgeCount/BadgeCount.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.constants.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAEtC,WAAW;AACX,MAAM,CAAC,MAAM,+BAA+B,GAGxC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,yBAAyB;IAC9C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,2BAA2B,EAAE,wEAAwE;CAC3H,CAAC","sourcesContent":["import { BadgeCountSize } from '../../types';\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n  BadgeCountSize,\n  TextVariant\n> = {\n  [BadgeCountSize.Md]: TextVariant.BodyXs,\n  [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n  BadgeCountSize,\n  string\n> = {\n  [BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1', // min-width 16px, height 14px, padding-vertical 0, padding-horizontal 4\n  [BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6\n};\n"]}
+{"version":3,"file":"BadgeCount.constants.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAEtC,WAAW;AACX,MAAM,CAAC,MAAM,+BAA+B,GAGxC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kBAAkB;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oDAAoD;CAC/F,CAAC","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\n\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n  BadgeCountSize,\n  TextVariant\n> = {\n  [BadgeCountSize.Md]: TextVariant.BodyXs,\n  [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n  BadgeCountSize,\n  string\n> = {\n  [BadgeCountSize.Md]: 'min-w-4 h-4 px-1', // min-width 16px, height 14px, padding-horizontal 4\n  [BadgeCountSize.Lg]: 'min-w-6 h- px-1.5', // min-width 24px, height 20px, padding-horizontal 6\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAU1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}
+{"version":3,"file":"BadgeCount.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAS1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAU1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}
+{"version":3,"file":"BadgeCount.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAS1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}

package/dist/components/BadgeCount/BadgeCount.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
-import { BadgeCountSize } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { Text, TextColor, FontWeight } from "../Text/index.mjs";
 import { MAP_BADGECOUNT_SIZE_TEXTVARIANT, TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER } from "./BadgeCount.constants.mjs";

package/dist/components/BadgeCount/BadgeCount.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,0BAAgB;AAEtD,OAAO,EACL,+BAA+B,EAC/B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,oCAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,oBAAC,IAAI,IACH,OAAO,EAAE,+BAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,SAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,kCAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeCountSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = forwardRef<HTMLDivElement, BadgeCountProps>(\n  (\n    {\n      size = BadgeCountSize.Md,\n      count,\n      max = 99,\n      textProps,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center self-start rounded-lg bg-error-default',\n      TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n      className,\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <Text\n          variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n          color={TextColor.ErrorInverse}\n          fontWeight={FontWeight.Medium}\n          {...textProps}\n          className={`${textProps?.className || ''}`}\n          asChild\n        >\n          <span>{count > max ? `${max}+` : `${count}`}</span>\n        </Text>\n      </div>\n    );\n  },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}
+{"version":3,"file":"BadgeCount.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,0BAAgB;AAEtD,OAAO,EACL,+BAA+B,EAC/B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,oCAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,oBAAC,IAAI,IACH,OAAO,EAAE,+BAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,SAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,kCAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = forwardRef<HTMLDivElement, BadgeCountProps>(\n  (\n    {\n      size = BadgeCountSize.Md,\n      count,\n      max = 99,\n      textProps,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex items-center justify-center self-start rounded-lg bg-error-default',\n      TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n      className,\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <Text\n          variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n          color={TextColor.ErrorInverse}\n          fontWeight={FontWeight.Medium}\n          {...textProps}\n          className={`${textProps?.className || ''}`}\n          asChild\n        >\n          <span>{count > max ? `${max}+` : `${count}`}</span>\n        </Text>\n      </div>\n    );\n  },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { BadgeCountSize } from '../../types';\nimport type { TextProps } from '../Text';\n\n/**\n * BadgeCount component props.\n */\nexport type BadgeCountProps = ComponentProps<'div'> & {\n  /**\n   * Optional prop to control the size of the BadgeCount\n   * Different sizes map to specific height\n   *\n   * @default IconSize.Md\n   */\n  size?: BadgeCountSize;\n  /**\n   * Required prop to show the count number\n   */\n  count: number;\n  /**\n   * Optional prop to determine the max the count can go up to.\n   * If count > max, the count will be shown as \"max+\"\n   *\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Optional props to be passed to the Text component used by count\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeCount component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}
+{"version":3,"file":"BadgeCount.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"","sourcesContent":["// Import shared type for extension\nimport type { BadgeCountPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\n/**\n * BadgeCount component props (React platform-specific)\n * Extends shared props with React-specific platform concerns\n */\nexport type BadgeCountProps = ComponentProps<'div'> &\n  BadgeCountPropsShared & {\n    /**\n     * Optional props to be passed to the Text component used by count\n     */\n    textProps?: Partial<TextProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeCount component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

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

@@ -1,28 +1,11 @@
+import type { BadgeCountPropsShared } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
-import type { BadgeCountSize } from "../../types/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
 /**
- * BadgeCount component props.
+ * BadgeCount component props (React platform-specific)
+ * Extends shared props with React-specific platform concerns
  */
-export type BadgeCountProps = ComponentProps<'div'> & {
-    /**
-     * Optional prop to control the size of the BadgeCount
-     * Different sizes map to specific height
-     *
-     * @default IconSize.Md
-     */
-    size?: BadgeCountSize;
-    /**
-     * Required prop to show the count number
-     */
-    count: number;
-    /**
-     * Optional prop to determine the max the count can go up to.
-     * If count > max, the count will be shown as "max+"
-     *
-     * @default 99
-     */
-    max?: number;
+export type BadgeCountProps = ComponentProps<'div'> & BadgeCountPropsShared & {
     /**
      * Optional props to be passed to the Text component used by count
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"BadgeCount.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

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

@@ -1,28 +1,11 @@
+import type { BadgeCountPropsShared } from "@metamask-previews/design-system-shared";
 import type { ComponentProps } from "react";
-import type { BadgeCountSize } from "../../types/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
 /**
- * BadgeCount component props.
+ * BadgeCount component props (React platform-specific)
+ * Extends shared props with React-specific platform concerns
  */
-export type BadgeCountProps = ComponentProps<'div'> & {
-    /**
-     * Optional prop to control the size of the BadgeCount
-     * Different sizes map to specific height
-     *
-     * @default IconSize.Md
-     */
-    size?: BadgeCountSize;
-    /**
-     * Required prop to show the count number
-     */
-    count: number;
-    /**
-     * Optional prop to determine the max the count can go up to.
-     * If count > max, the count will be shown as "max+"
-     *
-     * @default 99
-     */
-    max?: number;
+export type BadgeCountProps = ComponentProps<'div'> & BadgeCountPropsShared & {
     /**
      * Optional props to be passed to the Text component used by count
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"BadgeCount.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { BadgeCountSize } from '../../types';\nimport type { TextProps } from '../Text';\n\n/**\n * BadgeCount component props.\n */\nexport type BadgeCountProps = ComponentProps<'div'> & {\n  /**\n   * Optional prop to control the size of the BadgeCount\n   * Different sizes map to specific height\n   *\n   * @default IconSize.Md\n   */\n  size?: BadgeCountSize;\n  /**\n   * Required prop to show the count number\n   */\n  count: number;\n  /**\n   * Optional prop to determine the max the count can go up to.\n   * If count > max, the count will be shown as \"max+\"\n   *\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Optional props to be passed to the Text component used by count\n   */\n  textProps?: Partial<TextProps>;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeCount component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}
+{"version":3,"file":"BadgeCount.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.types.ts"],"names":[],"mappings":"","sourcesContent":["// Import shared type for extension\nimport type { BadgeCountPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\n/**\n * BadgeCount component props (React platform-specific)\n * Extends shared props with React-specific platform concerns\n */\nexport type BadgeCountProps = ComponentProps<'div'> &\n  BadgeCountPropsShared & {\n    /**\n     * Optional props to be passed to the Text component used by count\n     */\n    textProps?: Partial<TextProps>;\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeCount component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

package/dist/components/BadgeCount/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { BadgeCountSize } from '../../types';\nexport { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":";;;AAAA,gFAAyE;AAAhE,sHAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { BadgeCountSize } from '@metamask-previews/design-system-shared';\nexport { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/BadgeCount/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { BadgeCountSize } from '../../types';\nexport { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { BadgeCountSize } from '@metamask-previews/design-system-shared';\nexport { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["// Import shared type for extension\nimport type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeStatus component props (React platform-specific)\n * Extends shared props with React-specific platform concerns\n */\nexport type BadgeStatusProps = ComponentProps<'div'> &\n  BadgeStatusPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}
+{"version":3,"file":"BadgeStatus.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeStatus component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type BadgeStatusProps = ComponentProps<'div'> &\n  BadgeStatusPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

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

@@ -2,7 +2,7 @@ import type { BadgeStatusPropsShared } from "@metamask-previews/design-system-sh
 import type { ComponentProps } from "react";
 /**
  * BadgeStatus component props (React platform-specific)
- * Extends shared props with React-specific platform concerns
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
  */
 export type BadgeStatusProps = ComponentProps<'div'> & BadgeStatusPropsShared & {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAClD,sBAAsB,GAAG;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"BadgeStatus.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAClD,sBAAsB,GAAG;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

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

@@ -2,7 +2,7 @@ import type { BadgeStatusPropsShared } from "@metamask-previews/design-system-sh
 import type { ComponentProps } from "react";
 /**
  * BadgeStatus component props (React platform-specific)
- * Extends shared props with React-specific platform concerns
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
  */
 export type BadgeStatusProps = ComponentProps<'div'> & BadgeStatusPropsShared & {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAClD,sBAAsB,GAAG;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAClD,sBAAsB,GAAG;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["// Import shared type for extension\nimport type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeStatus component props (React platform-specific)\n * Extends shared props with React-specific platform concerns\n */\nexport type BadgeStatusProps = ComponentProps<'div'> &\n  BadgeStatusPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}
+{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\n/**\n * BadgeStatus component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type BadgeStatusProps = ComponentProps<'div'> &\n  BadgeStatusPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n  };\n"]}

package/dist/components/BannerAlert/BannerAlert.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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");
+const BannerAlert_constants_1 = require("./BannerAlert.constants.cjs");
+exports.BannerAlert = (0, react_1.forwardRef)(({ severity = design_system_shared_1.BannerAlertSeverity.Info, iconProps, className, ...props }, ref) => {
+    const iconName = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
+    const iconColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
+    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: 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

@@ -0,0 +1 @@
+{"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.constants.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const types_1 = require("../../types/index.cjs");
+exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
+    info: types_1.IconName.Info,
+    success: types_1.IconName.Confirmation,
+    warning: types_1.IconName.Danger,
+    danger: types_1.IconName.Danger,
+};
+exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
+    info: types_1.IconColor.PrimaryDefault,
+    success: types_1.IconColor.SuccessDefault,
+    warning: types_1.IconColor.WarningDefault,
+    danger: types_1.IconColor.ErrorDefault,
+};
+exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
+    info: types_1.BoxBackgroundColor.PrimaryMuted,
+    success: types_1.BoxBackgroundColor.SuccessMuted,
+    warning: types_1.BoxBackgroundColor.WarningMuted,
+    danger: types_1.BoxBackgroundColor.ErrorMuted,
+};
+exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = {
+    info: types_1.BoxBorderColor.PrimaryDefault,
+    success: types_1.BoxBorderColor.SuccessDefault,
+    warning: types_1.BoxBorderColor.WarningDefault,
+    danger: types_1.BoxBorderColor.ErrorDefault,
+};
+//# sourceMappingURL=BannerAlert.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":";;;AAAA,kFAA8E;AAE9E,iDAKqB;AAER,QAAA,mCAAmC,GAG5C;IACF,IAAI,EAAE,gBAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,gBAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,gBAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,gBAAQ,CAAC,MAAM;CACxB,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,IAAI,EAAE,iBAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,MAAM,EAAE,iBAAS,CAAC,YAAY;CAC/B,CAAC;AAEW,QAAA,0CAA0C,GAGnD;IACF,IAAI,EAAE,0BAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,0BAAkB,CAAC,UAAU;CACtC,CAAC;AAEW,QAAA,sCAAsC,GAG/C;IACF,IAAI,EAAE,sBAAc,CAAC,cAAc;IACnC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,MAAM,EAAE,sBAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  IconColor,\n  IconName,\n} from '../../types';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconName\n> = {\n  info: IconName.Info,\n  success: IconName.Confirmation,\n  warning: IconName.Danger,\n  danger: IconName.Danger,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconColor\n> = {\n  info: IconColor.PrimaryDefault,\n  success: IconColor.SuccessDefault,\n  warning: IconColor.WarningDefault,\n  danger: IconColor.ErrorDefault,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBackgroundColor\n> = {\n  info: BoxBackgroundColor.PrimaryMuted,\n  success: BoxBackgroundColor.SuccessMuted,\n  warning: BoxBackgroundColor.WarningMuted,\n  danger: BoxBackgroundColor.ErrorMuted,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBorderColor\n> = {\n  info: BoxBorderColor.PrimaryDefault,\n  success: BoxBorderColor.SuccessDefault,\n  warning: BoxBorderColor.WarningDefault,\n  danger: BoxBorderColor.ErrorDefault,\n};\n"]}

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

@@ -0,0 +1,7 @@
+import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
+import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.cjs";
+export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
+export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
+export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
+export declare const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBorderColor>;
+//# sourceMappingURL=BannerAlert.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}

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

@@ -0,0 +1,7 @@
+import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
+import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.mjs";
+export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
+export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
+export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
+export declare const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBorderColor>;
+//# sourceMappingURL=BannerAlert.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}

package/dist/components/BannerAlert/BannerAlert.constants.mjs

@@ -0,0 +1,27 @@
+import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
+import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.mjs";
+export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
+    info: IconName.Info,
+    success: IconName.Confirmation,
+    warning: IconName.Danger,
+    danger: IconName.Danger,
+};
+export const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
+    info: IconColor.PrimaryDefault,
+    success: IconColor.SuccessDefault,
+    warning: IconColor.WarningDefault,
+    danger: IconColor.ErrorDefault,
+};
+export const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
+    info: BoxBackgroundColor.PrimaryMuted,
+    success: BoxBackgroundColor.SuccessMuted,
+    warning: BoxBackgroundColor.WarningMuted,
+    danger: BoxBackgroundColor.ErrorMuted,
+};
+export const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = {
+    info: BoxBorderColor.PrimaryDefault,
+    success: BoxBorderColor.SuccessDefault,
+    warning: BoxBorderColor.WarningDefault,
+    danger: BoxBorderColor.ErrorDefault,
+};
+//# sourceMappingURL=BannerAlert.constants.mjs.map