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

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"}

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.d.mts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.d.mts","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"}

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.mjs

@@ -0,0 +1,20 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { mergeTwClassName } from "@metamask-previews/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { Checkbox } from "../Checkbox/index.mjs";
+import { ListItem } from "../ListItem/index.mjs";
+const noopChange = () => undefined;
+export const ListItemMultiSelect = ({ isSelected, accessoryGap = 3, twClassName, ...props }) => {
+    const resolvedTwClassName = isSelected
+        ? mergeTwClassName('bg-background-muted', twClassName)
+        : twClassName;
+    return (<ListItem isInteractive twClassName={resolvedTwClassName} endAccessory={<Checkbox isSelected={isSelected} onChange={noopChange} label="" pointerEvents="none"/>} accessoryGap={accessoryGap} {...props}/>);
+};
+ListItemMultiSelect.displayName = 'ListItemMultiSelect';
+//# sourceMappingURL=ListItemMultiSelect.mjs.map

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.mjs","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAC3E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAIvC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;AAEnC,MAAM,CAAC,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,gBAAgB,CAAC,qBAAqB,EAAE,WAAW,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC;IAEhB,OAAO,CACL,CAAC,QAAQ,CACP,aAAa,CACb,WAAW,CAAC,CAAC,mBAAmB,CAAC,CACjC,YAAY,CAAC,CACX,CAAC,QAAQ,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;AAEF,mBAAmB,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.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.types.cjs","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemMultiSelectPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ListItemProps } from '../ListItem/ListItem.types';\n\ntype ListItemInteractiveProps = Extract<ListItemProps, { isInteractive: true }>;\n\n/**\n * ListItemMultiSelect component props.\n *\n * Interactive list row for multi-select lists. Wraps {@link ListItem} with\n * `isInteractive`, selection styling, and a trailing Checkbox.\n */\nexport type ListItemMultiSelectProps = Omit<\n  ListItemInteractiveProps,\n  'isInteractive' | 'endAccessory'\n> &\n  ListItemMultiSelectPropsShared;\n"]}

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

@@ -0,0 +1,14 @@
+import type { ListItemMultiSelectPropsShared } from "@metamask-previews/design-system-shared";
+import type { ListItemProps } from "../ListItem/ListItem.types.cjs";
+type ListItemInteractiveProps = Extract<ListItemProps, {
+    isInteractive: true;
+}>;
+/**
+ * ListItemMultiSelect component props.
+ *
+ * Interactive list row for multi-select lists. Wraps {@link ListItem} with
+ * `isInteractive`, selection styling, and a trailing Checkbox.
+ */
+export type ListItemMultiSelectProps = Omit<ListItemInteractiveProps, 'isInteractive' | 'endAccessory'> & ListItemMultiSelectPropsShared;
+export {};
+//# sourceMappingURL=ListItemMultiSelect.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.types.d.cts","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,8BAA8B,EAAE,gDAAgD;AAE9F,OAAO,KAAK,EAAE,aAAa,EAAE,uCAAmC;AAEhE,KAAK,wBAAwB,GAAG,OAAO,CAAC,aAAa,EAAE;IAAE,aAAa,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,wBAAwB,EACxB,eAAe,GAAG,cAAc,CACjC,GACC,8BAA8B,CAAC"}

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

@@ -0,0 +1,14 @@
+import type { ListItemMultiSelectPropsShared } from "@metamask-previews/design-system-shared";
+import type { ListItemProps } from "../ListItem/ListItem.types.mjs";
+type ListItemInteractiveProps = Extract<ListItemProps, {
+    isInteractive: true;
+}>;
+/**
+ * ListItemMultiSelect component props.
+ *
+ * Interactive list row for multi-select lists. Wraps {@link ListItem} with
+ * `isInteractive`, selection styling, and a trailing Checkbox.
+ */
+export type ListItemMultiSelectProps = Omit<ListItemInteractiveProps, 'isInteractive' | 'endAccessory'> & ListItemMultiSelectPropsShared;
+export {};
+//# sourceMappingURL=ListItemMultiSelect.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.types.d.mts","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,8BAA8B,EAAE,gDAAgD;AAE9F,OAAO,KAAK,EAAE,aAAa,EAAE,uCAAmC;AAEhE,KAAK,wBAAwB,GAAG,OAAO,CAAC,aAAa,EAAE;IAAE,aAAa,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,wBAAwB,EACxB,eAAe,GAAG,cAAc,CACjC,GACC,8BAA8B,CAAC"}

