@metamask-previews/design-system-react-native 0.28.0-preview.1f40f69f → 0.30.2-preview.2222cbb5

package/dist/components/ListItem/ListItem.cjs

@@ -1,59 +1,45 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = 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 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const Box_1 = require("../Box/index.cjs");
-const ListItem_constants_1 = require("./ListItem.constants.cjs");
-const ListItem_types_1 = require("./ListItem.types.cjs");
-const VERTICAL_ALIGNMENT_MAP = {
-    [ListItem_types_1.ListItemVerticalAlignment.Top]: Box_1.BoxAlignItems.Start,
-    [ListItem_types_1.ListItemVerticalAlignment.Center]: Box_1.BoxAlignItems.Center,
-    [ListItem_types_1.ListItemVerticalAlignment.Bottom]: Box_1.BoxAlignItems.End,
-};
-const ListItem = ({ children, topAccessory, bottomAccessory, topAccessoryGap = ListItem_constants_1.DEFAULT_LISTITEM_TOPACCESSORYGAP, bottomAccessoryGap = ListItem_constants_1.DEFAULT_LISTITEM_BOTTOMACCESSORYGAP, gap = ListItem_constants_1.DEFAULT_LISTITEM_GAP, verticalAlignment = ListItem_constants_1.DEFAULT_LISTITEM_VERTICALALIGNMENT, twClassName, style, ...props }) => {
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const Content_1 = require("../Content/index.cjs");
+const Content_constants_1 = require("../Content/Content.constants.cjs");
+const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, verticalAlignment, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    return (<Box_1.Box style={style
-            ? [tw.style('p-4', twClassName), style]
-            : tw.style('p-4', twClassName)} {...props}>
-      {topAccessory && (<react_native_1.View testID={ListItem_constants_1.TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER} style={{ marginBottom: topAccessoryGap }}>
-          {topAccessory}
-        </react_native_1.View>)}
-      <Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}>
-        {react_1.Children.toArray(children)
-            .filter((child) => Boolean(child))
-            .map((child, index) => (<react_1.default.Fragment key={index}>
-              {index > 0 && (<react_native_1.View style={{ width: gap }} testID={ListItem_constants_1.TESTID_LISTITEM_GAP} accessible={false}/>)}
-              {child}
-            </react_1.default.Fragment>))}
-      </Box_1.Box>
-      {bottomAccessory && (<react_native_1.View testID={ListItem_constants_1.TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER} style={{ marginTop: bottomAccessoryGap }}>
-          {bottomAccessory}
-        </react_native_1.View>)}
+    const wrapperStyle = style
+        ? [tw.style('px-4 py-3', twClassName), style]
+        : tw.style('px-4 py-3', twClassName);
+    const getPressableStyle = ({ pressed, }) => {
+        const baseStyle = tw.style('w-full px-4 py-3', twClassName, pressed && 'bg-pressed');
+        if (!style) {
+            return baseStyle;
+        }
+        const userStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [baseStyle, userStyle];
+    };
+    const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);
+    const rowAlignment = Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment ?? design_system_shared_1.ContentVerticalAlignment.Center];
+    const content = (<Content_1.Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} verticalAlignment={verticalAlignment} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
+    const listContent = hasRowAccessories ? (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={rowAlignment} gap={accessoryGap} twClassName="min-h-[46px] w-full">
+      {content}
+    </BoxRow_1.BoxRow>) : (content);
+    if (isInteractive) {
+        return (<react_native_1.Pressable accessibilityRole={accessibilityRole ?? 'button'} style={getPressableStyle} {...props}>
+        {listContent}
+        {children}
+      </react_native_1.Pressable>);
+    }
+    return (<Box_1.Box style={wrapperStyle} {...props}>
+      {listContent}
+      {children}
     </Box_1.Box>);
 };
 exports.ListItem = ListItem;

