@metamask/design-system-react-native 0.15.0 → 0.17.0

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

@@ -0,0 +1,17 @@
+import type { KeyValueColumnPropsShared } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native/index.js";
+import type { ButtonIconProps } from "../ButtonIcon/ButtonIcon.types.cjs";
+import type { TextProps } from "../Text/Text.types.cjs";
+export type KeyValueColumnProps = KeyValueColumnPropsShared & Omit<ViewProps, 'children'> & {
+    /** Optional props for the key Text when key is a string. */
+    keyTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /** Optional props for the value Text when value is a string. */
+    valueTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /** Optional Tailwind class names applied to the outer BoxVertical. Merged with base styles. */
+    twClassName?: string;
+    /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */
+    keyEndButtonIconProps?: Partial<ButtonIconProps>;
+    /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */
+    valueEndButtonIconProps?: Partial<ButtonIconProps>;
+};
+//# sourceMappingURL=KeyValueColumn.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueColumn.types.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uCAAuC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GACzD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACtD,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { KeyValueColumnPropsShared } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native/index.js";
+import type { ButtonIconProps } from "../ButtonIcon/ButtonIcon.types.mjs";
+import type { TextProps } from "../Text/Text.types.mjs";
+export type KeyValueColumnProps = KeyValueColumnPropsShared & Omit<ViewProps, 'children'> & {
+    /** Optional props for the key Text when key is a string. */
+    keyTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /** Optional props for the value Text when value is a string. */
+    valueTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /** Optional Tailwind class names applied to the outer BoxVertical. Merged with base styles. */
+    twClassName?: string;
+    /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */
+    keyEndButtonIconProps?: Partial<ButtonIconProps>;
+    /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */
+    valueEndButtonIconProps?: Partial<ButtonIconProps>;
+};
+//# sourceMappingURL=KeyValueColumn.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueColumn.types.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uCAAuC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GACzD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACtD,+FAA+F;IAC/F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}