package/dist/components/ListItemMultiSelect/ListItemMultiSelect.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemMultiSelect.types.mjs","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/ListItemMultiSelect.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemMultiSelectPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { ListItemProps } from '../ListItem/ListItem.types';\n\ntype ListItemInteractiveProps = Extract<ListItemProps, { isInteractive: true }>;\n\n/**\n * ListItemMultiSelect component props.\n *\n * Interactive list row for multi-select lists. Wraps {@link ListItem} with\n * `isInteractive`, selection styling, and a trailing Checkbox.\n */\nexport type ListItemMultiSelectProps = Omit<\n  ListItemInteractiveProps,\n  'isInteractive' | 'endAccessory'\n> &\n  ListItemMultiSelectPropsShared;\n"]}

package/dist/components/ListItemMultiSelect/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/index.ts"],"names":[],"mappings":";;;AAAA,iEAA4D;AAAnD,0HAAA,mBAAmB,OAAA","sourcesContent":["export { ListItemMultiSelect } from './ListItemMultiSelect';\nexport type { ListItemMultiSelectProps } from './ListItemMultiSelect.types';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kCAA8B;AAC5D,YAAY,EAAE,wBAAwB,EAAE,wCAAoC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ListItemMultiSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kCAA8B;AAC5D,YAAY,EAAE,wBAAwB,EAAE,wCAAoC"}

package/dist/components/ListItemMultiSelect/index.mjs

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

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

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

package/dist/components/ListItemSelect/ListItemSelect.cjs

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemSelect = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon/index.cjs");
+const ListItem_1 = require("../ListItem/index.cjs");
+const ListItemSelect = ({ isSelected, showSelectedIcon = false, endAccessory, accessoryGap = 3, twClassName, ...props }) => {
+    const showCheck = isSelected && showSelectedIcon;
+    const resolvedEndAccessory = showCheck ? (<Icon_1.Icon name={Icon_1.IconName.Check} size={Icon_1.IconSize.Lg} color={Icon_1.IconColor.IconDefault}/>) : (endAccessory);
+    const resolvedTwClassName = isSelected
+        ? (0, design_system_shared_1.mergeTwClassName)('bg-background-muted', twClassName)
+        : twClassName;
+    return (<ListItem_1.ListItem isInteractive twClassName={resolvedTwClassName} endAccessory={resolvedEndAccessory} accessoryGap={accessoryGap} {...props}/>);
+};
+exports.ListItemSelect = ListItemSelect;
+exports.ListItemSelect.displayName = 'ListItemSelect';
+//# sourceMappingURL=ListItemSelect.cjs.map

package/dist/components/ListItemSelect/ListItemSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.cjs","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAA2E;AAC3E,kDAA0B;AAE1B,4CAA8D;AAC9D,oDAAuC;AAIhC,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,EACV,gBAAgB,GAAG,KAAK,EACxB,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,WAAW,EACX,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,UAAU,IAAI,gBAAgB,CAAC;IACjD,MAAM,oBAAoB,GAAG,SAAS,CAAC,CAAC,CAAC,CACvC,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACrB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,EAC7B,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEF,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,CAAC,oBAAoB,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,cAAc,kBAgCzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import { mergeTwClassName } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { ListItem } from '../ListItem';\n\nimport type { ListItemSelectProps } from './ListItemSelect.types';\n\nexport const ListItemSelect = ({\n  isSelected,\n  showSelectedIcon = false,\n  endAccessory,\n  accessoryGap = 3,\n  twClassName,\n  ...props\n}: ListItemSelectProps) => {\n  const showCheck = isSelected && showSelectedIcon;\n  const resolvedEndAccessory = showCheck ? (\n    <Icon\n      name={IconName.Check}\n      size={IconSize.Lg}\n      color={IconColor.IconDefault}\n    />\n  ) : (\n    endAccessory\n  );\n\n  const resolvedTwClassName = isSelected\n    ? mergeTwClassName('bg-background-muted', twClassName)\n    : twClassName;\n\n  return (\n    <ListItem\n      isInteractive\n      twClassName={resolvedTwClassName}\n      endAccessory={resolvedEndAccessory}\n      accessoryGap={accessoryGap}\n      {...props}\n    />\n  );\n};\n\nListItemSelect.displayName = 'ListItemSelect';\n"]}

