@metamask-previews/design-system-react-native 0.6.0-preview.3dc70e1 → 0.9.0-preview.694a8ed

package/CHANGELOG.md

@@ -7,6 +7,71 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.0]
+
+### Added
+
+- Added `TextField` component for text input fields ([#910](https://github.com/MetaMask/metamask-design-system/pull/910))
+  - Boxed, press-to-focus wrapper around `Input` component
+  - Supports configurable sizes, optional start/end accessories
+  - Includes error and disabled states with custom styling
+  - Full accessibility support and comprehensive test coverage
+
+## [0.8.0]
+
+### Added
+
+- Added `RadioButton` component for radio button form controls ([#926](https://github.com/MetaMask/metamask-design-system/pull/926))
+  - Supports checked, disabled, read-only, and danger states
+  - Full accessibility support with `role="radio"` and `accessibilityState`
+  - Optional label rendering for improved usability
+
+### Changed
+
+- **BREAKING:** Migrated `BadgeStatus` component from TypeScript enums to string union types with const objects ([#912](https://github.com/MetaMask/metamask-design-system/pull/912))
+  - `BadgeStatusStatus` and `BadgeStatusSize` enums replaced with const objects and derived string union types
+  - **No migration required** - continue importing from `@metamask/design-system-react-native` as usual
+  - Const object values remain the same (e.g., `BadgeStatusStatus.Active` still works)
+  - String literals now also accepted thanks to structural typing (e.g., `'active'` works where `BadgeStatusStatus.Active` is expected)
+  - We are still evaluating best practices for const objects vs string literals - use whichever approach works best for your codebase
+  - This change implements [ADR-0003](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md) and [ADR-0004](https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md)
+- Refactored `BottomSheetFooter` component location for better organization ([#933](https://github.com/MetaMask/metamask-design-system/pull/933))
+  - Moved from `BottomSheets/BottomSheetFooter/` to `BottomSheetFooter/`
+  - Updated import paths and Storybook title
+  - No breaking changes - all imports from package entry point continue to work
+
+## [0.7.0]
+
+### Added
+
+- Added `Label` component for form labels and descriptive text ([#907](https://github.com/MetaMask/metamask-design-system/pull/907))
+- Added `HeaderBase` component for consistent header layouts ([#902](https://github.com/MetaMask/metamask-design-system/pull/902))
+- Added `Skeleton` component for loading states ([#891](https://github.com/MetaMask/metamask-design-system/pull/891))
+- Added `Card` component for grouped content sections ([#923](https://github.com/MetaMask/metamask-design-system/pull/923))
+- Added `BottomSheetFooter` component for bottom sheet actions ([#899](https://github.com/MetaMask/metamask-design-system/pull/899))
+- Added `Toast` component for temporary notification messages ([#892](https://github.com/MetaMask/metamask-design-system/pull/892))
+- Added `Input` component for text input fields ([#909](https://github.com/MetaMask/metamask-design-system/pull/909))
+- Added `CorporateFare` icon to represent stocks ([#920](https://github.com/MetaMask/metamask-design-system/pull/920))
+- Added `BottomSheetOverlay` component for modal bottom sheet interactions ([#897](https://github.com/MetaMask/metamask-design-system/pull/897))
+  - Provides consistent overlay pattern for bottom sheet components
+  - Includes press-to-dismiss functionality and accessibility features
+
+### Changed
+
+- **BREAKING:** Standardized non-icon enum runtime values to use kebab-case format ([#894](https://github.com/MetaMask/metamask-design-system/pull/894))
+  - Enum values now use lowercase/kebab-case (e.g., `'primary'` instead of `'Primary'`, `'top-right'` instead of `'TopRight'`)
+  - **Migration likely not needed** - continue using enum constants (e.g., `ButtonVariant.Primary`)
+  - **Migration needed** only if your app persists or transmits these enum values (localStorage, databases, APIs)
+  - This prepares for migration from enums to string union types per ADR #127
+- Updated component styling to use `tw.style()` instead of string-based `twClassName` for better type safety and conditional styling ([#889](https://github.com/MetaMask/metamask-design-system/pull/889))
+- Updated `@metamask/design-tokens` peer dependency from ^8.1.0 to ^8.2.0 to support `AnimationDuration` enum used by `BottomSheetOverlay`
+- Updated `@metamask/utils` peer dependency from 11.9.0 to 11.10.0 ([#903](https://github.com/MetaMask/metamask-design-system/pull/903))
+- Reorganized peer dependencies for better dependency management ([#901](https://github.com/MetaMask/metamask-design-system/pull/901))
+
+### Fixed
+
+- Fixed `ButtonBase` component sizing issues in flex layouts to prevent unexpected shrinking ([#870](https://github.com/MetaMask/metamask-design-system/pull/870))
+
 ## [0.6.0]
 
 ### Added
@@ -122,7 +187,10 @@ 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.6.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.9.0...HEAD
+[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
+[0.8.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.7.0...@metamask/design-system-react-native@0.8.0
+[0.7.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.6.0...@metamask/design-system-react-native@0.7.0
 [0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.1...@metamask/design-system-react-native@0.6.0
 [0.5.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.0...@metamask/design-system-react-native@0.5.1
 [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.1...@metamask/design-system-react-native@0.5.0

package/dist/components/ActionListItem/ActionListItem.cjs

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionListItem = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native/index.js");
+const Box_1 = require("../Box/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const ActionListItem = ({ label, description, startAccessory, endAccessory, iconName, labelTextProps, descriptionTextProps, iconProps, isDisabled = false, onPress, pressableProps, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const renderLabel = () => {
+        if (typeof label === 'string') {
+            return (<Text_1.Text variant={Text_1.TextVariant.BodyMd} {...labelTextProps}>
+          {label}
+        </Text_1.Text>);
+        }
+        return label;
+    };
+    const renderDescription = () => {
+        if (!description) {
+            return null;
+        }
+        if (typeof description === 'string') {
+            return (<Text_1.Text variant={Text_1.TextVariant.BodySm} color={Text_1.TextColor.TextAlternative} {...descriptionTextProps}>
+          {description}
+        </Text_1.Text>);
+        }
+        return description;
+    };
+    const renderStartContent = () => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (iconName) {
+            return (<Box_1.Box alignItems={Box_1.BoxAlignItems.Center} justifyContent={Box_1.BoxJustifyContent.Center} twClassName="h-6">
+          <Icon_1.Icon name={iconName} size={Icon_1.IconSize.Md} {...iconProps}/>
+        </Box_1.Box>);
+        }
+        return null;
+    };
+    const getPressableStyle = (0, react_1.useCallback)(({ pressed }) => {
+        const baseStyle = tw.style('bg-default px-4 py-3', pressed && !isDisabled && 'bg-default-pressed', isDisabled && 'opacity-50', twClassName);
+        return style ? [baseStyle, style] : baseStyle;
+    }, [tw, isDisabled, twClassName, style]);
+    return (<react_native_1.Pressable onPress={onPress} disabled={isDisabled} style={getPressableStyle} {...pressableProps} {...props}>
+      <Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} justifyContent={Box_1.BoxJustifyContent.Between} gap={4}>
+        {/* Left side content (start accessory/icon + label/description) */}
+        <Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Start} twClassName="flex-1" gap={4}>
+          {renderStartContent()}
+          <Box_1.Box twClassName="flex-1">
+            {renderLabel()}
+            {renderDescription()}
+          </Box_1.Box>
+        </Box_1.Box>
+
+        {/* End accessory */}
+        {endAccessory && <Box_1.Box>{endAccessory}</Box_1.Box>}
+      </Box_1.Box>
+    </react_native_1.Pressable>);
+};
+exports.ActionListItem = ActionListItem;
+//# sourceMappingURL=ActionListItem.cjs.map

package/dist/components/ActionListItem/ActionListItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.cjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'bg-default px-4 py-3',\n        pressed && !isDisabled && 'bg-default-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}

package/dist/components/ActionListItem/ActionListItem.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.d.cts","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAY3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmHxD,CAAC"}

package/dist/components/ActionListItem/ActionListItem.d.mts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.d.mts","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAY3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmHxD,CAAC"}

package/dist/components/ActionListItem/ActionListItem.mjs

@@ -0,0 +1,66 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { useCallback } from "react";
+const React = $importDefault($React);
+import { Pressable } from "react-native/index.js";
+import { Box, BoxAlignItems, BoxFlexDirection, BoxJustifyContent } from "../Box/index.mjs";
+import { Icon, IconSize } from "../Icon/index.mjs";
+import { Text, TextColor, TextVariant } from "../Text/index.mjs";
+export const ActionListItem = ({ label, description, startAccessory, endAccessory, iconName, labelTextProps, descriptionTextProps, iconProps, isDisabled = false, onPress, pressableProps, twClassName, style, ...props }) => {
+    const tw = useTailwind();
+    const renderLabel = () => {
+        if (typeof label === 'string') {
+            return (<Text variant={TextVariant.BodyMd} {...labelTextProps}>
+          {label}
+        </Text>);
+        }
+        return label;
+    };
+    const renderDescription = () => {
+        if (!description) {
+            return null;
+        }
+        if (typeof description === 'string') {
+            return (<Text variant={TextVariant.BodySm} color={TextColor.TextAlternative} {...descriptionTextProps}>
+          {description}
+        </Text>);
+        }
+        return description;
+    };
+    const renderStartContent = () => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (iconName) {
+            return (<Box alignItems={BoxAlignItems.Center} justifyContent={BoxJustifyContent.Center} twClassName="h-6">
+          <Icon name={iconName} size={IconSize.Md} {...iconProps}/>
+        </Box>);
+        }
+        return null;
+    };
+    const getPressableStyle = useCallback(({ pressed }) => {
+        const baseStyle = tw.style('bg-default px-4 py-3', pressed && !isDisabled && 'bg-default-pressed', isDisabled && 'opacity-50', twClassName);
+        return style ? [baseStyle, style] : baseStyle;
+    }, [tw, isDisabled, twClassName, style]);
+    return (<Pressable onPress={onPress} disabled={isDisabled} style={getPressableStyle} {...pressableProps} {...props}>
+      <Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} justifyContent={BoxJustifyContent.Between} gap={4}>
+        {/* Left side content (start accessory/icon + label/description) */}
+        <Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} twClassName="flex-1" gap={4}>
+          {renderStartContent()}
+          <Box twClassName="flex-1">
+            {renderLabel()}
+            {renderDescription()}
+          </Box>
+        </Box>
+
+        {/* End accessory */}
+        {endAccessory && <Box>{endAccessory}</Box>}
+      </Box>
+    </Pressable>);
+};
+//# sourceMappingURL=ActionListItem.mjs.map

package/dist/components/ActionListItem/ActionListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.mjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'bg-default px-4 py-3',\n        pressed && !isDisabled && 'bg-default-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}

package/dist/components/ActionListItem/ActionListItem.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.types.cjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { PressableProps, ViewProps } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * ActionListItem component props.\n *\n * Extends `ViewProps` so the root Pressable inherits standard React Native\n * props such as `testID` and `accessibilityLabel`. The `onPress` callback\n * is a top-level prop, while `pressableProps` provides additional\n * Pressable-specific overrides.\n */\nexport type ActionListItemProps = {\n  /**\n   * Label for the list item — can be a string or React node.\n   * When a string, it is wrapped in a Text component with default styling.\n   * When a ReactNode, it is rendered as-is and `labelTextProps` is ignored.\n   */\n  label: string | ReactNode;\n  /**\n   * Optional description for the list item — can be a string or React node.\n   * When a string, it is wrapped in a Text component with default styling.\n   * When a ReactNode, it is rendered as-is and `descriptionTextProps` is ignored.\n   */\n  description?: string | ReactNode;\n  /**\n   * Optional start accessory (left side) — React node.\n   * Takes priority over `iconName` when both are provided.\n   */\n  startAccessory?: ReactNode;\n  /**\n   * Optional end accessory (right side) — React node.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * Optional icon name from the design system icon library.\n   * Renders an icon with `IconSize.Md`. Ignored when `startAccessory` is provided.\n   */\n  iconName?: IconName;\n  /**\n   * Optional props spread to the label Text component (only when label is a string).\n   */\n  labelTextProps?: Partial<TextProps>;\n  /**\n   * Optional props spread to the description Text component (only when description is a string).\n   */\n  descriptionTextProps?: Partial<TextProps>;\n  /**\n   * Optional props spread to the Icon component (only when iconName is provided).\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Whether the list item is disabled.\n   * When true, applies 50% opacity and disables interactions.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional callback when the list item is pressed.\n   */\n  onPress?: PressableProps['onPress'];\n  /**\n   * Optional props to pass to the underlying Pressable.\n   * Use this for Pressable-specific props such as testID for the interactive element.\n   */\n  pressableProps?: Omit<PressableProps, 'onPress' | 'disabled' | 'style'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

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

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { PressableProps, ViewProps } from "react-native/index.js";
+import type { IconName, IconProps } from "../Icon/index.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * ActionListItem component props.
+ *
+ * Extends `ViewProps` so the root Pressable inherits standard React Native
+ * props such as `testID` and `accessibilityLabel`. The `onPress` callback
+ * is a top-level prop, while `pressableProps` provides additional
+ * Pressable-specific overrides.
+ */
+export type ActionListItemProps = {
+    /**
+     * Label for the list item — can be a string or React node.
+     * When a string, it is wrapped in a Text component with default styling.
+     * When a ReactNode, it is rendered as-is and `labelTextProps` is ignored.
+     */
+    label: string | ReactNode;
+    /**
+     * Optional description for the list item — can be a string or React node.
+     * When a string, it is wrapped in a Text component with default styling.
+     * When a ReactNode, it is rendered as-is and `descriptionTextProps` is ignored.
+     */
+    description?: string | ReactNode;
+    /**
+     * Optional start accessory (left side) — React node.
+     * Takes priority over `iconName` when both are provided.
+     */
+    startAccessory?: ReactNode;
+    /**
+     * Optional end accessory (right side) — React node.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * Optional icon name from the design system icon library.
+     * Renders an icon with `IconSize.Md`. Ignored when `startAccessory` is provided.
+     */
+    iconName?: IconName;
+    /**
+     * Optional props spread to the label Text component (only when label is a string).
+     */
+    labelTextProps?: Partial<TextProps>;
+    /**
+     * Optional props spread to the description Text component (only when description is a string).
+     */
+    descriptionTextProps?: Partial<TextProps>;
+    /**
+     * Optional props spread to the Icon component (only when iconName is provided).
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Whether the list item is disabled.
+     * When true, applies 50% opacity and disables interactions.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional callback when the list item is pressed.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * Optional props to pass to the underlying Pressable.
+     * Use this for Pressable-specific props such as testID for the interactive element.
+     */
+    pressableProps?: Omit<PressableProps, 'onPress' | 'disabled' | 'style'>;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & Omit<ViewProps, 'children'>;
+//# sourceMappingURL=ActionListItem.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.types.d.cts","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAqB;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC;IACxE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { PressableProps, ViewProps } from "react-native/index.js";
+import type { IconName, IconProps } from "../Icon/index.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * ActionListItem component props.
+ *
+ * Extends `ViewProps` so the root Pressable inherits standard React Native
+ * props such as `testID` and `accessibilityLabel`. The `onPress` callback
+ * is a top-level prop, while `pressableProps` provides additional
+ * Pressable-specific overrides.
+ */
+export type ActionListItemProps = {
+    /**
+     * Label for the list item — can be a string or React node.
+     * When a string, it is wrapped in a Text component with default styling.
+     * When a ReactNode, it is rendered as-is and `labelTextProps` is ignored.
+     */
+    label: string | ReactNode;
+    /**
+     * Optional description for the list item — can be a string or React node.
+     * When a string, it is wrapped in a Text component with default styling.
+     * When a ReactNode, it is rendered as-is and `descriptionTextProps` is ignored.
+     */
+    description?: string | ReactNode;
+    /**
+     * Optional start accessory (left side) — React node.
+     * Takes priority over `iconName` when both are provided.
+     */
+    startAccessory?: ReactNode;
+    /**
+     * Optional end accessory (right side) — React node.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * Optional icon name from the design system icon library.
+     * Renders an icon with `IconSize.Md`. Ignored when `startAccessory` is provided.
+     */
+    iconName?: IconName;
+    /**
+     * Optional props spread to the label Text component (only when label is a string).
+     */
+    labelTextProps?: Partial<TextProps>;
+    /**
+     * Optional props spread to the description Text component (only when description is a string).
+     */
+    descriptionTextProps?: Partial<TextProps>;
+    /**
+     * Optional props spread to the Icon component (only when iconName is provided).
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Whether the list item is disabled.
+     * When true, applies 50% opacity and disables interactions.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional callback when the list item is pressed.
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * Optional props to pass to the underlying Pressable.
+     * Use this for Pressable-specific props such as testID for the interactive element.
+     */
+    pressableProps?: Omit<PressableProps, 'onPress' | 'disabled' | 'style'>;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & Omit<ViewProps, 'children'>;
+//# sourceMappingURL=ActionListItem.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.types.d.mts","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAqB;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC;IACxE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/ActionListItem/ActionListItem.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListItem.types.mjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { PressableProps, ViewProps } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * ActionListItem component props.\n *\n * Extends `ViewProps` so the root Pressable inherits standard React Native\n * props such as `testID` and `accessibilityLabel`. The `onPress` callback\n * is a top-level prop, while `pressableProps` provides additional\n * Pressable-specific overrides.\n */\nexport type ActionListItemProps = {\n  /**\n   * Label for the list item — can be a string or React node.\n   * When a string, it is wrapped in a Text component with default styling.\n   * When a ReactNode, it is rendered as-is and `labelTextProps` is ignored.\n   */\n  label: string | ReactNode;\n  /**\n   * Optional description for the list item — can be a string or React node.\n   * When a string, it is wrapped in a Text component with default styling.\n   * When a ReactNode, it is rendered as-is and `descriptionTextProps` is ignored.\n   */\n  description?: string | ReactNode;\n  /**\n   * Optional start accessory (left side) — React node.\n   * Takes priority over `iconName` when both are provided.\n   */\n  startAccessory?: ReactNode;\n  /**\n   * Optional end accessory (right side) — React node.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * Optional icon name from the design system icon library.\n   * Renders an icon with `IconSize.Md`. Ignored when `startAccessory` is provided.\n   */\n  iconName?: IconName;\n  /**\n   * Optional props spread to the label Text component (only when label is a string).\n   */\n  labelTextProps?: Partial<TextProps>;\n  /**\n   * Optional props spread to the description Text component (only when description is a string).\n   */\n  descriptionTextProps?: Partial<TextProps>;\n  /**\n   * Optional props spread to the Icon component (only when iconName is provided).\n   */\n  iconProps?: Partial<IconProps>;\n  /**\n   * Whether the list item is disabled.\n   * When true, applies 50% opacity and disables interactions.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional callback when the list item is pressed.\n   */\n  onPress?: PressableProps['onPress'];\n  /**\n   * Optional props to pass to the underlying Pressable.\n   * Use this for Pressable-specific props such as testID for the interactive element.\n   */\n  pressableProps?: Omit<PressableProps, 'onPress' | 'disabled' | 'style'>;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

package/dist/components/ActionListItem/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionListItem = void 0;
+var ActionListItem_1 = require("./ActionListItem.cjs");
+Object.defineProperty(exports, "ActionListItem", { enumerable: true, get: function () { return ActionListItem_1.ActionListItem; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA","sourcesContent":["export { ActionListItem } from './ActionListItem';\nexport type { ActionListItemProps } from './ActionListItem.types';\n"]}

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

@@ -0,0 +1,3 @@
+export { ActionListItem } from "./ActionListItem.cjs";
+export type { ActionListItemProps } from "./ActionListItem.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ActionListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

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

@@ -0,0 +1,3 @@
+export { ActionListItem } from "./ActionListItem.mjs";
+export type { ActionListItemProps } from "./ActionListItem.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ActionListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

package/dist/components/ActionListItem/index.mjs

@@ -0,0 +1,2 @@
+export { ActionListItem } from "./ActionListItem.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB","sourcesContent":["export { ActionListItem } from './ActionListItem';\nexport type { ActionListItemProps } from './ActionListItem.types';\n"]}

package/dist/components/BadgeCount/BadgeCount.cjs

@@ -4,19 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeCount = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native/index.js");
-const types_1 = require("../../types/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const BadgeCount_constants_1 = require("./BadgeCount.constants.cjs");
-const BadgeCount = ({ size = types_1.BadgeCountSize.Md, count, max = 99, textProps, twClassName, style, ...props }) => {
+const BadgeCount = ({ size = design_system_shared_1.BadgeCountSize.Md, count, max = 99, textProps, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     return (<react_native_1.View {...props} style={[
             tw.style('bg-error-default rounded-lg items-center justify-center self-start', BadgeCount_constants_1.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], twClassName),
             style,
         ]}>
-      <Text_1.Text variant={BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={Text_1.TextColor.ErrorInverse} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={`${BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_LINEHEIGHT[size]} ${textProps?.twClassName || ''}`}>
+      <Text_1.Text variant={BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={Text_1.TextColor.ErrorInverse} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={`leading-0 ${textProps?.twClassName || ''}`}>
         {count > max ? `${max}+` : `${count}`}
       </Text_1.Text>
     </react_native_1.View>);

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,iDAA6C;AAC7C,4CAAsD;AAEtD,qEAIgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,oEAAoE,EACpE,2DAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,sDAA+B,CAAC,IAAsB,CAAC,CAAC,CACjE,KAAK,CAAC,CAAC,gBAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,GAAG,qDAA8B,CAAC,IAAI,CAAC,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC,CAEvF;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,WAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { BadgeCountSize } from '../../types';\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n  MAP_BADGECOUNT_SIZE_LINEHEIGHT,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size as BadgeCountSize]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={`${MAP_BADGECOUNT_SIZE_LINEHEIGHT[size]} ${textProps?.twClassName || ''}`}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAyE;AACzE,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,4CAAsD;AAEtD,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,oEAAoE,EACpE,2DAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,sDAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,KAAK,CAAC,CAAC,gBAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,aAAa,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC,CAEzD;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,WAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={`leading-0 ${textProps?.twClassName || ''}`}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}

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

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

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

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

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

@@ -1,6 +1,5 @@
-import { BadgeCountSize } from "../../types/index.cjs";
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import { TextVariant } from "../Text/index.cjs";
 export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
-export declare const MAP_BADGECOUNT_SIZE_LINEHEIGHT: Record<BadgeCountSize, string>;
 export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;
 //# sourceMappingURL=BadgeCount.constants.d.cts.map

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

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

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

@@ -1,6 +1,5 @@
-import { BadgeCountSize } from "../../types/index.mjs";
+import { BadgeCountSize } from "@metamask-previews/design-system-shared";
 import { TextVariant } from "../Text/index.mjs";
 export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
-export declare const MAP_BADGECOUNT_SIZE_LINEHEIGHT: Record<BadgeCountSize, string>;
 export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;
 //# sourceMappingURL=BadgeCount.constants.d.mts.map