package/dist/components/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AACxC,+CAAoD;AAEpD,0CAA8D;AAE9D,iEAQ8B;AAE9B,yDAA6D;AAE7D,MAAM,sBAAsB,GAC1B;IACE,CAAC,0CAAyB,CAAC,GAAG,CAAC,EAAE,mBAAa,CAAC,KAAK;IACpD,CAAC,0CAAyB,CAAC,MAAM,CAAC,EAAE,mBAAa,CAAC,MAAM;IACxD,CAAC,0CAAyB,CAAC,MAAM,CAAC,EAAE,mBAAa,CAAC,GAAG;CACtD,CAAC;AAEG,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,eAAe,GAAG,qDAAgC,EAClD,kBAAkB,GAAG,wDAAmC,EACxD,GAAG,GAAG,yCAAoB,EAC1B,iBAAiB,GAAG,uDAAkC,EACtD,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,SAAG,CACF,KAAK,CAAC,CACJ,KAAK;YACH,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;YACvC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,CACjC,CACD,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,mBAAI,CACH,MAAM,CAAC,CAAC,0DAAqC,CAAC,CAC9C,KAAK,CAAC,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC,CAEzC;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,mBAAI,CAAC,CACR,CACD;MAAA,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CAEtD;QAAA,CAAC,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aACxB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;aACjC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrB,CAAC,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CACzB;cAAA,CAAC,KAAK,GAAG,CAAC,IAAI,CACZ,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAqB,EAAE,CAAC,CACxC,MAAM,CAAC,CAAC,wCAAmB,CAAC,CAC5B,UAAU,CAAC,CAAC,KAAK,CAAC,EAClB,CACH,CACD;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,eAAK,CAAC,QAAQ,CAAC,CAClB,CAAC,CACN;MAAA,EAAE,SAAG,CACL;MAAA,CAAC,eAAe,IAAI,CAClB,CAAC,mBAAI,CACH,MAAM,CAAC,CAAC,6DAAwC,CAAC,CACjD,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAEzC;UAAA,CAAC,eAAe,CAClB;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA5DW,QAAA,QAAQ,YA4DnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { Children } from 'react';\nimport { DimensionValue, View } from 'react-native';\n\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\n\nimport {\n  DEFAULT_LISTITEM_BOTTOMACCESSORYGAP,\n  DEFAULT_LISTITEM_GAP,\n  DEFAULT_LISTITEM_TOPACCESSORYGAP,\n  DEFAULT_LISTITEM_VERTICALALIGNMENT,\n  TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER,\n  TESTID_LISTITEM_GAP,\n  TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER,\n} from './ListItem.constants';\nimport type { ListItemProps } from './ListItem.types';\nimport { ListItemVerticalAlignment } from './ListItem.types';\n\nconst VERTICAL_ALIGNMENT_MAP: Record<ListItemVerticalAlignment, BoxAlignItems> =\n  {\n    [ListItemVerticalAlignment.Top]: BoxAlignItems.Start,\n    [ListItemVerticalAlignment.Center]: BoxAlignItems.Center,\n    [ListItemVerticalAlignment.Bottom]: BoxAlignItems.End,\n  };\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  topAccessory,\n  bottomAccessory,\n  topAccessoryGap = DEFAULT_LISTITEM_TOPACCESSORYGAP,\n  bottomAccessoryGap = DEFAULT_LISTITEM_BOTTOMACCESSORYGAP,\n  gap = DEFAULT_LISTITEM_GAP,\n  verticalAlignment = DEFAULT_LISTITEM_VERTICALALIGNMENT,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <Box\n      style={\n        style\n          ? [tw.style('p-4', twClassName), style]\n          : tw.style('p-4', twClassName)\n      }\n      {...props}\n    >\n      {topAccessory && (\n        <View\n          testID={TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER}\n          style={{ marginBottom: topAccessoryGap }}\n        >\n          {topAccessory}\n        </View>\n      )}\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      >\n        {Children.toArray(children)\n          .filter((child) => Boolean(child))\n          .map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <View\n                  style={{ width: gap as DimensionValue }}\n                  testID={TESTID_LISTITEM_GAP}\n                  accessible={false}\n                />\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n      </Box>\n      {bottomAccessory && (\n        <View\n          testID={TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER}\n          style={{ marginTop: bottomAccessoryGap }}\n        >\n          {bottomAccessory}\n        </View>\n      )}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}
+{"version":3,"file":"ListItem.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAmF;AACnF,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAyC;AAOzC,0CAA6B;AAC7B,gDAAmC;AACnC,kDAAqC;AACrC,wEAAsE;AAI/D,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,WAAW,EACX,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;QAC7C,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GACoB,EAAwB,EAAE;QACrD,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,kBAAkB,EAClB,WAAW,EACX,OAAO,IAAI,YAAY,CACxB,CAAC;QAEF,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAE3E,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3E,MAAM,YAAY,GAChB,0CAAsB,CACpB,iBAAiB,IAAI,+CAAwB,CAAC,MAAM,CACrD,CAAC;IAEJ,MAAM,OAAO,GAAG,CACd,CAAC,iBAAO,CACN,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,yBAAyB,CAAC,CAAC,yBAAyB,CAAC,CACrD,uBAAuB,CAAC,CAAC,uBAAuB,CAAC,CACjD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,EAC3C,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CACtC,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,WAAW,CAAC,qBAAqB,CAEjC;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,OAAO,CACL,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACjD,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,WAAW,CACZ;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,wBAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,CACL,CAAC,SAAG,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AApHW,QAAA,QAAQ,YAoHnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { ContentVerticalAlignment } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\nimport { VERTICAL_ALIGNMENT_MAP } from '../Content/Content.constants';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  verticalAlignment,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const wrapperStyle = style\n    ? [tw.style('px-4 py-3', twClassName), style]\n    : tw.style('px-4 py-3', twClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(\n      'w-full px-4 py-3',\n      twClassName,\n      pressed && 'bg-pressed',\n    );\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n  const rowAlignment =\n    VERTICAL_ALIGNMENT_MAP[\n      verticalAlignment ?? ContentVerticalAlignment.Center\n    ];\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      verticalAlignment={verticalAlignment}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={rowAlignment}\n      gap={accessoryGap}\n      twClassName=\"min-h-[46px] w-full\"\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAcxC,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAUtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4D5C,CAAC"}
+{"version":3,"file":"ListItem.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoH5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAcxC,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAUtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4D5C,CAAC"}
+{"version":3,"file":"ListItem.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoH5C,CAAC"}