package/dist/components/KeyValueColumn/KeyValueColumn.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueColumn.types.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { KeyValueColumnPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { ButtonIconProps } from '../ButtonIcon/ButtonIcon.types';\nimport type { TextProps } from '../Text/Text.types';\n\nexport type KeyValueColumnProps = KeyValueColumnPropsShared &\n  Omit<ViewProps, 'children'> & {\n    /** Optional props for the key Text when key is a string. */\n    keyTextProps?: Partial<Omit<TextProps, 'children'>>;\n    /** Optional props for the value Text when value is a string. */\n    valueTextProps?: Partial<Omit<TextProps, 'children'>>;\n    /** Optional Tailwind class names applied to the outer BoxVertical. Merged with base styles. */\n    twClassName?: string;\n    /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */\n    keyEndButtonIconProps?: Partial<ButtonIconProps>;\n    /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */\n    valueEndButtonIconProps?: Partial<ButtonIconProps>;\n  };\n"]}

package/dist/components/KeyValueColumn/index.cjs

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/KeyValueColumn/index.mjs

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

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

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

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -3,74 +3,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyValueRowStubs = exports.KeyValueRow = void 0;
+exports.KeyValueRow = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native/index.js");
-const Icon_1 = require("../Icon/index.cjs");
-const KeyValueLabel_1 = require("./KeyValueLabel/KeyValueLabel.cjs");
-const KeyValueRoot_1 = require("./KeyValueRoot/KeyValueRoot.cjs");
-const KeyValueRow_types_1 = require("./KeyValueRow.types.cjs");
-const KeyValueSection_1 = require("./KeyValueSection/KeyValueSection.cjs");
-const renderIcon = (icon) => {
-    const { side: _side, ...iconProps } = icon;
-    return <Icon_1.Icon {...iconProps}/>;
-};
-/**
- * Prebuilt convenience component to format and render a key/value label pair.
- * The KeyValueRowLabel component has props to display a tooltip and icon.
- *
- * @param props - Component props
- * @param props.field - Represents the left side of the key value row pair
- * @param props.value - Represents the right side of the key value row pair
- * @param props.twClassName - Optional Tailwind class names for the root element
- * @param props.style - Optional additional styles for the root element
- *
- * @returns The rendered KeyValueRow component.
- */
-const KeyValueRow = ({ field, value, twClassName, style, ...props }) => {
+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");
+const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, variant = design_system_shared_1.KeyValueRowVariant.Summary, twClassName, style, ...viewProps }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const fieldIcon = field?.icon;
-    const valueIcon = value?.icon;
-    return (<KeyValueRoot_1.KeyValueRowRoot twClassName={twClassName} style={style} {...props}>
-      <KeyValueSection_1.KeyValueSection>
-        <react_native_1.View style={tw.style('flex-row items-center gap-2')}>
-          {fieldIcon?.name &&
-            (fieldIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Left ||
-                fieldIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Both ||
-                !fieldIcon.side) &&
-            renderIcon(fieldIcon)}
-          <KeyValueLabel_1.KeyValueRowLabel label={field.label} tooltip={field.tooltip}/>
-          {fieldIcon?.name &&
-            (fieldIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Right ||
-                fieldIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Both) &&
-            renderIcon(fieldIcon)}
-        </react_native_1.View>
-      </KeyValueSection_1.KeyValueSection>
-      <KeyValueSection_1.KeyValueSection align={KeyValueRow_types_1.KeyValueRowSectionAlignments.Right}>
-        <react_native_1.View style={tw.style('flex-row items-center gap-2')}>
-          {valueIcon?.name &&
-            (valueIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Left ||
-                valueIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Both ||
-                !valueIcon.side) &&
-            renderIcon(valueIcon)}
-          <KeyValueLabel_1.KeyValueRowLabel label={value.label} tooltip={value.tooltip}/>
-          {valueIcon?.name &&
-            (valueIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Right ||
-                valueIcon.side === KeyValueRow_types_1.KeyValueRowFieldIconSides.Both) &&
-            renderIcon(valueIcon)}
-        </react_native_1.View>
-      </KeyValueSection_1.KeyValueSection>
-    </KeyValueRoot_1.KeyValueRowRoot>);
+    const keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
+        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
+            color: types_1.IconColor.IconAlternative,
+            ...keyEndButtonIconProps.iconProps,
+        }}/>) : (keyEndAccessory);
+    const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
+            color: types_1.IconColor.IconDefault,
+            ...valueEndButtonIconProps.iconProps,
+        }}/>) : (valueEndAccessory);
+    const keyBox = (<BoxRow_1.BoxRow startAccessory={keyStartAccessory} endAccessory={keyEndAccessoryNode} textProps={{
+            variant: design_system_shared_1.TextVariant.BodyMd,
+            fontWeight: design_system_shared_1.FontWeight.Medium,
+            color: design_system_shared_1.TextColor.TextAlternative,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...keyTextProps,
+        }}>
+      {keyContent}
+    </BoxRow_1.BoxRow>);
+    const valueBox = (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessoryNode} textProps={{
+            variant: design_system_shared_1.TextVariant.BodyMd,
+            fontWeight: design_system_shared_1.FontWeight.Medium,
+            color: design_system_shared_1.TextColor.TextDefault,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...valueTextProps,
+        }} twClassName="flex-1 min-w-0 justify-end">
+      {valueContent}
+    </BoxRow_1.BoxRow>);
+    return (<BoxRow_1.BoxRow endAccessory={valueBox} gap={4} style={[
+            tw.style(variant === design_system_shared_1.KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
+            style,
+        ]} {...viewProps}>
+      <Box_1.Box twClassName="shrink-0">{keyBox}</Box_1.Box>
+    </BoxRow_1.BoxRow>);
 };
 exports.KeyValueRow = KeyValueRow;
 exports.KeyValueRow.displayName = 'KeyValueRow';