package/dist/components/ListItemSelect/ListItemSelect.d.cts

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

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

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

package/dist/components/ListItemSelect/ListItemSelect.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ListItemSelectProps } from "./ListItemSelect.types.mjs";
+export declare const ListItemSelect: {
+    ({ isSelected, showSelectedIcon, endAccessory, accessoryGap, twClassName, ...props }: ListItemSelectProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ListItemSelect.d.mts.map

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

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

package/dist/components/ListItemSelect/ListItemSelect.mjs

@@ -0,0 +1,21 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { mergeTwClassName } from "@metamask-previews/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { Icon, IconColor, IconName, IconSize } from "../Icon/index.mjs";
+import { ListItem } from "../ListItem/index.mjs";
+export const ListItemSelect = ({ isSelected, showSelectedIcon = false, endAccessory, accessoryGap = 3, twClassName, ...props }) => {
+    const showCheck = isSelected && showSelectedIcon;
+    const resolvedEndAccessory = showCheck ? (<Icon name={IconName.Check} size={IconSize.Lg} color={IconColor.IconDefault}/>) : (endAccessory);
+    const resolvedTwClassName = isSelected
+        ? mergeTwClassName('bg-background-muted', twClassName)
+        : twClassName;
+    return (<ListItem isInteractive twClassName={resolvedTwClassName} endAccessory={resolvedEndAccessory} accessoryGap={accessoryGap} {...props}/>);
+};
+ListItemSelect.displayName = 'ListItemSelect';
+//# sourceMappingURL=ListItemSelect.mjs.map

package/dist/components/ListItemSelect/ListItemSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.mjs","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAC3E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAIvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,EACV,gBAAgB,GAAG,KAAK,EACxB,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,WAAW,EACX,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,UAAU,IAAI,gBAAgB,CAAC;IACjD,MAAM,oBAAoB,GAAG,SAAS,CAAC,CAAC,CAAC,CACvC,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACrB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,EAC7B,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEF,MAAM,mBAAmB,GAAG,UAAU;QACpC,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,WAAW,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC;IAEhB,OAAO,CACL,CAAC,QAAQ,CACP,aAAa,CACb,WAAW,CAAC,CAAC,mBAAmB,CAAC,CACjC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import { mergeTwClassName } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Icon, IconColor, IconName, IconSize } from '../Icon';\nimport { ListItem } from '../ListItem';\n\nimport type { ListItemSelectProps } from './ListItemSelect.types';\n\nexport const ListItemSelect = ({\n  isSelected,\n  showSelectedIcon = false,\n  endAccessory,\n  accessoryGap = 3,\n  twClassName,\n  ...props\n}: ListItemSelectProps) => {\n  const showCheck = isSelected && showSelectedIcon;\n  const resolvedEndAccessory = showCheck ? (\n    <Icon\n      name={IconName.Check}\n      size={IconSize.Lg}\n      color={IconColor.IconDefault}\n    />\n  ) : (\n    endAccessory\n  );\n\n  const resolvedTwClassName = isSelected\n    ? mergeTwClassName('bg-background-muted', twClassName)\n    : twClassName;\n\n  return (\n    <ListItem\n      isInteractive\n      twClassName={resolvedTwClassName}\n      endAccessory={resolvedEndAccessory}\n      accessoryGap={accessoryGap}\n      {...props}\n    />\n  );\n};\n\nListItemSelect.displayName = 'ListItemSelect';\n"]}

package/dist/components/ListItemSelect/ListItemSelect.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.types.cjs","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemSelectPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ReactNode } from 'react';\n\nimport type { ListItemProps } from '../ListItem/ListItem.types';\n\ntype ListItemInteractiveProps = Extract<ListItemProps, { isInteractive: true }>;\n\n/**\n * ListItemSelect component props.\n *\n * Interactive list row for single-select lists. Wraps {@link ListItem} with\n * `isInteractive` and selection styling.\n */\nexport type ListItemSelectProps = Omit<\n  ListItemInteractiveProps,\n  'isInteractive' | 'endAccessory'\n> &\n  ListItemSelectPropsShared & {\n    /** Used when the check icon is not shown (see `showSelectedIcon`). */\n    endAccessory?: ReactNode;\n  };\n"]}

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