package/dist/components/ListItem/ListItem.mjs

@@ -4,37 +4,43 @@ function $importDefault(module) {
     }
     return module;
 }
+import { ContentVerticalAlignment } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
-import $React, { Children } from "react";
+import $React from "react";
 const React = $importDefault($React);
-import { View } from "react-native";
-import { Box, BoxAlignItems, BoxFlexDirection } from "../Box/index.mjs";
-import { DEFAULT_LISTITEM_BOTTOMACCESSORYGAP, DEFAULT_LISTITEM_GAP, DEFAULT_LISTITEM_TOPACCESSORYGAP, DEFAULT_LISTITEM_VERTICALALIGNMENT, TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER, TESTID_LISTITEM_GAP, TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER } from "./ListItem.constants.mjs";
-import { ListItemVerticalAlignment } from "./ListItem.types.mjs";
-const VERTICAL_ALIGNMENT_MAP = {
-    [ListItemVerticalAlignment.Top]: BoxAlignItems.Start,
-    [ListItemVerticalAlignment.Center]: BoxAlignItems.Center,
-    [ListItemVerticalAlignment.Bottom]: BoxAlignItems.End,
-};
-export const ListItem = ({ children, topAccessory, bottomAccessory, topAccessoryGap = DEFAULT_LISTITEM_TOPACCESSORYGAP, bottomAccessoryGap = DEFAULT_LISTITEM_BOTTOMACCESSORYGAP, gap = DEFAULT_LISTITEM_GAP, verticalAlignment = DEFAULT_LISTITEM_VERTICALALIGNMENT, twClassName, style, ...props }) => {
+import { Pressable } from "react-native";
+import { Box } from "../Box/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { Content } from "../Content/index.mjs";
+import { VERTICAL_ALIGNMENT_MAP } from "../Content/Content.constants.mjs";
+export const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, verticalAlignment, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
     const tw = useTailwind();
-    return (<Box style={style
-            ? [tw.style('p-4', twClassName), style]
-            : tw.style('p-4', twClassName)} {...props}>
-      {topAccessory && (<View testID={TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER} style={{ marginBottom: topAccessoryGap }}>
-          {topAccessory}
-        </View>)}
-      <Box flexDirection={BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}>
-        {Children.toArray(children)
-            .filter((child) => Boolean(child))
-            .map((child, index) => (<React.Fragment key={index}>
-              {index > 0 && (<View style={{ width: gap }} testID={TESTID_LISTITEM_GAP} accessible={false}/>)}
-              {child}
-            </React.Fragment>))}
-      </Box>
-      {bottomAccessory && (<View testID={TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER} style={{ marginTop: bottomAccessoryGap }}>
-          {bottomAccessory}
-        </View>)}
+    const wrapperStyle = style
+        ? [tw.style('px-4 py-3', twClassName), style]
+        : tw.style('px-4 py-3', twClassName);
+    const getPressableStyle = ({ pressed, }) => {
+        const baseStyle = tw.style('w-full px-4 py-3', twClassName, pressed && 'bg-pressed');
+        if (!style) {
+            return baseStyle;
+        }
+        const userStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [baseStyle, userStyle];
+    };
+    const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);
+    const rowAlignment = VERTICAL_ALIGNMENT_MAP[verticalAlignment ?? ContentVerticalAlignment.Center];
+    const content = (<Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} verticalAlignment={verticalAlignment} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
+    const listContent = hasRowAccessories ? (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={rowAlignment} gap={accessoryGap} twClassName="min-h-[46px] w-full">
+      {content}
+    </BoxRow>) : (content);
+    if (isInteractive) {
+        return (<Pressable accessibilityRole={accessibilityRole ?? 'button'} style={getPressableStyle} {...props}>
+        {listContent}
+        {children}
+      </Pressable>);
+    }
+    return (<Box style={wrapperStyle} {...props}>
+      {listContent}
+      {children}
     </Box>);
 };
 ListItem.displayName = 'ListItem';