-/**
- * Exported sub-components to provide a base for new KeyValueRow variants.
- */
-exports.KeyValueRowStubs = {
-    Root: KeyValueRoot_1.KeyValueRowRoot,
-    Section: KeyValueSection_1.KeyValueSection,
-    Label: KeyValueLabel_1.KeyValueRowLabel,
-};
 //# sourceMappingURL=KeyValueRow.cjs.map

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 { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon } from '../Icon';\nimport type { IconProps } from '../Icon';\n\nimport { KeyValueRowLabel } from './KeyValueLabel/KeyValueLabel';\nimport { KeyValueRowRoot } from './KeyValueRoot/KeyValueRoot';\nimport type { KeyValueRowProps } from './KeyValueRow.types';\nimport {\n  KeyValueRowFieldIconSides,\n  KeyValueRowSectionAlignments,\n} from './KeyValueRow.types';\nimport { KeyValueSection } from './KeyValueSection/KeyValueSection';\n\ntype IconWithSide = IconProps & { side?: KeyValueRowFieldIconSides };\n\nconst renderIcon = (icon: IconWithSide) => {\n  const { side: _side, ...iconProps } = icon;\n  return <Icon {...iconProps} />;\n};\n\n/**\n * Prebuilt convenience component to format and render a key/value label pair.\n * The KeyValueRowLabel component has props to display a tooltip and icon.\n *\n * @param props - Component props\n * @param props.field - Represents the left side of the key value row pair\n * @param props.value - Represents the right side of the key value row pair\n * @param props.twClassName - Optional Tailwind class names for the root element\n * @param props.style - Optional additional styles for the root element\n *\n * @returns The rendered KeyValueRow component.\n */\nexport const KeyValueRow: React.FC<KeyValueRowProps> = ({\n  field,\n  value,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const fieldIcon = field?.icon;\n  const valueIcon = value?.icon;\n\n  return (\n    <KeyValueRowRoot twClassName={twClassName} style={style} {...props}>\n      <KeyValueSection>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Left ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both ||\n              !fieldIcon.side) &&\n            renderIcon(fieldIcon)}\n          <KeyValueRowLabel label={field.label} tooltip={field.tooltip} />\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Right ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(fieldIcon)}\n        </View>\n      </KeyValueSection>\n      <KeyValueSection align={KeyValueRowSectionAlignments.Right}>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Left ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both ||\n              !valueIcon.side) &&\n            renderIcon(valueIcon)}\n          <KeyValueRowLabel label={value.label} tooltip={value.tooltip} />\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Right ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(valueIcon)}\n        </View>\n      </KeyValueSection>\n    </KeyValueRowRoot>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n\n/**\n * Exported sub-components to provide a base for new KeyValueRow variants.\n */\nexport const KeyValueRowStubs = {\n  Root: KeyValueRowRoot,\n  Section: KeyValueSection,\n  Label: KeyValueRowLabel,\n};\n"]}
+{"version":3,"file":"KeyValueRow.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonIconSize, 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"]}

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

@@ -1,24 +1,7 @@
 import React from "react";
 import type { KeyValueRowProps } from "./KeyValueRow.types.cjs";
-/**
- * Prebuilt convenience component to format and render a key/value label pair.
- * The KeyValueRowLabel component has props to display a tooltip and icon.
- *
- * @param props - Component props
- * @param props.field - Represents the left side of the key value row pair
- * @param props.value - Represents the right side of the key value row pair
- * @param props.twClassName - Optional Tailwind class names for the root element
- * @param props.style - Optional additional styles for the root element
- *
- * @returns The rendered KeyValueRow component.
- */
-export declare const KeyValueRow: React.FC<KeyValueRowProps>;
-/**
- * Exported sub-components to provide a base for new KeyValueRow variants.
- */
-export declare const KeyValueRowStubs: {
-    Root: React.FC<import("./KeyValueRow.types.cjs").KeyValueRowRootProps>;
-    Section: React.FC<import("./KeyValueRow.types.cjs").KeyValueSectionProps>;
-    Label: React.FC<import("./KeyValueRow.types.cjs").KeyValueRowLabelProps>;
+export declare const KeyValueRow: {
+    ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, variant, twClassName, style, ...viewProps }: KeyValueRowProps): React.JSX.Element;
+    displayName: string;
 };
 //# sourceMappingURL=KeyValueRow.d.cts.map

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":"AACA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAc5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ClD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}
+{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

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

@@ -1,24 +1,7 @@
 import React from "react";
 import type { KeyValueRowProps } from "./KeyValueRow.types.mjs";
-/**
- * Prebuilt convenience component to format and render a key/value label pair.
- * The KeyValueRowLabel component has props to display a tooltip and icon.
- *
- * @param props - Component props
- * @param props.field - Represents the left side of the key value row pair
- * @param props.value - Represents the right side of the key value row pair
- * @param props.twClassName - Optional Tailwind class names for the root element
- * @param props.style - Optional additional styles for the root element
- *
- * @returns The rendered KeyValueRow component.
- */
-export declare const KeyValueRow: React.FC<KeyValueRowProps>;
-/**
- * Exported sub-components to provide a base for new KeyValueRow variants.
- */
-export declare const KeyValueRowStubs: {
-    Root: React.FC<import("./KeyValueRow.types.mjs").KeyValueRowRootProps>;
-    Section: React.FC<import("./KeyValueRow.types.mjs").KeyValueSectionProps>;
-    Label: React.FC<import("./KeyValueRow.types.mjs").KeyValueRowLabelProps>;
+export declare const KeyValueRow: {
+    ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, variant, twClassName, style, ...viewProps }: KeyValueRowProps): React.JSX.Element;
+    displayName: string;
 };
 //# sourceMappingURL=KeyValueRow.d.mts.map

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":"AACA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAc5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ClD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}
+{"version":3,"file":"KeyValueRow.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

package/dist/components/KeyValueRow/KeyValueRow.mjs

@@ -4,73 +4,52 @@ function $importDefault(module) {
     }
     return module;
 }