@@ -0,0 +1,18 @@
+import type { ListItemSelectPropsShared } from "@metamask-previews/design-system-shared";
+import type { ReactNode } from "react";
+import type { ListItemProps } from "../ListItem/ListItem.types.cjs";
+type ListItemInteractiveProps = Extract<ListItemProps, {
+    isInteractive: true;
+}>;
+/**
+ * ListItemSelect component props.
+ *
+ * Interactive list row for single-select lists. Wraps {@link ListItem} with
+ * `isInteractive` and selection styling.
+ */
+export type ListItemSelectProps = Omit<ListItemInteractiveProps, 'isInteractive' | 'endAccessory'> & ListItemSelectPropsShared & {
+    /** Used when the check icon is not shown (see `showSelectedIcon`). */
+    endAccessory?: ReactNode;
+};
+export {};
+//# sourceMappingURL=ListItemSelect.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.types.d.cts","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,gDAAgD;AACzF,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,uCAAmC;AAEhE,KAAK,wBAAwB,GAAG,OAAO,CAAC,aAAa,EAAE;IAAE,aAAa,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,wBAAwB,EACxB,eAAe,GAAG,cAAc,CACjC,GACC,yBAAyB,GAAG;IAC1B,sEAAsE;IACtE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC"}

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

@@ -0,0 +1,18 @@
+import type { ListItemSelectPropsShared } from "@metamask-previews/design-system-shared";
+import type { ReactNode } from "react";
+import type { ListItemProps } from "../ListItem/ListItem.types.mjs";
+type ListItemInteractiveProps = Extract<ListItemProps, {
+    isInteractive: true;
+}>;
+/**
+ * ListItemSelect component props.
+ *
+ * Interactive list row for single-select lists. Wraps {@link ListItem} with
+ * `isInteractive` and selection styling.
+ */
+export type ListItemSelectProps = Omit<ListItemInteractiveProps, 'isInteractive' | 'endAccessory'> & ListItemSelectPropsShared & {
+    /** Used when the check icon is not shown (see `showSelectedIcon`). */
+    endAccessory?: ReactNode;
+};
+export {};
+//# sourceMappingURL=ListItemSelect.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.types.d.mts","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,gDAAgD;AACzF,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,uCAAmC;AAEhE,KAAK,wBAAwB,GAAG,OAAO,CAAC,aAAa,EAAE;IAAE,aAAa,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,wBAAwB,EACxB,eAAe,GAAG,cAAc,CACjC,GACC,yBAAyB,GAAG;IAC1B,sEAAsE;IACtE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC"}

package/dist/components/ListItemSelect/ListItemSelect.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelect.types.mjs","sourceRoot":"","sources":["../../../src/components/ListItemSelect/ListItemSelect.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ListItemSelectPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ReactNode } from 'react';\n\nimport type { ListItemProps } from '../ListItem/ListItem.types';\n\ntype ListItemInteractiveProps = Extract<ListItemProps, { isInteractive: true }>;\n\n/**\n * ListItemSelect component props.\n *\n * Interactive list row for single-select lists. Wraps {@link ListItem} with\n * `isInteractive` and selection styling.\n */\nexport type ListItemSelectProps = Omit<\n  ListItemInteractiveProps,\n  'isInteractive' | 'endAccessory'\n> &\n  ListItemSelectPropsShared & {\n    /** Used when the check icon is not shown (see `showSelectedIcon`). */\n    endAccessory?: ReactNode;\n  };\n"]}

package/dist/components/ListItemSelect/index.cjs

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/ListItemSelect/index.mjs

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

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

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

package/dist/components/SectionHeader/SectionHeader.cjs

@@ -59,7 +59,7 @@ const SectionHeader = (sectionHeaderProps) => {
         </BoxRow_1.BoxRow>
       </react_native_1.Pressable>);
     }
-    return (<BoxRow_1.BoxRow {...props} gap={1} style={style} twClassName={`px-4 pb-2 pt-3 ${twClassName}`} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
+    return (<BoxRow_1.BoxRow {...props} gap={1} style={style} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-4 pb-2 pt-3', twClassName)} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
       {titleRow}
     </BoxRow_1.BoxRow>);
 };