package/dist/components/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AACxC,OAAO,EAAkB,IAAI,EAAE,qBAAqB;AAEpD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,yBAAe;AAE9D,OAAO,EACL,mCAAmC,EACnC,oBAAoB,EACpB,gCAAgC,EAChC,kCAAkC,EAClC,wCAAwC,EACxC,mBAAmB,EACnB,qCAAqC,EACtC,iCAA6B;AAE9B,OAAO,EAAE,yBAAyB,EAAE,6BAAyB;AAE7D,MAAM,sBAAsB,GAC1B;IACE,CAAC,yBAAyB,CAAC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK;IACpD,CAAC,yBAAyB,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM;IACxD,CAAC,yBAAyB,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG;CACtD,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,eAAe,GAAG,gCAAgC,EAClD,kBAAkB,GAAG,mCAAmC,EACxD,GAAG,GAAG,oBAAoB,EAC1B,iBAAiB,GAAG,kCAAkC,EACtD,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CACJ,KAAK;YACH,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;YACvC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,CACjC,CACD,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,IAAI,CACH,MAAM,CAAC,CAAC,qCAAqC,CAAC,CAC9C,KAAK,CAAC,CAAC,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC,CAEzC;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CAEtD;QAAA,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;aACxB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;aACjC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CACzB;cAAA,CAAC,KAAK,GAAG,CAAC,IAAI,CACZ,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAqB,EAAE,CAAC,CACxC,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAC5B,UAAU,CAAC,CAAC,KAAK,CAAC,EAClB,CACH,CACD;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,KAAK,CAAC,QAAQ,CAAC,CAClB,CAAC,CACN;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,eAAe,IAAI,CAClB,CAAC,IAAI,CACH,MAAM,CAAC,CAAC,wCAAwC,CAAC,CACjD,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAEzC;UAAA,CAAC,eAAe,CAClB;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { Children } from 'react';\nimport { DimensionValue, View } from 'react-native';\n\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\n\nimport {\n  DEFAULT_LISTITEM_BOTTOMACCESSORYGAP,\n  DEFAULT_LISTITEM_GAP,\n  DEFAULT_LISTITEM_TOPACCESSORYGAP,\n  DEFAULT_LISTITEM_VERTICALALIGNMENT,\n  TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER,\n  TESTID_LISTITEM_GAP,\n  TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER,\n} from './ListItem.constants';\nimport type { ListItemProps } from './ListItem.types';\nimport { ListItemVerticalAlignment } from './ListItem.types';\n\nconst VERTICAL_ALIGNMENT_MAP: Record<ListItemVerticalAlignment, BoxAlignItems> =\n  {\n    [ListItemVerticalAlignment.Top]: BoxAlignItems.Start,\n    [ListItemVerticalAlignment.Center]: BoxAlignItems.Center,\n    [ListItemVerticalAlignment.Bottom]: BoxAlignItems.End,\n  };\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  topAccessory,\n  bottomAccessory,\n  topAccessoryGap = DEFAULT_LISTITEM_TOPACCESSORYGAP,\n  bottomAccessoryGap = DEFAULT_LISTITEM_BOTTOMACCESSORYGAP,\n  gap = DEFAULT_LISTITEM_GAP,\n  verticalAlignment = DEFAULT_LISTITEM_VERTICALALIGNMENT,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <Box\n      style={\n        style\n          ? [tw.style('p-4', twClassName), style]\n          : tw.style('p-4', twClassName)\n      }\n      {...props}\n    >\n      {topAccessory && (\n        <View\n          testID={TESTID_LISTITEM_TOP_ACCESSORY_WRAPPER}\n          style={{ marginBottom: topAccessoryGap }}\n        >\n          {topAccessory}\n        </View>\n      )}\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      >\n        {Children.toArray(children)\n          .filter((child) => Boolean(child))\n          .map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <View\n                  style={{ width: gap as DimensionValue }}\n                  testID={TESTID_LISTITEM_GAP}\n                  accessible={false}\n                />\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n      </Box>\n      {bottomAccessory && (\n        <View\n          testID={TESTID_LISTITEM_BOTTOM_ACCESSORY_WRAPPER}\n          style={{ marginTop: bottomAccessoryGap }}\n        >\n          {bottomAccessory}\n        </View>\n      )}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}
+{"version":3,"file":"ListItem.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,gDAAgD;AACnF,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,SAAS,EAAE,qBAAqB;AAOzC,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,OAAO,EAAE,6BAAmB;AACrC,OAAO,EAAE,sBAAsB,EAAE,yCAAqC;AAItE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,WAAW,EACX,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;QAC7C,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GACoB,EAAwB,EAAE;QACrD,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,kBAAkB,EAClB,WAAW,EACX,OAAO,IAAI,YAAY,CACxB,CAAC;QAEF,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAE3E,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3E,MAAM,YAAY,GAChB,sBAAsB,CACpB,iBAAiB,IAAI,wBAAwB,CAAC,MAAM,CACrD,CAAC;IAEJ,MAAM,OAAO,GAAG,CACd,CAAC,OAAO,CACN,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,yBAAyB,CAAC,CAAC,yBAAyB,CAAC,CACrD,uBAAuB,CAAC,CAAC,uBAAuB,CAAC,CACjD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,EAC3C,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CACtC,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,WAAW,CAAC,qBAAqB,CAEjC;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,OAAO,CACL,CAAC,SAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACjD,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,WAAW,CACZ;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { ContentVerticalAlignment } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\nimport { VERTICAL_ALIGNMENT_MAP } from '../Content/Content.constants';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  verticalAlignment,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const wrapperStyle = style\n    ? [tw.style('px-4 py-3', twClassName), style]\n    : tw.style('px-4 py-3', twClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(\n      'w-full px-4 py-3',\n      twClassName,\n      pressed && 'bg-pressed',\n    );\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n  const rowAlignment =\n    VERTICAL_ALIGNMENT_MAP[\n      verticalAlignment ?? ContentVerticalAlignment.Center\n    ];\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      verticalAlignment={verticalAlignment}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={rowAlignment}\n      gap={accessoryGap}\n      twClassName=\"min-h-[46px] w-full\"\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}

package/dist/components/ListItem/ListItem.types.cjs

@@ -1,12 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItemVerticalAlignment = void 0;
-/**
- * Vertical alignment options for children inside the ListItem row.
- */
-exports.ListItemVerticalAlignment = {
-    Top: 'top',
-    Center: 'center',
-    Bottom: 'bottom',
-};
 //# sourceMappingURL=ListItem.types.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";;;AAGA;;GAEG;AACU,QAAA,yBAAyB,GAAG;IACvC,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;CACR,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport type { ViewProps } from 'react-native';\n\n/**\n * Vertical alignment options for children inside the ListItem row.\n */\nexport const ListItemVerticalAlignment = {\n  Top: 'top',\n  Center: 'center',\n  Bottom: 'bottom',\n} as const;\n\nexport type ListItemVerticalAlignment =\n  (typeof ListItemVerticalAlignment)[keyof typeof ListItemVerticalAlignment];\n\n/**\n * ListItem component props.\n *\n * Extends `ViewProps` so the root View inherits standard React Native\n * props such as `testID` and `accessibilityLabel`.\n */\nexport type ListItemProps = {\n  /**\n   * Content to display inside the list item row.\n   */\n  children?: ReactNode;\n  /**\n   * Optional content displayed above the list item row.\n   */\n  topAccessory?: ReactNode;\n  /**\n   * Optional content displayed below the list item row.\n   */\n  bottomAccessory?: ReactNode;\n  /**\n   * Gap in pixels between the topAccessory and the row.\n   *\n   * @default 0\n   */\n  topAccessoryGap?: number;\n  /**\n   * Gap in pixels between the row and the bottomAccessory.\n   *\n   * @default 0\n   */\n  bottomAccessoryGap?: number;\n  /**\n   * Horizontal spacing between each child inside the row.\n   *\n   * @default 16\n   */\n  gap?: number | string;\n  /**\n   * Vertical alignment of children inside the row.\n   *\n   * @default ListItemVerticalAlignment.Center\n   */\n  verticalAlignment?: ListItemVerticalAlignment;\n  /**\n   * Optional Tailwind class names to override default styles on the root element.\n   */\n  twClassName?: string;\n} & ViewProps;\n"]}
+{"version":3,"file":"ListItem.types.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemPropsShared } from '@metamask-previews/design-system-shared';\nimport type { PressableProps } from 'react-native';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { ContentProps } from '../Content/Content.types';\n\ntype ListItemPropsBase = ListItemPropsShared & ContentProps;\n\n/**\n * ListItem component props.\n *\n * Wraps {@link Content} in a padded root (`px-4 py-3`) with optional row shell\n * accessories. When `isInteractive` is `false` (default), the root is a `Box`; when `true`,\n * the root is a `Pressable`.\n */\nexport type ListItemProps =\n  | (ListItemPropsBase & { isInteractive?: false } & Omit<BoxProps, 'children'>)\n  | (ListItemPropsBase & {\n      isInteractive: true;\n    } & Omit<PressableProps, 'children'>);\n"]}

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