+import { FontWeight, KeyValueRowVariant, TextColor, TextVariant } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
-import { View } from "react-native/index.js";
-import { Icon } from "../Icon/index.mjs";
-import { KeyValueRowLabel } from "./KeyValueLabel/KeyValueLabel.mjs";
-import { KeyValueRowRoot } from "./KeyValueRoot/KeyValueRoot.mjs";
-import { KeyValueRowFieldIconSides, KeyValueRowSectionAlignments } from "./KeyValueRow.types.mjs";
-import { KeyValueSection } from "./KeyValueSection/KeyValueSection.mjs";
-const renderIcon = (icon) => {
-    const { side: _side, ...iconProps } = icon;
-    return <Icon {...iconProps}/>;
-};
-/**
- * Prebuilt convenience component to format and render a key/value label pair.
- * The KeyValueRowLabel component has props to display a tooltip and icon.
- *
- * @param props - Component props
- * @param props.field - Represents the left side of the key value row pair
- * @param props.value - Represents the right side of the key value row pair
- * @param props.twClassName - Optional Tailwind class names for the root element
- * @param props.style - Optional additional styles for the root element
- *
- * @returns The rendered KeyValueRow component.
- */
-export const KeyValueRow = ({ field, value, twClassName, style, ...props }) => {
+import { ButtonIconSize, IconColor } from "../../types/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { ButtonIcon } from "../ButtonIcon/index.mjs";
+export const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, variant = KeyValueRowVariant.Summary, twClassName, style, ...viewProps }) => {
     const tw = useTailwind();
-    const fieldIcon = field?.icon;
-    const valueIcon = value?.icon;
-    return (<KeyValueRowRoot twClassName={twClassName} style={style} {...props}>
-      <KeyValueSection>
-        <View style={tw.style('flex-row items-center gap-2')}>
-          {fieldIcon?.name &&
-            (fieldIcon.side === KeyValueRowFieldIconSides.Left ||
-                fieldIcon.side === KeyValueRowFieldIconSides.Both ||
-                !fieldIcon.side) &&
-            renderIcon(fieldIcon)}
-          <KeyValueRowLabel label={field.label} tooltip={field.tooltip}/>
-          {fieldIcon?.name &&
-            (fieldIcon.side === KeyValueRowFieldIconSides.Right ||
-                fieldIcon.side === KeyValueRowFieldIconSides.Both) &&
-            renderIcon(fieldIcon)}
-        </View>
-      </KeyValueSection>
-      <KeyValueSection align={KeyValueRowSectionAlignments.Right}>
-        <View style={tw.style('flex-row items-center gap-2')}>
-          {valueIcon?.name &&
-            (valueIcon.side === KeyValueRowFieldIconSides.Left ||
-                valueIcon.side === KeyValueRowFieldIconSides.Both ||
-                !valueIcon.side) &&
-            renderIcon(valueIcon)}
-          <KeyValueRowLabel label={value.label} tooltip={value.tooltip}/>
-          {valueIcon?.name &&
-            (valueIcon.side === KeyValueRowFieldIconSides.Right ||
-                valueIcon.side === KeyValueRowFieldIconSides.Both) &&
-            renderIcon(valueIcon)}
-        </View>
-      </KeyValueSection>
-    </KeyValueRowRoot>);
+    const keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
+        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon size={ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
+            color: IconColor.IconAlternative,
+            ...keyEndButtonIconProps.iconProps,
+        }}/>) : (keyEndAccessory);
+    const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon size={ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
+            color: IconColor.IconDefault,
+            ...valueEndButtonIconProps.iconProps,
+        }}/>) : (valueEndAccessory);
+    const keyBox = (<BoxRow startAccessory={keyStartAccessory} endAccessory={keyEndAccessoryNode} textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            color: TextColor.TextAlternative,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...keyTextProps,
+        }}>
+      {keyContent}
+    </BoxRow>);
+    const valueBox = (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessoryNode} textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            color: TextColor.TextDefault,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...valueTextProps,
+        }} twClassName="flex-1 min-w-0 justify-end">
+      {valueContent}
+    </BoxRow>);
+    return (<BoxRow endAccessory={valueBox} gap={4} style={[
+            tw.style(variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
+            style,
+        ]} {...viewProps}>
+      <Box twClassName="shrink-0">{keyBox}</Box>
+    </BoxRow>);
 };
 KeyValueRow.displayName = 'KeyValueRow';
