@metamask-previews/design-system-react-native 0.28.0-preview.1f40f69f → 0.30.0-preview.0a4d6f8

package/dist/components/KeyValueColumn/KeyValueColumn.mjs

@@ -4,10 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonIconSize, FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { ButtonIconSize, FontWeight, IconColor, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
-import { IconColor } from "../../types/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { ButtonIcon } from "../ButtonIcon/index.mjs";

package/dist/components/KeyValueColumn/KeyValueColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}
+{"version":3,"file":"KeyValueColumn.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  IconColor,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -7,7 +7,6 @@ exports.KeyValueRow = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
-const types_1 = require("../../types/index.cjs");
 const Box_1 = require("../Box/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
@@ -15,12 +14,12 @@ const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
         keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
-            color: types_1.IconColor.IconAlternative,
+            color: design_system_shared_1.IconColor.IconAlternative,
             ...keyEndButtonIconProps.iconProps,
         }}/>) : (keyEndAccessory);
     const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
         valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
-            color: types_1.IconColor.IconDefault,
+            color: design_system_shared_1.IconColor.IconDefault,
             ...valueEndButtonIconProps.iconProps,
         }}/>) : (valueEndAccessory);
     const keyBox = (<BoxRow_1.BoxRow startAccessory={keyStartAccessory} endAccessory={keyEndAccessoryNode} textProps={{

package/dist/components/KeyValueRow/KeyValueRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}
+{"version":3,"file":"KeyValueRow.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  IconColor,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}
+{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}
+{"version":3,"file":"KeyValueRow.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

package/dist/components/KeyValueRow/KeyValueRow.mjs

@@ -4,11 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonIconSize, FontWeight, KeyValueRowVariant, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { ButtonIconSize, FontWeight, IconColor, KeyValueRowVariant, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
-import { IconColor } from "../../types/index.mjs";
 import { Box } from "../Box/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { ButtonIcon } from "../ButtonIcon/index.mjs";

package/dist/components/KeyValueRow/KeyValueRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}
+{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  IconColor,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}

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