@@ -1,60 +1,19 @@
-import type { ReactNode } from "react";
-import type { ViewProps } from "react-native";
-/**
- * Vertical alignment options for children inside the ListItem row.
- */
-export declare const ListItemVerticalAlignment: {
-    readonly Top: "top";
-    readonly Center: "center";
-    readonly Bottom: "bottom";
-};
-export type ListItemVerticalAlignment = (typeof ListItemVerticalAlignment)[keyof typeof ListItemVerticalAlignment];
+import type { ListItemPropsShared } from "@metamask-previews/design-system-shared";
+import type { PressableProps } from "react-native";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { ContentProps } from "../Content/Content.types.cjs";
+type ListItemPropsBase = ListItemPropsShared & ContentProps;
 /**
  * ListItem component props.
  *
- * Extends `ViewProps` so the root View inherits standard React Native
- * props such as `testID` and `accessibilityLabel`.
+ * Wraps {@link Content} in a padded root (`px-4 py-3`) with optional row shell
+ * accessories. When `isInteractive` is `false` (default), the root is a `Box`; when `true`,
+ * the root is a `Pressable`.
  */
-export type ListItemProps = {
-    /**
-     * Content to display inside the list item row.
-     */
-    children?: ReactNode;
-    /**
-     * Optional content displayed above the list item row.
-     */
-    topAccessory?: ReactNode;
-    /**
-     * Optional content displayed below the list item row.
-     */
-    bottomAccessory?: ReactNode;
-    /**
-     * Gap in pixels between the topAccessory and the row.
-     *
-     * @default 0
-     */
-    topAccessoryGap?: number;
-    /**
-     * Gap in pixels between the row and the bottomAccessory.
-     *
-     * @default 0
-     */
-    bottomAccessoryGap?: number;
-    /**
-     * Horizontal spacing between each child inside the row.
-     *
-     * @default 16
-     */
-    gap?: number | string;
-    /**
-     * Vertical alignment of children inside the row.
-     *
-     * @default ListItemVerticalAlignment.Center
-     */
-    verticalAlignment?: ListItemVerticalAlignment;
-    /**
-     * Optional Tailwind class names to override default styles on the root element.
-     */
-    twClassName?: string;
-} & ViewProps;
+export type ListItemProps = (ListItemPropsBase & {
+    isInteractive?: false;
+} & Omit<BoxProps, 'children'>) | (ListItemPropsBase & {
+    isInteractive: true;
+} & Omit<PressableProps, 'children'>);
+export {};
 //# sourceMappingURL=ListItem.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,eAAO,MAAM,yBAAyB;;;;CAI5B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GACnC,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"ListItem.types.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gDAAgD;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB;AAEnD,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,qCAAiC;AAE7D,KAAK,iBAAiB,GAAG,mBAAmB,GAAG,YAAY,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GACrB,CAAC,iBAAiB,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,GAC5E,CAAC,iBAAiB,GAAG;IACnB,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC"}

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