-/**
- * Exported sub-components to provide a base for new KeyValueRow variants.
- */
-export const KeyValueRowStubs = {
-    Root: KeyValueRowRoot,
-    Section: KeyValueSection,
-    Label: KeyValueRowLabel,
-};
 //# sourceMappingURL=KeyValueRow.mjs.map

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 { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon } from '../Icon';\nimport type { IconProps } from '../Icon';\n\nimport { KeyValueRowLabel } from './KeyValueLabel/KeyValueLabel';\nimport { KeyValueRowRoot } from './KeyValueRoot/KeyValueRoot';\nimport type { KeyValueRowProps } from './KeyValueRow.types';\nimport {\n  KeyValueRowFieldIconSides,\n  KeyValueRowSectionAlignments,\n} from './KeyValueRow.types';\nimport { KeyValueSection } from './KeyValueSection/KeyValueSection';\n\ntype IconWithSide = IconProps & { side?: KeyValueRowFieldIconSides };\n\nconst renderIcon = (icon: IconWithSide) => {\n  const { side: _side, ...iconProps } = icon;\n  return <Icon {...iconProps} />;\n};\n\n/**\n * Prebuilt convenience component to format and render a key/value label pair.\n * The KeyValueRowLabel component has props to display a tooltip and icon.\n *\n * @param props - Component props\n * @param props.field - Represents the left side of the key value row pair\n * @param props.value - Represents the right side of the key value row pair\n * @param props.twClassName - Optional Tailwind class names for the root element\n * @param props.style - Optional additional styles for the root element\n *\n * @returns The rendered KeyValueRow component.\n */\nexport const KeyValueRow: React.FC<KeyValueRowProps> = ({\n  field,\n  value,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const fieldIcon = field?.icon;\n  const valueIcon = value?.icon;\n\n  return (\n    <KeyValueRowRoot twClassName={twClassName} style={style} {...props}>\n      <KeyValueSection>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Left ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both ||\n              !fieldIcon.side) &&\n            renderIcon(fieldIcon)}\n          <KeyValueRowLabel label={field.label} tooltip={field.tooltip} />\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Right ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(fieldIcon)}\n        </View>\n      </KeyValueSection>\n      <KeyValueSection align={KeyValueRowSectionAlignments.Right}>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Left ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both ||\n              !valueIcon.side) &&\n            renderIcon(valueIcon)}\n          <KeyValueRowLabel label={value.label} tooltip={value.tooltip} />\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Right ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(valueIcon)}\n        </View>\n      </KeyValueSection>\n    </KeyValueRowRoot>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n\n/**\n * Exported sub-components to provide a base for new KeyValueRow variants.\n */\nexport const KeyValueRowStubs = {\n  Root: KeyValueRowRoot,\n  Section: KeyValueSection,\n  Label: KeyValueRowLabel,\n};\n"]}
+{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAoB;AACxD,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,OAAO,GAAG,kBAAkB,CAAC,OAAO,EACpC,WAAW,EACX,KAAK,EACL,GAAG,SAAS,EACK,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CACzC,SAAS,CAAC,CAAC;YACT,KAAK,EAAE,SAAS,CAAC,eAAe;YAChC,GAAG,qBAAqB,CAAC,SAAS;SACnC,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,CAAC;IAEJ,MAAM,qBAAqB,GACzB,uBAAuB,EAAE,QAAQ,KAAK,SAAS;QAC/C,uBAAuB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1C,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAC3C,SAAS,CAAC,CAAC;YACT,KAAK,EAAE,SAAS,CAAC,WAAW;YAC5B,GAAG,uBAAuB,CAAC,SAAS;SACrC,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CAEF;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,4BAA4B,CAExC;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,YAAY,CAAC,CAAC,QAAQ,CAAC,CACvB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,OAAO,KAAK,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACtD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAC3C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonIconSize, 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"]}

package/dist/components/KeyValueRow/KeyValueRow.types.cjs

@@ -1,29 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyValueRowSectionAlignments = exports.TooltipSizes = exports.IconSizes = exports.KeyValueRowFieldIconSides = void 0;
-const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
-const Icon_1 = require("../Icon/index.cjs");
-/**
- * Used to position an icon in a KeyValueRowField.
- */
-exports.KeyValueRowFieldIconSides = {
-    Left: 'left',
-    Right: 'right',
-    Both: 'both',
-};
-/**
- * Re-exported for backwards compatibility.
- */
-exports.IconSizes = Icon_1.IconSize;
-/**
- * Re-exported for backwards compatibility.
- */
-exports.TooltipSizes = ButtonIcon_1.ButtonIconSize;
-/**
- * Represents the valid KeyValueSection alignments.
- */
-exports.KeyValueRowSectionAlignments = {
-    Left: 'items-start',
-    Right: 'items-end',
-};
 //# sourceMappingURL=KeyValueRow.types.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.types.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":";;;AAGA,wDAA+C;AAC/C,4CAA6C;AAsC7C;;GAEG;AACU,QAAA,yBAAyB,GAAG;IACvC,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AAuBX;;GAEG;AACU,QAAA,SAAS,GAAG,eAAQ,CAAC;AAElC;;GAEG;AACU,QAAA,YAAY,GAAG,2BAAc,CAAC;AAsC3C;;GAEG;AACU,QAAA,4BAA4B,GAAG;IAC1C,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,WAAW;CACV,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport type { ViewProps } from 'react-native';\n\nimport { ButtonIconSize } from '../ButtonIcon';\nimport { IconName, IconSize } from '../Icon';\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * The optional tooltip that can be displayed within a KeyValueRowField.\n */\nexport type KeyValueRowTooltip = {\n  /**\n   * The title displayed at the top of the tooltip.\n   */\n  title: string;\n  /**\n   * The content displayed within the tooltip body.\n   */\n  content: string | ReactNode;\n  /**\n   * Optional size of the tooltip icon button.\n   *\n   * @default ButtonIconSize.Md\n   */\n  size?: ButtonIconSize;\n  /**\n   * Optional icon name for the tooltip icon.\n   *\n   * @default IconName.Question\n   */\n  iconName?: IconName;\n  /**\n   * Optional onPress handler called when the tooltip icon is pressed.\n   */\n  onPress?: (...args: unknown[]) => unknown;\n  /**\n   * Optional bottom padding for the tooltip modal.\n   */\n  bottomPadding?: number;\n};\n\n/**\n * Used to position an icon in a KeyValueRowField.\n */\nexport const KeyValueRowFieldIconSides = {\n  Left: 'left',\n  Right: 'right',\n  Both: 'both',\n} as const;\n\nexport type KeyValueRowFieldIconSides =\n  (typeof KeyValueRowFieldIconSides)[keyof typeof KeyValueRowFieldIconSides];\n\n/**\n * Represents a field displayed within KeyValueRowProps.\n */\nexport type KeyValueRowField = {\n  /**\n   * The label content displayed.\n   */\n  label: PreDefinedKeyValueRowLabel | ReactNode;\n  /**\n   * Optional icon to display. If undefined, no icon is displayed.\n   */\n  icon?: IconProps & { side?: KeyValueRowFieldIconSides };\n  /**\n   * Optional tooltip to display. If undefined, no tooltip is displayed.\n   */\n  tooltip?: KeyValueRowTooltip;\n};\n\n/**\n * Re-exported for backwards compatibility.\n */\nexport const IconSizes = IconSize;\n\n/**\n * Re-exported for backwards compatibility.\n */\nexport const TooltipSizes = ButtonIconSize;\n\n/**\n * A predefined label object with text, variant, and color.\n */\nexport type PreDefinedKeyValueRowLabel = {\n  /**\n   * Text to display.\n   */\n  text: string;\n  /**\n   * Optional text variant.\n   *\n   * @default TextVariant.BodyMd\n   */\n  variant?: TextProps['variant'];\n  /**\n   * Optional text color.\n   *\n   * @default TextColor.TextDefault\n   */\n  color?: TextProps['color'];\n};\n\n/**\n * The KeyValueRowLabel component props.\n */\nexport type KeyValueRowLabelProps = {\n  /**\n   * The label content displayed.\n   */\n  label: PreDefinedKeyValueRowLabel | ReactNode;\n  /**\n   * Optional tooltip. If undefined, the tooltip won't be displayed.\n   */\n  tooltip?: KeyValueRowTooltip;\n};\n\n/**\n * Represents the valid KeyValueSection alignments.\n */\nexport const KeyValueRowSectionAlignments = {\n  Left: 'items-start',\n  Right: 'items-end',\n} as const;\n\nexport type KeyValueRowSectionAlignments =\n  (typeof KeyValueRowSectionAlignments)[keyof typeof KeyValueRowSectionAlignments];\n\n/**\n * Represents the main container for the KeyValueRow component.\n *\n * Extends `ViewProps` so the root View inherits standard React Native\n * props such as `testID` and `accessibilityLabel`.\n */\nexport type KeyValueRowRootProps = {\n  /**\n   * Must have exactly two children. Adding more will lead to an undesired outcome.\n   */\n  children: [ReactNode, ReactNode];\n  /**\n   * Optional Tailwind class names to override default styles on the root element.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * The KeyValueSection component props.\n *\n * Extends `ViewProps` so the root View inherits standard React Native\n * props such as `testID` and `accessibilityLabel`.\n */\nexport type KeyValueSectionProps = {\n  /**\n   * Child components.\n   */\n  children: ReactNode;\n  /**\n   * Optional content alignment.\n   *\n   * @default KeyValueRowSectionAlignments.Left\n   */\n  align?: KeyValueRowSectionAlignments;\n  /**\n   * Optional Tailwind class names to override default styles on the root element.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * The KeyValueRow component props.\n *\n * Extends `ViewProps` so the root View inherits standard React Native\n * props such as `testID` and `accessibilityLabel`.\n */\nexport type KeyValueRowProps = {\n  /**\n   * The \"key\" portion of the KeyValueRow (left side).\n   * Using the variable name field because key is reserved.\n   */\n  field: KeyValueRowField;\n  /**\n   * The \"value\" portion of the KeyValueRow (right side).\n   */\n  value: KeyValueRowField;\n  /**\n   * Optional Tailwind class names to override default styles on the root element.\n   */\n  twClassName?: string;\n} & ViewProps;\n"]}
+{"version":3,"file":"KeyValueRow.types.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { KeyValueRowPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { ButtonIconProps } from '../ButtonIcon/ButtonIcon.types';\nimport type { TextProps } from '../Text/Text.types';\n\nexport type KeyValueRowProps = KeyValueRowPropsShared &\n  Omit<ViewProps, 'children'> & {\n    /** Optional props for the key Text when key is a string. */\n    keyTextProps?: Partial<Omit<TextProps, 'children'>>;\n    /** Optional props for the value Text when value is a string. */\n    valueTextProps?: Partial<Omit<TextProps, 'children'>>;\n    /** Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles. */\n    twClassName?: string;\n    /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */\n    keyEndButtonIconProps?: Partial<ButtonIconProps>;\n    /** When set, renders a ButtonIcon as the value endAccessory (takes precedence over valueEndAccessory). */\n    valueEndButtonIconProps?: Partial<ButtonIconProps>;\n  };\n"]}