@metamask/design-system-react-native 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.22.0]
+
+### Changed
+
+- **BREAKING:** Updated `Button`, `ButtonBase`, and `ButtonHero` size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+- **BREAKING:** Updated `ButtonIconSize` and `ButtonIconVariant` to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#1038](https://github.com/MetaMask/metamask-design-system/pull/1038))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+- **BREAKING:** `TextField` and `TextFieldSearch` now use a root `Box`/`View`, require native `TextInput` props under `inputProps`, rename `isReadonly` to `isReadOnly`, and use `inputRef` for the inner input ref. See [Migration Guide](./MIGRATION.md#from-version-0210-to-0220) ([#1081](https://github.com/MetaMask/metamask-design-system/pull/1081))
+- Updated Figma Code Connect to the live `MMDS Components` file and aligned `ButtonIcon` and `TextButton` mappings with the current component APIs shown in Dev Mode ([#1109](https://github.com/MetaMask/metamask-design-system/pull/1109))
+
+## [0.21.0]
+
+### Added
+
+- Added `Telegram` to the `IconName` set for use anywhere the React Native package accepts design system icons ([#1122](https://github.com/MetaMask/metamask-design-system/pull/1122))
+
+### Changed
+
+- **BREAKING:** Updated `AvatarIcon` exports to use shared const-object + string-union types rather than local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#996](https://github.com/MetaMask/metamask-design-system/pull/996))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+
 ## [0.20.0]
 
 ### Added
@@ -361,7 +386,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.20.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.22.0...HEAD
+[0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.21.0...@metamask/design-system-react-native@0.22.0
+[0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.20.0...@metamask/design-system-react-native@0.21.0
 [0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.19.0...@metamask/design-system-react-native@0.20.0
 [0.19.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.18.0...@metamask/design-system-react-native@0.19.0
 [0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.17.0...@metamask/design-system-react-native@0.18.0

package/dist/components/AvatarIcon/AvatarIcon.cjs

@@ -4,13 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarIcon = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const AvatarIcon_constants_1 = require("./AvatarIcon.constants.cjs");
-const AvatarIcon = ({ size = types_1.AvatarIconSize.Md, shape = types_1.AvatarBaseShape.Circle, severity = types_1.AvatarIconSeverity.Neutral, iconName, iconProps, twClassName, style, ...props }) => {
+const AvatarIcon = ({ size = design_system_shared_1.AvatarIconSize.Md, shape = types_1.AvatarBaseShape.Circle, severity = design_system_shared_1.AvatarIconSeverity.Neutral, iconName, iconProps, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     return (<AvatarBase_1.AvatarBase size={size} shape={shape} accessibilityRole="image" {...props} style={[
             tw.style(AvatarIcon_constants_1.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity], twClassName),

package/dist/components/AvatarIcon/AvatarIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAE1B,iDAIqB;AACrB,wDAA2C;AAC3C,4CAA+B;AAE/B,qEAIgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,0BAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,qEAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,wDAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n  AvatarIconSize,\n  AvatarBaseShape,\n  AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_AVATARICON_SIZE_ICONSIZE,\n  MAP_AVATARICON_SEVERITY_ICONCOLOR,\n  TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n  size = AvatarIconSize.Md,\n  shape = AvatarBaseShape.Circle,\n  severity = AvatarIconSeverity.Neutral,\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: AvatarIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={shape}\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n        color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n        {...iconProps}\n      />\n    </AvatarBase>\n  );\n};\n"]}
+{"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAGwC;AACxC,qFAAmE;AACnE,kDAA0B;AAE1B,iDAA8C;AAC9C,wDAA2C;AAC3C,4CAA+B;AAE/B,qEAIgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,yCAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,qEAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,wDAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_AVATARICON_SIZE_ICONSIZE,\n  MAP_AVATARICON_SEVERITY_ICONCOLOR,\n  TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n  size = AvatarIconSize.Md,\n  shape = AvatarBaseShape.Circle,\n  severity = AvatarIconSeverity.Neutral,\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: AvatarIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={shape}\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n        color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n        {...iconProps}\n      />\n    </AvatarBase>\n  );\n};\n"]}

package/dist/components/AvatarIcon/AvatarIcon.constants.cjs

@@ -1,28 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = exports.MAP_AVATARICON_SIZE_ICONSIZE = exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = void 0;
-const types_1 = require("../../types/index.cjs");
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const Icon_1 = require("../Icon/index.cjs");
 // Mappings
 exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {
-    [types_1.AvatarIconSeverity.Neutral]: 'bg-muted',
-    [types_1.AvatarIconSeverity.Info]: 'bg-info-muted',
-    [types_1.AvatarIconSeverity.Success]: 'bg-success-muted',
-    [types_1.AvatarIconSeverity.Error]: 'bg-error-muted',
-    [types_1.AvatarIconSeverity.Warning]: 'bg-warning-muted',
+    [design_system_shared_1.AvatarIconSeverity.Neutral]: 'bg-muted',
+    [design_system_shared_1.AvatarIconSeverity.Info]: 'bg-info-muted',
+    [design_system_shared_1.AvatarIconSeverity.Success]: 'bg-success-muted',
+    [design_system_shared_1.AvatarIconSeverity.Error]: 'bg-error-muted',
+    [design_system_shared_1.AvatarIconSeverity.Warning]: 'bg-warning-muted',
 };
 exports.MAP_AVATARICON_SIZE_ICONSIZE = {
-    [types_1.AvatarIconSize.Xs]: Icon_1.IconSize.Xs,
-    [types_1.AvatarIconSize.Sm]: Icon_1.IconSize.Sm,
-    [types_1.AvatarIconSize.Md]: Icon_1.IconSize.Md,
-    [types_1.AvatarIconSize.Lg]: Icon_1.IconSize.Lg,
-    [types_1.AvatarIconSize.Xl]: Icon_1.IconSize.Xl, // 48px avatar -> 32px icon
+    [design_system_shared_1.AvatarIconSize.Xs]: Icon_1.IconSize.Xs,
+    [design_system_shared_1.AvatarIconSize.Sm]: Icon_1.IconSize.Sm,
+    [design_system_shared_1.AvatarIconSize.Md]: Icon_1.IconSize.Md,
+    [design_system_shared_1.AvatarIconSize.Lg]: Icon_1.IconSize.Lg,
+    [design_system_shared_1.AvatarIconSize.Xl]: Icon_1.IconSize.Xl, // 48px avatar -> 32px icon
 };
 exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = {
-    [types_1.AvatarIconSeverity.Neutral]: Icon_1.IconColor.IconAlternative,
-    [types_1.AvatarIconSeverity.Info]: Icon_1.IconColor.InfoDefault,
-    [types_1.AvatarIconSeverity.Success]: Icon_1.IconColor.SuccessDefault,
-    [types_1.AvatarIconSeverity.Error]: Icon_1.IconColor.ErrorDefault,
-    [types_1.AvatarIconSeverity.Warning]: Icon_1.IconColor.WarningDefault,
+    [design_system_shared_1.AvatarIconSeverity.Neutral]: Icon_1.IconColor.IconAlternative,
+    [design_system_shared_1.AvatarIconSeverity.Info]: Icon_1.IconColor.InfoDefault,
+    [design_system_shared_1.AvatarIconSeverity.Success]: Icon_1.IconColor.SuccessDefault,
+    [design_system_shared_1.AvatarIconSeverity.Error]: Icon_1.IconColor.ErrorDefault,
+    [design_system_shared_1.AvatarIconSeverity.Warning]: Icon_1.IconColor.WarningDefault,
 };
 //# sourceMappingURL=AvatarIcon.constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAiE;AACjE,4CAA8C;AAE9C,WAAW;AACE,QAAA,8CAA8C,GAGvD;IACF,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,0BAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,0BAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACW,QAAA,iCAAiC,GAG1C;IACF,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,eAAe;IACvD,CAAC,0BAAkB,CAAC,IAAI,CAAC,EAAE,gBAAS,CAAC,WAAW;IAChD,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;IACtD,CAAC,0BAAkB,CAAC,KAAK,CAAC,EAAE,gBAAS,CAAC,YAAY;IAClD,CAAC,0BAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import { AvatarIconSize, AvatarIconSeverity } from '../../types';\nimport { IconSize, IconColor } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
+{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,yEAGwC;AAExC,4CAA8C;AAE9C,WAAW;AACE,QAAA,8CAA8C,GAGvD;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACW,QAAA,iCAAiC,GAG1C;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,eAAe;IACvD,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,gBAAS,CAAC,WAAW;IAChD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;IACtD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAS,CAAC,YAAY;IAClD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\n\nimport { IconSize, IconColor } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { AvatarIconSize, AvatarIconSeverity } from "../../types/index.cjs";
+import { AvatarIconSeverity, AvatarIconSize } from "@metamask/design-system-shared";
 import { IconSize, IconColor } from "../Icon/index.cjs";
 export declare const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<AvatarIconSeverity, string>;
 export declare const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize>;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAG9C,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}
+{"version":3,"file":"AvatarIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,uCAAuC;AAExC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAG9C,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}

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

@@ -1,4 +1,4 @@
-import { AvatarIconSize, AvatarIconSeverity } from "../../types/index.mjs";
+import { AvatarIconSeverity, AvatarIconSize } from "@metamask/design-system-shared";
 import { IconSize, IconColor } from "../Icon/index.mjs";
 export declare const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<AvatarIconSeverity, string>;
 export declare const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize>;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAG9C,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}
+{"version":3,"file":"AvatarIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,uCAAuC;AAExC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAG9C,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.constants.mjs

@@ -1,4 +1,4 @@
-import { AvatarIconSize, AvatarIconSeverity } from "../../types/index.mjs";
+import { AvatarIconSeverity, AvatarIconSize } from "@metamask/design-system-shared";
 import { IconSize, IconColor } from "../Icon/index.mjs";
 // Mappings
 export const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C,WAAW;AACX,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAG1C;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IACvD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;IAChD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACtD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAClD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import { AvatarIconSize, AvatarIconSeverity } from '../../types';\nimport { IconSize, IconColor } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
+{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,uCAAuC;AAExC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C,WAAW;AACX,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAG1C;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IACvD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;IAChD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACtD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAClD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\n\nimport { IconSize, IconColor } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}
+{"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}
+{"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.mjs

@@ -4,10 +4,11 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarIconSeverity, AvatarIconSize } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
-import { AvatarIconSize, AvatarBaseShape, AvatarIconSeverity } from "../../types/index.mjs";
+import { AvatarBaseShape } from "../../types/index.mjs";
 import { AvatarBase } from "../AvatarBase/index.mjs";
 import { Icon } from "../Icon/index.mjs";
 import { MAP_AVATARICON_SIZE_ICONSIZE, MAP_AVATARICON_SEVERITY_ICONCOLOR, TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR } from "./AvatarIcon.constants.mjs";

package/dist/components/AvatarIcon/AvatarIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,cAAc,EACd,eAAe,EACf,kBAAkB,EACnB,8BAAoB;AACrB,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,4BAA4B,EAC5B,iCAAiC,EACjC,8CAA8C,EAC/C,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,8CAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n  AvatarIconSize,\n  AvatarBaseShape,\n  AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_AVATARICON_SIZE_ICONSIZE,\n  MAP_AVATARICON_SEVERITY_ICONCOLOR,\n  TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n  size = AvatarIconSize.Md,\n  shape = AvatarBaseShape.Circle,\n  severity = AvatarIconSeverity.Neutral,\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: AvatarIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={shape}\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n        color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n        {...iconProps}\n      />\n    </AvatarBase>\n  );\n};\n"]}
+{"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,4BAA4B,EAC5B,iCAAiC,EACjC,8CAA8C,EAC/C,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,8CAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_AVATARICON_SIZE_ICONSIZE,\n  MAP_AVATARICON_SEVERITY_ICONCOLOR,\n  TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n  size = AvatarIconSize.Md,\n  shape = AvatarBaseShape.Circle,\n  severity = AvatarIconSeverity.Neutral,\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: AvatarIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={shape}\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n        color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n        {...iconProps}\n      />\n    </AvatarBase>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconSeverity } from '../../types';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * AvatarIcon component props.\n */\nexport type AvatarIconProps = {\n  /**\n   * Optional prop to control the severity of the avatar\n   *\n   * @default AvatarIconSeverity.Neutral\n   */\n  severity?: AvatarIconSeverity;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;\n"]}
+{"version":3,"file":"AvatarIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconPropsShared } from '@metamask/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconProps } from '../Icon';\n\n/**\n * AvatarIcon component props.\n */\nexport type AvatarIconProps = AvatarIconPropsShared & {\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;\n"]}

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

@@ -1,20 +1,10 @@
-import type { AvatarIconSeverity } from "../../types/index.cjs";
+import type { AvatarIconPropsShared } from "@metamask/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
-import type { IconName, IconProps } from "../Icon/index.cjs";
+import type { IconProps } from "../Icon/index.cjs";
 /**
  * AvatarIcon component props.
  */
-export type AvatarIconProps = {
-    /**
-     * Optional prop to control the severity of the avatar
-     *
-     * @default AvatarIconSeverity.Neutral
-     */
-    severity?: AvatarIconSeverity;
-    /**
-     * Optional prop to specify an icon to show
-     */
-    iconName: IconName;
+export type AvatarIconProps = AvatarIconPropsShared & {
     /**
      * Optional prop to pass additional properties to the icon
      */

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,8BAAoB;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"AvatarIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAE5E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAC"}

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

@@ -1,20 +1,10 @@
-import type { AvatarIconSeverity } from "../../types/index.mjs";
+import type { AvatarIconPropsShared } from "@metamask/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
-import type { IconName, IconProps } from "../Icon/index.mjs";
+import type { IconProps } from "../Icon/index.mjs";
 /**
  * AvatarIcon component props.
  */
-export type AvatarIconProps = {
-    /**
-     * Optional prop to control the severity of the avatar
-     *
-     * @default AvatarIconSeverity.Neutral
-     */
-    severity?: AvatarIconSeverity;
-    /**
-     * Optional prop to specify an icon to show
-     */
-    iconName: IconName;
+export type AvatarIconProps = AvatarIconPropsShared & {
     /**
      * Optional prop to pass additional properties to the icon
      */

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,8BAAoB;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"AvatarIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAE5E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconSeverity } from '../../types';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * AvatarIcon component props.\n */\nexport type AvatarIconProps = {\n  /**\n   * Optional prop to control the severity of the avatar\n   *\n   * @default AvatarIconSeverity.Neutral\n   */\n  severity?: AvatarIconSeverity;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;\n"]}
+{"version":3,"file":"AvatarIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconPropsShared } from '@metamask/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconProps } from '../Icon';\n\n/**\n * AvatarIcon component props.\n */\nexport type AvatarIconProps = AvatarIconPropsShared & {\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;\n"]}

package/dist/components/AvatarIcon/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":";;;AAAA,+CAAiE;AAAxD,uGAAA,cAAc,OAAA;AAAE,2GAAA,kBAAkB,OAAA;AAC3C,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { AvatarIconSize, AvatarIconSeverity } from '../../types';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,0HAAA,kBAAkB,OAAA;AAClB,sHAAA,cAAc,OAAA;AAEhB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { AvatarIconSize, AvatarIconSeverity } from "../../types/index.cjs";
+export { AvatarIconSeverity, AvatarIconSize, } from "@metamask/design-system-shared";
 export { AvatarIcon } from "./AvatarIcon.cjs";
 export type { AvatarIconProps } from "./AvatarIcon.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,GACf,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

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

@@ -1,4 +1,4 @@
-export { AvatarIconSize, AvatarIconSeverity } from "../../types/index.mjs";
+export { AvatarIconSeverity, AvatarIconSize, } from "@metamask/design-system-shared";
 export { AvatarIcon } from "./AvatarIcon.mjs";
 export type { AvatarIconProps } from "./AvatarIcon.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,GACf,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/AvatarIcon/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { AvatarIconSize, AvatarIconSeverity } from '../../types';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n  AvatarIconSeverity,\n  AvatarIconSize,\n} from '@metamask/design-system-shared';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}

package/dist/components/BadgeIcon/BadgeIcon.cjs

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeIcon = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native/index.js");
@@ -14,7 +15,7 @@ const BadgeIcon = ({ iconName, iconProps, twClassName, style, ...props }) => {
             tw.style('h-4 w-4 bg-icon-default rounded-full items-center justify-center', twClassName),
             style,
         ]}>
-      <Icon_1.Icon color={Icon_1.IconColor.PrimaryInverse} {...iconProps} size={Icon_1.IconSize.Xs} name={iconName}/>
+      <Icon_1.Icon color={design_system_shared_1.IconColor.PrimaryInverse} {...iconProps} size={design_system_shared_1.IconSize.Xs} name={iconName}/>
     </react_native_1.View>);
 };
 exports.BadgeIcon = BadgeIcon;

package/dist/components/BadgeIcon/BadgeIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAoC;AAEpC,4CAAoD;AAI7C,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACO,EAAE,EAAE;IACnB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,kEAAkE,EAClE,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,cAAc,CAAC,CAChC,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAEnB;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,SAAS,aA6BpB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, IconSize, IconColor } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = ({\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          'h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        color={IconColor.PrimaryInverse}\n        {...iconProps}\n        size={IconSize.Xs}\n        name={iconName}\n      />\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeIcon.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAAqE;AACrE,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAoC;AAEpC,4CAA+B;AAIxB,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACO,EAAE,EAAE;IACnB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,kEAAkE,EAClE,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gCAAS,CAAC,cAAc,CAAC,CAChC,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAEnB;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,SAAS,aA6BpB","sourcesContent":["import { IconColor, IconSize } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = ({\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          'h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        color={IconColor.PrimaryInverse}\n        {...iconProps}\n        size={IconSize.Xs}\n        name={iconName}\n      />\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAuBhB,CAAC"}
+{"version":3,"file":"BadgeIcon.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAuBhB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAuBhB,CAAC"}
+{"version":3,"file":"BadgeIcon.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,0DAMnB,cAAc,sBAuBhB,CAAC"}

package/dist/components/BadgeIcon/BadgeIcon.mjs

@@ -4,11 +4,12 @@ function $importDefault(module) {
     }
     return module;
 }
+import { IconColor, IconSize } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
-import { Icon, IconSize, IconColor } from "../Icon/index.mjs";
+import { Icon } from "../Icon/index.mjs";
 export const BadgeIcon = ({ iconName, iconProps, twClassName, style, ...props }) => {
     const tw = useTailwind();
     return (<View accessibilityRole="image" {...props} style={[

package/dist/components/BadgeIcon/BadgeIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAIpD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACO,EAAE,EAAE;IACnB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,kEAAkE,EAClE,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAChC,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAEnB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, IconSize, IconColor } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = ({\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          'h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        color={IconColor.PrimaryInverse}\n        {...iconProps}\n        size={IconSize.Xs}\n        name={iconName}\n      />\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeIcon.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,uCAAuC;AACrE,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACO,EAAE,EAAE;IACnB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,kEAAkE,EAClE,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAChC,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAEnB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IconColor, IconSize } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = ({\n  iconName,\n  iconProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeIconProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      accessibilityRole=\"image\"\n      {...props}\n      style={[\n        tw.style(\n          'h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        color={IconColor.PrimaryInverse}\n        {...iconProps}\n        size={IconSize.Xs}\n        name={iconName}\n      />\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * BadgeIcon component props.\n */\nexport type BadgeIconProps = {\n  /**\n   * Required prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}
+{"version":3,"file":"BadgeIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeIconPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * BadgeIcon component props (React Native platform-specific)\n * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns\n */\nexport type BadgeIconProps = BadgeIconPropsShared & {\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

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

@@ -1,13 +1,11 @@
+import type { BadgeIconPropsShared } from "@metamask/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { IconName, IconProps } from "../Icon/index.cjs";
+import type { IconProps } from "../Icon/index.cjs";
 /**
- * BadgeIcon component props.
+ * BadgeIcon component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns
  */
-export type BadgeIconProps = {
-    /**
-     * Required prop to specify an icon to show
-     */
-    iconName: IconName;
+export type BadgeIconProps = BadgeIconPropsShared & {
     /**
      * Optional prop to pass additional properties to the icon
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"BadgeIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,uCAAuC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG;IAClD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,13 +1,11 @@
+import type { BadgeIconPropsShared } from "@metamask/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { IconName, IconProps } from "../Icon/index.mjs";
+import type { IconProps } from "../Icon/index.mjs";
 /**
- * BadgeIcon component props.
+ * BadgeIcon component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns
  */
-export type BadgeIconProps = {
-    /**
-     * Required prop to specify an icon to show
-     */
-    iconName: IconName;
+export type BadgeIconProps = BadgeIconPropsShared & {
     /**
      * Optional prop to pass additional properties to the icon
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"BadgeIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,uCAAuC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG;IAClD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * BadgeIcon component props.\n */\nexport type BadgeIconProps = {\n  /**\n   * Required prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}
+{"version":3,"file":"BadgeIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeIconPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * BadgeIcon component props (React Native platform-specific)\n * Extends shared props from @metamask/design-system-shared with React Native specific platform concerns\n */\nexport type BadgeIconProps = BadgeIconPropsShared & {\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

package/dist/components/BannerBase/BannerBase.cjs

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerBase = void 0;
 const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importDefault(require("react"));
-const types_1 = require("../../types/index.cjs");
 const Box_1 = require("../Box/index.cjs");
 const Button_1 = require("../Button/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
@@ -51,13 +50,13 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
             </Text_1.Text>) : (children))}
 
         {shouldShowActionButton && (<Box_1.Box twClassName="mt-4">
-            <Button_1.Button size={types_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
+            <Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
               {actionButtonLabel}
             </Button_1.Button>
           </Box_1.Box>)}
       </Box_1.Box>
 
-      {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={mergedCloseButtonTwClassName} iconName={types_1.IconName.Close} size={types_1.ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={handleClosePress} {...resolvedCloseButtonProps}/>)}
+      {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={mergedCloseButtonTwClassName} iconName={design_system_shared_1.IconName.Close} size={design_system_shared_1.ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={handleClosePress} {...resolvedCloseButtonProps}/>)}
     </Box_1.Box>);
 };
 exports.BannerBase = BannerBase;

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 {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  FontWeight,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\nimport { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize, ButtonSize, IconName } from '../../types';\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: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    onPress: closeButtonPropsOnPress,\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const handleClosePress =\n    onClose || closeButtonPropsOnPress\n      ? (event: GestureResponderEvent) => {\n          if (onClose) {\n            onClose();\n            return;\n          }\n          closeButtonPropsOnPress?.(event);\n        }\n      : undefined;\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"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 twClassName={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 twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={handleClosePress}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\nimport { GestureResponderEvent } from 'react-native';\n\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: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    onPress: closeButtonPropsOnPress,\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const handleClosePress =\n    onClose || closeButtonPropsOnPress\n      ? (event: GestureResponderEvent) => {\n          if (onClose) {\n            onClose();\n            return;\n          }\n          closeButtonPropsOnPress?.(event);\n        }\n      : undefined;\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"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 twClassName={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 twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={handleClosePress}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\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":"AAOA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmHhD,CAAC"}
+{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmHhD,CAAC"}