@@ -1,60 +1,19 @@
-import type { ReactNode } from "react";
-import type { ViewProps } from "react-native";
-/**
- * Vertical alignment options for children inside the ListItem row.
- */
-export declare const ListItemVerticalAlignment: {
-    readonly Top: "top";
-    readonly Center: "center";
-    readonly Bottom: "bottom";
-};
-export type ListItemVerticalAlignment = (typeof ListItemVerticalAlignment)[keyof typeof ListItemVerticalAlignment];
+import type { ListItemPropsShared } from "@metamask-previews/design-system-shared";
+import type { PressableProps } from "react-native";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { ContentProps } from "../Content/Content.types.mjs";
+type ListItemPropsBase = ListItemPropsShared & ContentProps;
 /**
  * ListItem component props.
  *
- * Extends `ViewProps` so the root View inherits standard React Native
- * props such as `testID` and `accessibilityLabel`.
+ * Wraps {@link Content} in a padded root (`px-4 py-3`) with optional row shell
+ * accessories. When `isInteractive` is `false` (default), the root is a `Box`; when `true`,
+ * the root is a `Pressable`.
  */
-export type ListItemProps = {
-    /**
-     * Content to display inside the list item row.
-     */
-    children?: ReactNode;
-    /**
-     * Optional content displayed above the list item row.
-     */
-    topAccessory?: ReactNode;
-    /**
-     * Optional content displayed below the list item row.
-     */
-    bottomAccessory?: ReactNode;
-    /**
-     * Gap in pixels between the topAccessory and the row.
-     *
-     * @default 0
-     */
-    topAccessoryGap?: number;
-    /**
-     * Gap in pixels between the row and the bottomAccessory.
-     *
-     * @default 0
-     */
-    bottomAccessoryGap?: number;
-    /**
-     * Horizontal spacing between each child inside the row.
-     *
-     * @default 16
-     */
-    gap?: number | string;
-    /**
-     * Vertical alignment of children inside the row.
-     *
-     * @default ListItemVerticalAlignment.Center
-     */
-    verticalAlignment?: ListItemVerticalAlignment;
-    /**
-     * Optional Tailwind class names to override default styles on the root element.
-     */
-    twClassName?: string;
-} & ViewProps;
+export type ListItemProps = (ListItemPropsBase & {
+    isInteractive?: false;
+} & Omit<BoxProps, 'children'>) | (ListItemPropsBase & {
+    isInteractive: true;
+} & Omit<PressableProps, 'children'>);
+export {};
 //# sourceMappingURL=ListItem.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,eAAO,MAAM,yBAAyB;;;;CAI5B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GACnC,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,OAAO,yBAAyB,CAAC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"ListItem.types.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gDAAgD;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB;AAEnD,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,qCAAiC;AAE7D,KAAK,iBAAiB,GAAG,mBAAmB,GAAG,YAAY,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GACrB,CAAC,iBAAiB,GAAG;IAAE,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,GAC5E,CAAC,iBAAiB,GAAG;IACnB,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC"}

