@metamask/design-system-react-native 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.12.0]
+
+### Added
+
+- Added `BannerAlert` component ([#966](https://github.com/MetaMask/metamask-design-system/pull/966))
+- Added `KeyValueRow` component ([#959](https://github.com/MetaMask/metamask-design-system/pull/959))
+
+### Changed
+
+- **BREAKING:** Simplified `TextButton` to a text-only control and removed `size`/`TextButtonSize`, inverse/disabled props, and icon/accessory props ([#1001](https://github.com/MetaMask/metamask-design-system/pull/1001))
+  - See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120)
+- **BREAKING:** Removed `TextFieldSize` and the `size` prop; `TextField` is now a single fixed-height (48px) row ([#1000](https://github.com/MetaMask/metamask-design-system/pull/1000))
+  - See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120)
+- Updated `Candlestick` icon asset with smaller size variant ([#998](https://github.com/MetaMask/metamask-design-system/pull/998))
+
+### Fixed
+
+- Improved `Input` single-line typography alignment (including iOS placeholder behavior) ([#1000](https://github.com/MetaMask/metamask-design-system/pull/1000))
+
 ## [0.11.0]
 
 ### Added
@@ -235,7 +254,8 @@ 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.11.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.12.0...HEAD
+[0.12.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.11.0...@metamask/design-system-react-native@0.12.0
 [0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.10.0...@metamask/design-system-react-native@0.11.0
 [0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.9.0...@metamask/design-system-react-native@0.10.0
 [0.9.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.8.0...@metamask/design-system-react-native@0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props.\n */\nexport type AvatarNetworkProps = {\n  /**\n   * Optional prop for the source of the image or SVG.\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for network name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}
+{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props (React Native platform-specific)\n * Extends shared props from @metamask/design-system-shared with React Native-specific platform concerns\n */\nexport type AvatarNetworkProps = AvatarNetworkPropsShared &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional prop for the source of the image or SVG.\n     */\n    src?: ImageOrSvgSrc;\n    /**\n     * Optional prop to pass to the underlying ImageOrSvg element.\n     * Useful for overriding the default alt text which is the network name.\n     */\n    imageOrSvgProps?: Partial<ImageOrSvgProps>;\n  };\n"]}

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

@@ -1,21 +1,19 @@
+import type { AvatarNetworkPropsShared } from "@metamask/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
 import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.cjs";
 /**
- * AvatarNetwork component props.
+ * AvatarNetwork component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native-specific platform concerns
  */
-export type AvatarNetworkProps = {
+export type AvatarNetworkProps = AvatarNetworkPropsShared & Omit<AvatarBaseProps, 'children'> & {
     /**
      * Optional prop for the source of the image or SVG.
      */
     src?: ImageOrSvgSrc;
     /**
-     * Optional props for network name, to be used to calculate the fallbackText.
-     */
-    name?: string;
-    /**
-     * Optional prop to pass to the underlying ImageOrSvg element
-     * Useful for overriding the default alt text which is the dapp name
+     * Optional prop to pass to the underlying ImageOrSvg element.
+     * Useful for overriding the default alt text which is the network name.
      */
     imageOrSvgProps?: Partial<ImageOrSvgProps>;
-} & Omit<AvatarBaseProps, 'children'>;
+};
 //# sourceMappingURL=AvatarNetwork.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAE/E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,CAAC"}

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

@@ -1,21 +1,19 @@
+import type { AvatarNetworkPropsShared } from "@metamask/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
 import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.mjs";
 /**
- * AvatarNetwork component props.
+ * AvatarNetwork component props (React Native platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React Native-specific platform concerns
  */
-export type AvatarNetworkProps = {
+export type AvatarNetworkProps = AvatarNetworkPropsShared & Omit<AvatarBaseProps, 'children'> & {
     /**
      * Optional prop for the source of the image or SVG.
      */
     src?: ImageOrSvgSrc;
     /**
-     * Optional props for network name, to be used to calculate the fallbackText.
-     */
-    name?: string;
-    /**
-     * Optional prop to pass to the underlying ImageOrSvg element
-     * Useful for overriding the default alt text which is the dapp name
+     * Optional prop to pass to the underlying ImageOrSvg element.
+     * Useful for overriding the default alt text which is the network name.
      */
     imageOrSvgProps?: Partial<ImageOrSvgProps>;
-} & Omit<AvatarBaseProps, 'children'>;
+};
 //# sourceMappingURL=AvatarNetwork.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAE/E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props.\n */\nexport type AvatarNetworkProps = {\n  /**\n   * Optional prop for the source of the image or SVG.\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for network name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}
+{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props (React Native platform-specific)\n * Extends shared props from @metamask/design-system-shared with React Native-specific platform concerns\n */\nexport type AvatarNetworkProps = AvatarNetworkPropsShared &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional prop for the source of the image or SVG.\n     */\n    src?: ImageOrSvgSrc;\n    /**\n     * Optional prop to pass to the underlying ImageOrSvg element.\n     * Useful for overriding the default alt text which is the network name.\n     */\n    imageOrSvgProps?: Partial<ImageOrSvgProps>;\n  };\n"]}

package/dist/components/BannerAlert/BannerAlert.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerAlert = 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 BannerBase_1 = require("../BannerBase/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const BannerAlert_constants_1 = require("./BannerAlert.constants.cjs");
+const BannerAlert = ({ severity = design_system_shared_1.BannerAlertSeverity.Info, iconProps, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    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];
+    return (<BannerBase_1.BannerBase startAccessory={<Icon_1.Icon name={iconName} color={iconColor} size={types_1.IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} paddingLeft={2} style={[tw.style(`border-l-4 ${borderColorClass}`), style]} {...props}/>);
+};
+exports.BannerAlert = 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,yEAAqE;AACrE,qFAAmE;AACnE,kDAA0B;AAE1B,iDAAuC;AACvC,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAKiC;AAG1B,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,8DAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,OAAO,CACL,CAAC,uBAAU,CACT,cAAc,CAAC,CACb,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,gBAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,WAAW,eA2BtB","sourcesContent":["import { BannerAlertSeverity } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconSize } from '../../types';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert: React.FC<BannerAlertProps> = ({\n  severity = BannerAlertSeverity.Info,\n  iconProps,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n  const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n  const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n  const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n  return (\n    <BannerBase\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      style={[tw.style(`border-l-4 ${borderColorClass}`), style]}\n      {...props}\n    />\n  );\n};\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/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,yEAAqE;AAErE,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/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/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,uCAAuC;AAErE,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/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,uCAAuC;AAErE,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/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AAErE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,IAAI,EAAE,QAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,QAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,QAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,QAAQ,CAAC,MAAM;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,IAAI,EAAE,SAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,SAAS,CAAC,cAAc;IACjC,OAAO,EAAE,SAAS,CAAC,cAAc;IACjC,MAAM,EAAE,SAAS,CAAC,YAAY;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,0CAA0C,GAGnD;IACF,IAAI,EAAE,kBAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,kBAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,kBAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,kBAAkB,CAAC,UAAU;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,sCAAsC,GAG/C;IACF,IAAI,EAAE,cAAc,CAAC,cAAc;IACnC,OAAO,EAAE,cAAc,CAAC,cAAc;IACtC,OAAO,EAAE,cAAc,CAAC,cAAc;IACtC,MAAM,EAAE,cAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask/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.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BannerAlertProps } from "./BannerAlert.types.cjs";
+export declare const BannerAlert: React.FC<BannerAlertProps>;
+//# sourceMappingURL=BannerAlert.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC"}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BannerAlertProps } from "./BannerAlert.types.mjs";
+export declare const BannerAlert: React.FC<BannerAlertProps>;
+//# sourceMappingURL=BannerAlert.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC"}

package/dist/components/BannerAlert/BannerAlert.mjs

@@ -0,0 +1,23 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { BannerAlertSeverity } from "@metamask/design-system-shared";
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { IconSize } from "../../types/index.mjs";
+import { BannerBase } from "../BannerBase/index.mjs";
+import { Icon } from "../Icon/index.mjs";
+import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME, MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR } from "./BannerAlert.constants.mjs";
+export const BannerAlert = ({ severity = BannerAlertSeverity.Info, iconProps, style, ...props }) => {
+    const tw = useTailwind();
+    const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
+    const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
+    const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
+    const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];
+    return (<BannerBase startAccessory={<Icon name={iconName} color={iconColor} size={IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} paddingLeft={2} style={[tw.style(`border-l-4 ${borderColorClass}`), style]} {...props}/>);
+};
+//# sourceMappingURL=BannerAlert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,0CAA0C,EAC1C,oCAAoC,EACpC,mCAAmC,EACnC,sCAAsC,EACvC,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,OAAO,CACL,CAAC,UAAU,CACT,cAAc,CAAC,CACb,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconSize } from '../../types';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n  MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n  MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n  MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert: React.FC<BannerAlertProps> = ({\n  severity = BannerAlertSeverity.Info,\n  iconProps,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n  const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n  const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n  const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n  return (\n    <BannerBase\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      style={[tw.style(`border-l-4 ${borderColorClass}`), style]}\n      {...props}\n    />\n  );\n};\n"]}

package/dist/components/BannerAlert/BannerAlert.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=BannerAlert.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerAlertPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\n/**\n * BannerAlert component props (React Native platform-specific).\n */\nexport type BannerAlertProps = BannerAlertPropsShared &\n  BannerBaseProps & {\n    iconProps?: Omit<IconProps, 'name' | 'size' | 'color'>;\n  };\n"]}

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

@@ -0,0 +1,10 @@
+import type { BannerAlertPropsShared } from "@metamask/design-system-shared";
+import type { BannerBaseProps } from "../BannerBase/index.cjs";
+import type { IconProps } from "../Icon/Icon.types.cjs";
+/**
+ * BannerAlert component props (React Native platform-specific).
+ */
+export type BannerAlertProps = BannerAlertPropsShared & BannerBaseProps & {
+    iconProps?: Omit<IconProps, 'name' | 'size' | 'color'>;
+};
+//# sourceMappingURL=BannerAlert.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.types.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAE7E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,eAAe,GAAG;IAChB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACxD,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { BannerAlertPropsShared } from "@metamask/design-system-shared";
+import type { BannerBaseProps } from "../BannerBase/index.mjs";
+import type { IconProps } from "../Icon/Icon.types.mjs";
+/**
+ * BannerAlert component props (React Native platform-specific).
+ */
+export type BannerAlertProps = BannerAlertPropsShared & BannerBaseProps & {
+    iconProps?: Omit<IconProps, 'name' | 'size' | 'color'>;
+};
+//# sourceMappingURL=BannerAlert.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.types.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAE7E,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,eAAe,GAAG;IAChB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CACxD,CAAC"}

package/dist/components/BannerAlert/BannerAlert.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BannerAlert.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.types.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerAlertPropsShared } from '@metamask/design-system-shared';\n\nimport type { BannerBaseProps } from '../BannerBase';\nimport type { IconProps } from '../Icon/Icon.types';\n\n/**\n * BannerAlert component props (React Native platform-specific).\n */\nexport type BannerAlertProps = BannerAlertPropsShared &\n  BannerBaseProps & {\n    iconProps?: Omit<IconProps, 'name' | 'size' | 'color'>;\n  };\n"]}

package/dist/components/BannerAlert/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/index.ts"],"names":[],"mappings":";;;AAAA,uEAAqE;AAA5D,2HAAA,mBAAmB,OAAA;AAC5B,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { BannerAlertSeverity } from '@metamask/design-system-shared';\nexport { BannerAlert } from './BannerAlert';\nexport type { BannerAlertProps } from './BannerAlert.types';\n"]}

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

@@ -0,0 +1,4 @@
+export { BannerAlertSeverity } from "@metamask/design-system-shared";
+export { BannerAlert } from "./BannerAlert.cjs";
+export type { BannerAlertProps } from "./BannerAlert.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

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

@@ -0,0 +1,4 @@
+export { BannerAlertSeverity } from "@metamask/design-system-shared";
+export { BannerAlert } from "./BannerAlert.mjs";
+export type { BannerAlertProps } from "./BannerAlert.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BannerAlert/index.mjs

@@ -0,0 +1,3 @@
+export { BannerAlertSeverity } from "@metamask/design-system-shared";
+export { BannerAlert } from "./BannerAlert.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uCAAuC;AACrE,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { BannerAlertSeverity } from '@metamask/design-system-shared';\nexport { BannerAlert } from './BannerAlert';\nexport type { BannerAlertProps } from './BannerAlert.types';\n"]}

package/dist/components/Icon/assets/candlestick.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 4h-2v2h-2v12h2v2h2v-2h2v-12h-2zm0 12h-2v-8h2z"/><path d="m19 8h-2v-4h-2v4h-2v7h2v5h2v-5h2zm-2 5h-2v-3h2z"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="m9.49932 5.33142h-1.66714v1.66714h-1.66714v10.00284h1.66714v1.6672h1.66714v-1.6672h1.66718v-10.00284h-1.66718zm0 10.00288h-1.66714v-6.66859h1.66714z"/><path d="m17.835 8.66571h-1.6671v-3.33429h-1.6671v3.33429h-1.6672v5.83499h1.6672v4.1679h1.6671v-4.1679h1.6671zm-1.6671 4.16789h-1.6671v-2.5008h1.6671z"/></g></svg>

package/dist/components/Input/Input.cjs

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const react_native_1 = require("react-native/index.js");
 const types_1 = require("../../types/index.cjs");
 const Text_constants_1 = require("../Text/Text.constants.cjs");
+const Input_constants_1 = require("./Input.constants.cjs");
 exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(autoFocus);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
@@ -22,11 +23,10 @@ exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVari
     // the controlled value is empty. This keeps the iOS lineHeight workaround
     // scoped to the placeholder-visible state without affecting typed text.
     const isPlaceholderVisible = hasPlaceholder && value === '';
-    const inputStyle = (0, react_1.useMemo)(() => tw.style(`text-${textVariant}`, fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+    const inputStyle = (0, react_1.useMemo)(() => tw.style(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
         !isDisabled &&
         isFocused &&
         'border-primary-default', twClassName), [
-        textVariant,
         fontClass,
         isStateStylesDisabled,
         isDisabled,
@@ -34,6 +34,7 @@ exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVari
         twClassName,
         tw,
     ]);
+    const variantTextStyle = (0, react_1.useMemo)(() => Input_constants_1.MAP_TEXT_VARIANT_INPUT_METRICS[textVariant], [textVariant]);
     /* istanbul ignore next: handler body covered by focus/blur tests */
     const onBlurHandler = (0, react_1.useCallback)((e) => {
         if (!isDisabled) {
@@ -50,12 +51,12 @@ exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVari
     }, [isDisabled, onFocus]);
     const resolvedStyle = [
         inputStyle,
+        variantTextStyle,
         // iOS-only workaround: when a placeholder is visible, native iOS
         // TextInput can render placeholder text vertically offset.
         // Keep this iOS-only because lineHeight: 0 can collapse text on Android.
         react_native_1.Platform.OS === 'ios' &&
             isPlaceholderVisible && { lineHeight: 0 },
-        react_native_1.Platform.OS === 'ios' && { textAlignVertical: 'center' },
         style,
     ].filter(Boolean);
     return (<react_native_1.TextInput ref={ref} placeholderTextColor={placeholderTextColor} {...props} placeholder={placeholder} value={value} style={resolvedStyle} editable={!isDisabled && !isReadonly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          `text-${textVariant}`,\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        textVariant,\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const resolvedStyle = [\n      inputStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      Platform.OS === 'ios' && { textAlignVertical: 'center' as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}
+{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;AAAA,qFAI8C;AAC9C,2DAAgE;AAChE,iCAAmE;AACnE,wDAAmD;AAEnD,iDAAsD;AACtD,+DAGgC;AAEhC,2DAAmE;AAGtD,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,KAAK,EACL,WAAW,GAAG,mBAAW,CAAC,MAAM,EAChC,qBAAqB,EACrB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,EACX,WAAW,EACX,MAAM,EACN,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,SAAS,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,KAAK,GAAG,IAAA,qCAAQ,GAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,IAAA,eAAO,EAClC,GAAG,EAAE,CACH,KAAK,KAAK,kCAAK,CAAC,KAAK;QACnB,CAAC,CAAC,0BAAU,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,yBAAS,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EACvC,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,eAAe,GAAG,4CAA2B,CAAC,WAAW,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,2CAA0B,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,QAAQ,kBAAU,CAAC,OAAO,GAAG,UAAU,EAAE,CAAC;IAC5D,MAAM,cAAc,GAClB,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,CAAC;IAC1E,wEAAwE;IACxE,0EAA0E;IAC1E,wEAAwE;IACxE,MAAM,oBAAoB,GAAG,cAAc,IAAI,KAAK,KAAK,EAAE,CAAC;IAE5D,MAAM,UAAU,GAAG,IAAA,eAAO,EACxB,GAAG,EAAE,CACH,EAAE,CAAC,KAAK,CACN,SAAS,EACT,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,oBAAoB,EACpB,CAAC,qBAAqB,IAAI,UAAU,IAAI,YAAY,EACpD,CAAC,qBAAqB;QACpB,CAAC,UAAU;QACX,SAAS;QACT,wBAAwB,EAC1B,WAAW,CACZ,EACH;QACE,SAAS;QACT,qBAAqB;QACrB,UAAU;QACV,SAAS;QACT,WAAW;QACX,EAAE;KACH,CACF,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAC9B,GAAG,EAAE,CAAC,gDAA8B,CAAC,WAAW,CAAC,EACjD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,oEAAoE;IACpE,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,CAAmD,EAAE,EAAE;QACtD,IAAI,CAAC,UAAU,EAAE;YACf,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,CAAC,CACrB,CAAC;IAEF,oEAAoE;IACpE,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,CAAoD,EAAE,EAAE;QACvD,IAAI,CAAC,UAAU,EAAE;YACf,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;SACd;IACH,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACtB,CAAC;IACF,MAAM,aAAa,GAAG;QACpB,UAAU;QACV,gBAAgB;QAChB,iEAAiE;QACjE,2DAA2D;QAC3D,yEAAyE;QACzE,uBAAQ,CAAC,EAAE,KAAK,KAAK;YACnB,oBAAoB,IAAI,EAAE,UAAU,EAAE,CAAU,EAAE;QACpD,KAAK;KACN,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,OAAO,CACL,CAAC,wBAAS,CACR,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,IAAI,KAAK,CAAC,CACV,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,aAAa,CAAC,CACrB,QAAQ,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,CACrC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,aAAa,CAAC,CACtB,OAAO,CAAC,CAAC,cAAc,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport { MAP_TEXT_VARIANT_INPUT_METRICS } from './Input.constants';\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    const variantTextStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n    const resolvedStyle = [\n      inputStyle,\n      variantTextStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}

package/dist/components/Input/Input.constants.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_TEXT_VARIANT_INPUT_METRICS = void 0;
+const design_tokens_1 = require("@metamask/design-tokens");
+const types_1 = require("../../types/index.cjs");
+/**
+ * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
+ * React Native `TextInput` aligns single-line text more predictably when line height is not set
+ * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).
+ */
+exports.MAP_TEXT_VARIANT_INPUT_METRICS = {
+    [types_1.TextVariant.DisplayLg]: {
+        fontSize: design_tokens_1.typography.sDisplayLG.fontSize,
+        letterSpacing: design_tokens_1.typography.sDisplayLG.letterSpacing,
+    },
+    [types_1.TextVariant.DisplayMd]: {
+        fontSize: design_tokens_1.typography.sDisplayMD.fontSize,
+        letterSpacing: design_tokens_1.typography.sDisplayMD.letterSpacing,
+    },
+    [types_1.TextVariant.HeadingLg]: {
+        fontSize: design_tokens_1.typography.sHeadingLG.fontSize,
+        letterSpacing: design_tokens_1.typography.sHeadingLG.letterSpacing,
+    },
+    [types_1.TextVariant.HeadingMd]: {
+        fontSize: design_tokens_1.typography.sHeadingMD.fontSize,
+        letterSpacing: design_tokens_1.typography.sHeadingMD.letterSpacing,
+    },
+    [types_1.TextVariant.HeadingSm]: {
+        fontSize: design_tokens_1.typography.sHeadingSM.fontSize,
+        letterSpacing: design_tokens_1.typography.sHeadingSM.letterSpacing,
+    },
+    [types_1.TextVariant.BodyLg]: {
+        fontSize: design_tokens_1.typography.sBodyLGMedium.fontSize,
+        letterSpacing: design_tokens_1.typography.sBodyLGMedium.letterSpacing,
+    },
+    [types_1.TextVariant.BodyMd]: {
+        fontSize: design_tokens_1.typography.sBodyMD.fontSize,
+        letterSpacing: design_tokens_1.typography.sBodyMD.letterSpacing,
+    },
+    [types_1.TextVariant.BodySm]: {
+        fontSize: design_tokens_1.typography.sBodySM.fontSize,
+        letterSpacing: design_tokens_1.typography.sBodySM.letterSpacing,
+    },
+    [types_1.TextVariant.BodyXs]: {
+        fontSize: design_tokens_1.typography.sBodyXS.fontSize,
+        letterSpacing: design_tokens_1.typography.sBodyXS.letterSpacing,
+    },
+    [types_1.TextVariant.PageHeading]: {
+        fontSize: design_tokens_1.typography.sPageHeading.fontSize,
+        letterSpacing: design_tokens_1.typography.sPageHeading.letterSpacing,
+    },
+    [types_1.TextVariant.SectionHeading]: {
+        fontSize: design_tokens_1.typography.sSectionHeading.fontSize,
+        letterSpacing: design_tokens_1.typography.sSectionHeading.letterSpacing,
+    },
+    [types_1.TextVariant.ButtonLabelMd]: {
+        fontSize: design_tokens_1.typography.sButtonLabelMd.fontSize,
+        letterSpacing: design_tokens_1.typography.sButtonLabelMd.letterSpacing,
+    },
+    [types_1.TextVariant.ButtonLabelLg]: {
+        fontSize: design_tokens_1.typography.sButtonLabelLg.fontSize,
+        letterSpacing: design_tokens_1.typography.sButtonLabelLg.letterSpacing,
+    },
+    [types_1.TextVariant.AmountDisplayLg]: {
+        fontSize: design_tokens_1.typography.sAmountDisplayLg.fontSize,
+        letterSpacing: design_tokens_1.typography.sAmountDisplayLg.letterSpacing,
+    },
+};
+//# sourceMappingURL=Input.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.constants.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.constants.ts"],"names":[],"mappings":";;;AAAA,2DAAqD;AAErD,iDAA0C;AAE1C;;;;GAIG;AACU,QAAA,8BAA8B,GAGvC;IACF,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,0BAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,0BAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,0BAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,0BAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,0BAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,0BAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,0BAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,0BAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,mBAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,0BAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,0BAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,mBAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,0BAAU,CAAC,aAAa,CAAC,QAAQ;QAC3C,aAAa,EAAE,0BAAU,CAAC,aAAa,CAAC,aAAa;KACtD;IACD,CAAC,mBAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,0BAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,0BAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,mBAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,0BAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,0BAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,mBAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,0BAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,0BAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,mBAAW,CAAC,WAAW,CAAC,EAAE;QACzB,QAAQ,EAAE,0BAAU,CAAC,YAAY,CAAC,QAAQ;QAC1C,aAAa,EAAE,0BAAU,CAAC,YAAY,CAAC,aAAa;KACrD;IACD,CAAC,mBAAW,CAAC,cAAc,CAAC,EAAE;QAC5B,QAAQ,EAAE,0BAAU,CAAC,eAAe,CAAC,QAAQ;QAC7C,aAAa,EAAE,0BAAU,CAAC,eAAe,CAAC,aAAa;KACxD;IACD,CAAC,mBAAW,CAAC,aAAa,CAAC,EAAE;QAC3B,QAAQ,EAAE,0BAAU,CAAC,cAAc,CAAC,QAAQ;QAC5C,aAAa,EAAE,0BAAU,CAAC,cAAc,CAAC,aAAa;KACvD;IACD,CAAC,mBAAW,CAAC,aAAa,CAAC,EAAE;QAC3B,QAAQ,EAAE,0BAAU,CAAC,cAAc,CAAC,QAAQ;QAC5C,aAAa,EAAE,0BAAU,CAAC,cAAc,CAAC,aAAa;KACvD;IACD,CAAC,mBAAW,CAAC,eAAe,CAAC,EAAE;QAC7B,QAAQ,EAAE,0BAAU,CAAC,gBAAgB,CAAC,QAAQ;QAC9C,aAAa,EAAE,0BAAU,CAAC,gBAAgB,CAAC,aAAa;KACzD;CACF,CAAC","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport { TextVariant } from '../../types';\n\n/**\n * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.\n * React Native `TextInput` aligns single-line text more predictably when line height is not set\n * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).\n */\nexport const MAP_TEXT_VARIANT_INPUT_METRICS: Record<\n  TextVariant,\n  { fontSize: number; letterSpacing: number }\n> = {\n  [TextVariant.DisplayLg]: {\n    fontSize: typography.sDisplayLG.fontSize,\n    letterSpacing: typography.sDisplayLG.letterSpacing,\n  },\n  [TextVariant.DisplayMd]: {\n    fontSize: typography.sDisplayMD.fontSize,\n    letterSpacing: typography.sDisplayMD.letterSpacing,\n  },\n  [TextVariant.HeadingLg]: {\n    fontSize: typography.sHeadingLG.fontSize,\n    letterSpacing: typography.sHeadingLG.letterSpacing,\n  },\n  [TextVariant.HeadingMd]: {\n    fontSize: typography.sHeadingMD.fontSize,\n    letterSpacing: typography.sHeadingMD.letterSpacing,\n  },\n  [TextVariant.HeadingSm]: {\n    fontSize: typography.sHeadingSM.fontSize,\n    letterSpacing: typography.sHeadingSM.letterSpacing,\n  },\n  [TextVariant.BodyLg]: {\n    fontSize: typography.sBodyLGMedium.fontSize,\n    letterSpacing: typography.sBodyLGMedium.letterSpacing,\n  },\n  [TextVariant.BodyMd]: {\n    fontSize: typography.sBodyMD.fontSize,\n    letterSpacing: typography.sBodyMD.letterSpacing,\n  },\n  [TextVariant.BodySm]: {\n    fontSize: typography.sBodySM.fontSize,\n    letterSpacing: typography.sBodySM.letterSpacing,\n  },\n  [TextVariant.BodyXs]: {\n    fontSize: typography.sBodyXS.fontSize,\n    letterSpacing: typography.sBodyXS.letterSpacing,\n  },\n  [TextVariant.PageHeading]: {\n    fontSize: typography.sPageHeading.fontSize,\n    letterSpacing: typography.sPageHeading.letterSpacing,\n  },\n  [TextVariant.SectionHeading]: {\n    fontSize: typography.sSectionHeading.fontSize,\n    letterSpacing: typography.sSectionHeading.letterSpacing,\n  },\n  [TextVariant.ButtonLabelMd]: {\n    fontSize: typography.sButtonLabelMd.fontSize,\n    letterSpacing: typography.sButtonLabelMd.letterSpacing,\n  },\n  [TextVariant.ButtonLabelLg]: {\n    fontSize: typography.sButtonLabelLg.fontSize,\n    letterSpacing: typography.sButtonLabelLg.letterSpacing,\n  },\n  [TextVariant.AmountDisplayLg]: {\n    fontSize: typography.sAmountDisplayLg.fontSize,\n    letterSpacing: typography.sAmountDisplayLg.letterSpacing,\n  },\n};\n"]}

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

@@ -0,0 +1,11 @@
+import { TextVariant } from "../../types/index.cjs";
+/**
+ * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
+ * React Native `TextInput` aligns single-line text more predictably when line height is not set
+ * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).
+ */
+export declare const MAP_TEXT_VARIANT_INPUT_METRICS: Record<TextVariant, {
+    fontSize: number;
+    letterSpacing: number;
+}>;
+//# sourceMappingURL=Input.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAE1C;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,WAAW,EACX;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CA0D5C,CAAC"}