package/dist/components/ListItem/ListItem.types.mjs

@@ -1,9 +1,2 @@
-/**
- * Vertical alignment options for children inside the ListItem row.
- */
-export const ListItemVerticalAlignment = {
-    Top: 'top',
-    Center: 'center',
-    Bottom: 'bottom',
-};
+export {};
 //# sourceMappingURL=ListItem.types.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;CACR,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport type { ViewProps } from 'react-native';\n\n/**\n * Vertical alignment options for children inside the ListItem row.\n */\nexport const ListItemVerticalAlignment = {\n  Top: 'top',\n  Center: 'center',\n  Bottom: 'bottom',\n} as const;\n\nexport type ListItemVerticalAlignment =\n  (typeof ListItemVerticalAlignment)[keyof typeof ListItemVerticalAlignment];\n\n/**\n * ListItem component props.\n *\n * Extends `ViewProps` so the root View inherits standard React Native\n * props such as `testID` and `accessibilityLabel`.\n */\nexport type ListItemProps = {\n  /**\n   * Content to display inside the list item row.\n   */\n  children?: ReactNode;\n  /**\n   * Optional content displayed above the list item row.\n   */\n  topAccessory?: ReactNode;\n  /**\n   * Optional content displayed below the list item row.\n   */\n  bottomAccessory?: ReactNode;\n  /**\n   * Gap in pixels between the topAccessory and the row.\n   *\n   * @default 0\n   */\n  topAccessoryGap?: number;\n  /**\n   * Gap in pixels between the row and the bottomAccessory.\n   *\n   * @default 0\n   */\n  bottomAccessoryGap?: number;\n  /**\n   * Horizontal spacing between each child inside the row.\n   *\n   * @default 16\n   */\n  gap?: number | string;\n  /**\n   * Vertical alignment of children inside the row.\n   *\n   * @default ListItemVerticalAlignment.Center\n   */\n  verticalAlignment?: ListItemVerticalAlignment;\n  /**\n   * Optional Tailwind class names to override default styles on the root element.\n   */\n  twClassName?: string;\n} & ViewProps;\n"]}
+{"version":3,"file":"ListItem.types.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemPropsShared } from '@metamask-previews/design-system-shared';\nimport type { PressableProps } from 'react-native';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { ContentProps } from '../Content/Content.types';\n\ntype ListItemPropsBase = ListItemPropsShared & ContentProps;\n\n/**\n * ListItem component props.\n *\n * Wraps {@link Content} in a padded root (`px-4 py-3`) with optional row shell\n * accessories. When `isInteractive` is `false` (default), the root is a `Box`; when `true`,\n * the root is a `Pressable`.\n */\nexport type ListItemProps =\n  | (ListItemPropsBase & { isInteractive?: false } & Omit<BoxProps, 'children'>)\n  | (ListItemPropsBase & {\n      isInteractive: true;\n    } & Omit<PressableProps, 'children'>);\n"]}

package/dist/components/ListItem/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":";;;AAAA,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uDAA6D;AAApD,2HAAA,yBAAyB,OAAA","sourcesContent":["export { ListItem } from './ListItem';\nexport { ListItemVerticalAlignment } from './ListItem.types';\nexport type { ListItemProps } from './ListItem.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":";;;AAAA,gFAAgH;AAAvG,iIAAA,wBAAwB,OAA6B;AAC9D,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA","sourcesContent":["export { ContentVerticalAlignment as ListItemVerticalAlignment } from '@metamask-previews/design-system-shared';\nexport { ListItem } from './ListItem';\nexport type { ListItemProps } from './ListItem.types';\n"]}

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

@@ -1,4 +1,4 @@
+export { ContentVerticalAlignment as ListItemVerticalAlignment } from "@metamask-previews/design-system-shared";
 export { ListItem } from "./ListItem.cjs";
-export { ListItemVerticalAlignment } from "./ListItem.types.cjs";
 export type { ListItemProps } from "./ListItem.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,yBAAyB,EAAE,6BAAyB;AAC7D,YAAY,EAAE,aAAa,EAAE,6BAAyB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,gDAAgD;AAChH,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

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

@@ -1,4 +1,4 @@
+export { ContentVerticalAlignment as ListItemVerticalAlignment } from "@metamask-previews/design-system-shared";
 export { ListItem } from "./ListItem.mjs";
-export { ListItemVerticalAlignment } from "./ListItem.types.mjs";
 export type { ListItemProps } from "./ListItem.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,yBAAyB,EAAE,6BAAyB;AAC7D,YAAY,EAAE,aAAa,EAAE,6BAAyB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,gDAAgD;AAChH,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/ListItem/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,yBAAyB,EAAE,6BAAyB","sourcesContent":["export { ListItem } from './ListItem';\nexport { ListItemVerticalAlignment } from './ListItem.types';\nexport type { ListItemProps } from './ListItem.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,gDAAgD;AAChH,OAAO,EAAE,QAAQ,EAAE,uBAAmB","sourcesContent":["export { ContentVerticalAlignment as ListItemVerticalAlignment } from '@metamask-previews/design-system-shared';\nexport { ListItem } from './ListItem';\nexport type { ListItemProps } from './ListItem.types';\n"]}

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.cjs

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemMultiSelect = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const Checkbox_1 = require("../Checkbox/index.cjs");
+const ListItem_1 = require("../ListItem/index.cjs");
+const noopChange = () => undefined;
+const ListItemMultiSelect = ({ isSelected, accessoryGap = 3, twClassName, ...props }) => {
+    const resolvedTwClassName = isSelected
+        ? (0, design_system_shared_1.mergeTwClassName)('bg-background-muted', twClassName)
+        : twClassName;
+    return (<ListItem_1.ListItem isInteractive twClassName={resolvedTwClassName} endAccessory={<Checkbox_1.Checkbox isSelected={isSelected} onChange={noopChange} label="" pointerEvents="none"/>} accessoryGap={accessoryGap} {...props}/>);
+};
+exports.ListItemMultiSelect = ListItemMultiSelect;
+exports.ListItemMultiSelect.displayName = 'ListItemMultiSelect';
+//# sourceMappingURL=ListItemMultiSelect.cjs.map

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.cjs","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAA2E;AAC3E,kDAA0B;AAE1B,oDAAuC;AACvC,oDAAuC;AAIvC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;AAE5B,MAAM,mBAAmB,GAAG,CAAC,EAClC,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,WAAW,EACX,GAAG,KAAK,EACiB,EAAE,EAAE;IAC7B,MAAM,mBAAmB,GAAG,UAAU;QACpC,CAAC,CAAC,IAAA,uCAAgB,EAAC,qBAAqB,EAAE,WAAW,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC;IAEhB,OAAO,CACL,CAAC,mBAAQ,CACP,aAAa,CACb,WAAW,CAAC,CAAC,mBAAmB,CAAC,CACjC,YAAY,CAAC,CACX,CAAC,mBAAQ,CACP,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,KAAK,CAAC,EAAE,CACR,aAAa,CAAC,MAAM,EACpB,CACH,CACD,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,mBAAmB,uBA0B9B;AAEF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import { mergeTwClassName } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Checkbox } from '../Checkbox';\nimport { ListItem } from '../ListItem';\n\nimport type { ListItemMultiSelectProps } from './ListItemMultiSelect.types';\n\nconst noopChange = () => undefined;\n\nexport const ListItemMultiSelect = ({\n  isSelected,\n  accessoryGap = 3,\n  twClassName,\n  ...props\n}: ListItemMultiSelectProps) => {\n  const resolvedTwClassName = isSelected\n    ? mergeTwClassName('bg-background-muted', twClassName)\n    : twClassName;\n\n  return (\n    <ListItem\n      isInteractive\n      twClassName={resolvedTwClassName}\n      endAccessory={\n        <Checkbox\n          isSelected={isSelected}\n          onChange={noopChange}\n          label=\"\"\n          pointerEvents=\"none\"\n        />\n      }\n      accessoryGap={accessoryGap}\n      {...props}\n    />\n  );\n};\n\nListItemMultiSelect.displayName = 'ListItemMultiSelect';\n"]}

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ListItemMultiSelectProps } from "./ListItemMultiSelect.types.cjs";
+export declare const ListItemMultiSelect: {
+    ({ isSelected, accessoryGap, twClassName, ...props }: ListItemMultiSelectProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ListItemMultiSelect.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.d.cts","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,wCAAoC;AAI5E,eAAO,MAAM,mBAAmB;0DAK7B,wBAAwB;;CAqB1B,CAAC"}