@metamask/design-system-react-native 0.11.0 → 0.12.0

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

@@ -0,0 +1,11 @@
+import { TextVariant } from "../../types/index.mjs";
+/**
+ * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
+ * React Native `TextInput` aligns single-line text more predictably when line height is not set
+ * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).
+ */
+export declare const MAP_TEXT_VARIANT_INPUT_METRICS: Record<TextVariant, {
+    fontSize: number;
+    letterSpacing: number;
+}>;
+//# sourceMappingURL=Input.constants.d.mts.map

package/dist/components/Input/Input.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.constants.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAE1C;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,WAAW,EACX;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CA0D5C,CAAC"}

package/dist/components/Input/Input.constants.mjs

@@ -0,0 +1,66 @@
+import { typography } from "@metamask/design-tokens";
+import { TextVariant } from "../../types/index.mjs";
+/**
+ * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
+ * React Native `TextInput` aligns single-line text more predictably when line height is not set
+ * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).
+ */
+export const MAP_TEXT_VARIANT_INPUT_METRICS = {
+    [TextVariant.DisplayLg]: {
+        fontSize: typography.sDisplayLG.fontSize,
+        letterSpacing: typography.sDisplayLG.letterSpacing,
+    },
+    [TextVariant.DisplayMd]: {
+        fontSize: typography.sDisplayMD.fontSize,
+        letterSpacing: typography.sDisplayMD.letterSpacing,
+    },
+    [TextVariant.HeadingLg]: {
+        fontSize: typography.sHeadingLG.fontSize,
+        letterSpacing: typography.sHeadingLG.letterSpacing,
+    },
+    [TextVariant.HeadingMd]: {
+        fontSize: typography.sHeadingMD.fontSize,
+        letterSpacing: typography.sHeadingMD.letterSpacing,
+    },
+    [TextVariant.HeadingSm]: {
+        fontSize: typography.sHeadingSM.fontSize,
+        letterSpacing: typography.sHeadingSM.letterSpacing,
+    },
+    [TextVariant.BodyLg]: {
+        fontSize: typography.sBodyLGMedium.fontSize,
+        letterSpacing: typography.sBodyLGMedium.letterSpacing,
+    },
+    [TextVariant.BodyMd]: {
+        fontSize: typography.sBodyMD.fontSize,
+        letterSpacing: typography.sBodyMD.letterSpacing,
+    },
+    [TextVariant.BodySm]: {
+        fontSize: typography.sBodySM.fontSize,
+        letterSpacing: typography.sBodySM.letterSpacing,
+    },
+    [TextVariant.BodyXs]: {
+        fontSize: typography.sBodyXS.fontSize,
+        letterSpacing: typography.sBodyXS.letterSpacing,
+    },
+    [TextVariant.PageHeading]: {
+        fontSize: typography.sPageHeading.fontSize,
+        letterSpacing: typography.sPageHeading.letterSpacing,
+    },
+    [TextVariant.SectionHeading]: {
+        fontSize: typography.sSectionHeading.fontSize,
+        letterSpacing: typography.sSectionHeading.letterSpacing,
+    },
+    [TextVariant.ButtonLabelMd]: {
+        fontSize: typography.sButtonLabelMd.fontSize,
+        letterSpacing: typography.sButtonLabelMd.letterSpacing,
+    },
+    [TextVariant.ButtonLabelLg]: {
+        fontSize: typography.sButtonLabelLg.fontSize,
+        letterSpacing: typography.sButtonLabelLg.letterSpacing,
+    },
+    [TextVariant.AmountDisplayLg]: {
+        fontSize: typography.sAmountDisplayLg.fontSize,
+        letterSpacing: typography.sAmountDisplayLg.letterSpacing,
+    },
+};
+//# sourceMappingURL=Input.constants.mjs.map

package/dist/components/Input/Input.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.constants.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,gCAAgC;AAErD,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAGvC;IACF,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;QACvB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,QAAQ;QACxC,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,aAAa;KACnD;IACD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ;QAC3C,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,aAAa;KACtD;IACD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACpB,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ;QACrC,aAAa,EAAE,UAAU,CAAC,OAAO,CAAC,aAAa;KAChD;IACD,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE;QACzB,QAAQ,EAAE,UAAU,CAAC,YAAY,CAAC,QAAQ;QAC1C,aAAa,EAAE,UAAU,CAAC,YAAY,CAAC,aAAa;KACrD;IACD,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE;QAC5B,QAAQ,EAAE,UAAU,CAAC,eAAe,CAAC,QAAQ;QAC7C,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,aAAa;KACxD;IACD,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE;QAC3B,QAAQ,EAAE,UAAU,CAAC,cAAc,CAAC,QAAQ;QAC5C,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,aAAa;KACvD;IACD,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE;QAC3B,QAAQ,EAAE,UAAU,CAAC,cAAc,CAAC,QAAQ;QAC5C,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,aAAa;KACvD;IACD,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE;QAC7B,QAAQ,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ;QAC9C,aAAa,EAAE,UAAU,CAAC,gBAAgB,CAAC,aAAa;KACzD;CACF,CAAC","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport { TextVariant } from '../../types';\n\n/**\n * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.\n * React Native `TextInput` aligns single-line text more predictably when line height is not set\n * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).\n */\nexport const MAP_TEXT_VARIANT_INPUT_METRICS: Record<\n  TextVariant,\n  { fontSize: number; letterSpacing: number }\n> = {\n  [TextVariant.DisplayLg]: {\n    fontSize: typography.sDisplayLG.fontSize,\n    letterSpacing: typography.sDisplayLG.letterSpacing,\n  },\n  [TextVariant.DisplayMd]: {\n    fontSize: typography.sDisplayMD.fontSize,\n    letterSpacing: typography.sDisplayMD.letterSpacing,\n  },\n  [TextVariant.HeadingLg]: {\n    fontSize: typography.sHeadingLG.fontSize,\n    letterSpacing: typography.sHeadingLG.letterSpacing,\n  },\n  [TextVariant.HeadingMd]: {\n    fontSize: typography.sHeadingMD.fontSize,\n    letterSpacing: typography.sHeadingMD.letterSpacing,\n  },\n  [TextVariant.HeadingSm]: {\n    fontSize: typography.sHeadingSM.fontSize,\n    letterSpacing: typography.sHeadingSM.letterSpacing,\n  },\n  [TextVariant.BodyLg]: {\n    fontSize: typography.sBodyLGMedium.fontSize,\n    letterSpacing: typography.sBodyLGMedium.letterSpacing,\n  },\n  [TextVariant.BodyMd]: {\n    fontSize: typography.sBodyMD.fontSize,\n    letterSpacing: typography.sBodyMD.letterSpacing,\n  },\n  [TextVariant.BodySm]: {\n    fontSize: typography.sBodySM.fontSize,\n    letterSpacing: typography.sBodySM.letterSpacing,\n  },\n  [TextVariant.BodyXs]: {\n    fontSize: typography.sBodyXS.fontSize,\n    letterSpacing: typography.sBodyXS.letterSpacing,\n  },\n  [TextVariant.PageHeading]: {\n    fontSize: typography.sPageHeading.fontSize,\n    letterSpacing: typography.sPageHeading.letterSpacing,\n  },\n  [TextVariant.SectionHeading]: {\n    fontSize: typography.sSectionHeading.fontSize,\n    letterSpacing: typography.sSectionHeading.letterSpacing,\n  },\n  [TextVariant.ButtonLabelMd]: {\n    fontSize: typography.sButtonLabelMd.fontSize,\n    letterSpacing: typography.sButtonLabelMd.letterSpacing,\n  },\n  [TextVariant.ButtonLabelLg]: {\n    fontSize: typography.sButtonLabelLg.fontSize,\n    letterSpacing: typography.sButtonLabelLg.letterSpacing,\n  },\n  [TextVariant.AmountDisplayLg]: {\n    fontSize: typography.sAmountDisplayLg.fontSize,\n    letterSpacing: typography.sAmountDisplayLg.letterSpacing,\n  },\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAQtD,eAAO,MAAM,KAAK;;;;;;;6CAmHjB,CAAC"}
+{"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAStD,eAAO,MAAM,KAAK;;;;;;;6CAqHjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAQtD,eAAO,MAAM,KAAK;;;;;;;6CAmHjB,CAAC"}
+{"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAStD,eAAO,MAAM,KAAK;;;;;;;6CAqHjB,CAAC"}

package/dist/components/Input/Input.mjs

@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useMemo, useState } from "react";
 import { Platform, TextInput } from "react-native/index.js";
 import { FontFamily, TextVariant } from "../../types/index.mjs";
 import { MAP_TEXT_VARIANT_FONTWEIGHT, TWCLASSMAP_TEXT_FONTWEIGHT } from "../Text/Text.constants.mjs";
+import { MAP_TEXT_VARIANT_INPUT_METRICS } from "./Input.constants.mjs";
 export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(autoFocus);
     const tw = useTailwind();
@@ -19,11 +20,10 @@ export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isSt
     // the controlled value is empty. This keeps the iOS lineHeight workaround
     // scoped to the placeholder-visible state without affecting typed text.
     const isPlaceholderVisible = hasPlaceholder && value === '';
-    const inputStyle = useMemo(() => tw.style(`text-${textVariant}`, fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+    const inputStyle = useMemo(() => tw.style(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
         !isDisabled &&
         isFocused &&
         'border-primary-default', twClassName), [
-        textVariant,
         fontClass,
         isStateStylesDisabled,
         isDisabled,
@@ -31,6 +31,7 @@ export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isSt
         twClassName,
         tw,
     ]);
+    const variantTextStyle = useMemo(() => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant], [textVariant]);
     /* istanbul ignore next: handler body covered by focus/blur tests */
     const onBlurHandler = useCallback((e) => {
         if (!isDisabled) {
@@ -47,12 +48,12 @@ export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isSt
     }, [isDisabled, onFocus]);
     const resolvedStyle = [
         inputStyle,
+        variantTextStyle,
         // iOS-only workaround: when a placeholder is visible, native iOS
         // TextInput can render placeholder text vertically offset.
         // Keep this iOS-only because lineHeight: 0 can collapse text on Android.
         Platform.OS === 'ios' &&
             isPlaceholderVisible && { lineHeight: 0 },
-        Platform.OS === 'ios' && { textAlignVertical: 'center' },
         style,
     ].filter(Boolean);
     return (<TextInput ref={ref} placeholderTextColor={placeholderTextColor} {...props} placeholder={placeholder} value={value} style={resolvedStyle} editable={!isDisabled && !isReadonly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);

package/dist/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          `text-${textVariant}`,\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        textVariant,\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const resolvedStyle = [\n      inputStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      Platform.OS === 'ios' && { textAlignVertical: 'center' as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}
+{"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport { MAP_TEXT_VARIANT_INPUT_METRICS } from './Input.constants';\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    const variantTextStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n    const resolvedStyle = [\n      inputStyle,\n      variantTextStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}

package/dist/components/KeyValueRow/KeyValueLabel/KeyValueLabel.cjs

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 ButtonIcon_1 = require("../../ButtonIcon/index.cjs");
+const Icon_1 = require("../../Icon/index.cjs");
+const Text_1 = require("../../Text/index.cjs");
+const KeyValueRow_utils_1 = require("../KeyValueRow.utils.cjs");
+/**
+ * A label and optional tooltip button component.
+ *
+ * @param props - Component props.
+ * @param props.label - The label content to display.
+ * @param props.tooltip - Optional tooltip to render to the right of the label.
+ *
+ * @returns The rendered KeyValueRowLabel component.
+ */
+const KeyValueRowLabel = ({ label, tooltip, }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const hasTooltip = Boolean(tooltip?.title && tooltip?.content);
+    return (<react_native_1.View style={tw.style('flex-row items-center')}>
+      {(0, KeyValueRow_utils_1.isPreDefinedKeyValueRowLabel)(label) ? (<Text_1.Text variant={label.variant ?? Text_1.TextVariant.BodyMd} color={label.color ?? Text_1.TextColor.TextDefault}>
+          {label.text}
+        </Text_1.Text>) : (label)}
+      {hasTooltip && tooltip && (<ButtonIcon_1.ButtonIcon size={tooltip.size ?? ButtonIcon_1.ButtonIconSize.Md} iconName={tooltip.iconName ?? Icon_1.IconName.Question} accessibilityLabel={`${tooltip.title} tooltip`} onPress={() => tooltip?.onPress?.()}/>)}
+    </react_native_1.View>);
+};
+exports.default = KeyValueRowLabel;
+//# sourceMappingURL=KeyValueLabel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueLabel.cjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx"],"names":[],"mappings":";;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAoC;AAEpC,2DAA8D;AAC9D,+CAAsC;AACtC,+CAA0D;AAE1D,gEAAoE;AAEpE;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,KAAK,EACL,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,OAAO,CAAC,CAAC;IAE/D,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAC7C;MAAA,CAAC,IAAA,gDAA4B,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrC,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,kBAAW,CAAC,MAAM,CAAC,CAC7C,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,gBAAS,CAAC,WAAW,CAAC,CAE5C;UAAA,CAAC,KAAK,CAAC,IAAI,CACb;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CACD;MAAA,CAAC,UAAU,IAAI,OAAO,IAAI,CACxB,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,2BAAc,CAAC,EAAE,CAAC,CACxC,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,eAAQ,CAAC,QAAQ,CAAC,CAChD,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,UAAU,CAAC,CAC/C,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,EACpC,CACH,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { ButtonIcon, ButtonIconSize } from '../../ButtonIcon';\nimport { IconName } from '../../Icon';\nimport { Text, TextColor, TextVariant } from '../../Text';\nimport type { KeyValueRowLabelProps } from '../KeyValueRow.types';\nimport { isPreDefinedKeyValueRowLabel } from '../KeyValueRow.utils';\n\n/**\n * A label and optional tooltip button component.\n *\n * @param props - Component props.\n * @param props.label - The label content to display.\n * @param props.tooltip - Optional tooltip to render to the right of the label.\n *\n * @returns The rendered KeyValueRowLabel component.\n */\nconst KeyValueRowLabel: React.FC<KeyValueRowLabelProps> = ({\n  label,\n  tooltip,\n}) => {\n  const tw = useTailwind();\n\n  const hasTooltip = Boolean(tooltip?.title && tooltip?.content);\n\n  return (\n    <View style={tw.style('flex-row items-center')}>\n      {isPreDefinedKeyValueRowLabel(label) ? (\n        <Text\n          variant={label.variant ?? TextVariant.BodyMd}\n          color={label.color ?? TextColor.TextDefault}\n        >\n          {label.text}\n        </Text>\n      ) : (\n        label\n      )}\n      {hasTooltip && tooltip && (\n        <ButtonIcon\n          size={tooltip.size ?? ButtonIconSize.Md}\n          iconName={tooltip.iconName ?? IconName.Question}\n          accessibilityLabel={`${tooltip.title} tooltip`}\n          onPress={() => tooltip?.onPress?.()}\n        />\n      )}\n    </View>\n  );\n};\n\nexport default KeyValueRowLabel;\n"]}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { KeyValueRowLabelProps } from "../KeyValueRow.types.cjs";
+/**
+ * A label and optional tooltip button component.
+ *
+ * @param props - Component props.
+ * @param props.label - The label content to display.
+ * @param props.tooltip - Optional tooltip to render to the right of the label.
+ *
+ * @returns The rendered KeyValueRowLabel component.
+ */
+declare const KeyValueRowLabel: React.FC<KeyValueRowLabelProps>;
+export default KeyValueRowLabel;
+//# sourceMappingURL=KeyValueLabel.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueLabel.d.cts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,iCAA6B;AAGlE;;;;;;;;GAQG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8BrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { KeyValueRowLabelProps } from "../KeyValueRow.types.mjs";
+/**
+ * A label and optional tooltip button component.
+ *
+ * @param props - Component props.
+ * @param props.label - The label content to display.
+ * @param props.tooltip - Optional tooltip to render to the right of the label.
+ *
+ * @returns The rendered KeyValueRowLabel component.
+ */
+declare const KeyValueRowLabel: React.FC<KeyValueRowLabelProps>;
+export default KeyValueRowLabel;
+//# sourceMappingURL=KeyValueLabel.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueLabel.d.mts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,iCAA6B;AAGlE;;;;;;;;GAQG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8BrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/KeyValueRow/KeyValueLabel/KeyValueLabel.mjs

@@ -0,0 +1,35 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { View } from "react-native/index.js";
+import { ButtonIcon, ButtonIconSize } from "../../ButtonIcon/index.mjs";
+import { IconName } from "../../Icon/index.mjs";
+import { Text, TextColor, TextVariant } from "../../Text/index.mjs";
+import { isPreDefinedKeyValueRowLabel } from "../KeyValueRow.utils.mjs";
+/**
+ * A label and optional tooltip button component.
+ *
+ * @param props - Component props.
+ * @param props.label - The label content to display.
+ * @param props.tooltip - Optional tooltip to render to the right of the label.
+ *
+ * @returns The rendered KeyValueRowLabel component.
+ */
+const KeyValueRowLabel = ({ label, tooltip, }) => {
+    const tw = useTailwind();
+    const hasTooltip = Boolean(tooltip?.title && tooltip?.content);
+    return (<View style={tw.style('flex-row items-center')}>
+      {isPreDefinedKeyValueRowLabel(label) ? (<Text variant={label.variant ?? TextVariant.BodyMd} color={label.color ?? TextColor.TextDefault}>
+          {label.text}
+        </Text>) : (label)}
+      {hasTooltip && tooltip && (<ButtonIcon size={tooltip.size ?? ButtonIconSize.Md} iconName={tooltip.iconName ?? IconName.Question} accessibilityLabel={`${tooltip.title} tooltip`} onPress={() => tooltip?.onPress?.()}/>)}
+    </View>);
+};
+export default KeyValueRowLabel;
+//# sourceMappingURL=KeyValueLabel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueLabel.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mCAAyB;AAC9D,OAAO,EAAE,QAAQ,EAAE,6BAAmB;AACtC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,6BAAmB;AAE1D,OAAO,EAAE,4BAA4B,EAAE,iCAA6B;AAEpE;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,KAAK,EACL,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,OAAO,CAAC,CAAC;IAE/D,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAC7C;MAAA,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrC,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,MAAM,CAAC,CAC7C,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,CAAC,CAE5C;UAAA,CAAC,KAAK,CAAC,IAAI,CACb;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CACD;MAAA,CAAC,UAAU,IAAI,OAAO,IAAI,CACxB,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,cAAc,CAAC,EAAE,CAAC,CACxC,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAChD,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,UAAU,CAAC,CAC/C,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,EACpC,CACH,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { ButtonIcon, ButtonIconSize } from '../../ButtonIcon';\nimport { IconName } from '../../Icon';\nimport { Text, TextColor, TextVariant } from '../../Text';\nimport type { KeyValueRowLabelProps } from '../KeyValueRow.types';\nimport { isPreDefinedKeyValueRowLabel } from '../KeyValueRow.utils';\n\n/**\n * A label and optional tooltip button component.\n *\n * @param props - Component props.\n * @param props.label - The label content to display.\n * @param props.tooltip - Optional tooltip to render to the right of the label.\n *\n * @returns The rendered KeyValueRowLabel component.\n */\nconst KeyValueRowLabel: React.FC<KeyValueRowLabelProps> = ({\n  label,\n  tooltip,\n}) => {\n  const tw = useTailwind();\n\n  const hasTooltip = Boolean(tooltip?.title && tooltip?.content);\n\n  return (\n    <View style={tw.style('flex-row items-center')}>\n      {isPreDefinedKeyValueRowLabel(label) ? (\n        <Text\n          variant={label.variant ?? TextVariant.BodyMd}\n          color={label.color ?? TextColor.TextDefault}\n        >\n          {label.text}\n        </Text>\n      ) : (\n        label\n      )}\n      {hasTooltip && tooltip && (\n        <ButtonIcon\n          size={tooltip.size ?? ButtonIconSize.Md}\n          iconName={tooltip.iconName ?? IconName.Question}\n          accessibilityLabel={`${tooltip.title} tooltip`}\n          onPress={() => tooltip?.onPress?.()}\n        />\n      )}\n    </View>\n  );\n};\n\nexport default KeyValueRowLabel;\n"]}

package/dist/components/KeyValueRow/KeyValueRoot/KeyValueRoot.cjs

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/**
+ * The main container for the KeyValueRow component.
+ * When creating custom KeyValueRow components, this must be the outermost component
+ * wrapping the two <KeyValueSection/> components.
+ *
+ * e.g.
+ * ```
+ * <KeyValueRowRoot>
+ *  <KeyValueSection></KeyValueSection>
+ *  <KeyValueSection></KeyValueSection>
+ * </KeyValueRowRoot>
+ * ```
+ *
+ * @param props - Component props.
+ * @param props.children - The two <KeyValueSection> children.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered Root component.
+ */
+const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    return (<react_native_1.View style={[
+            tw.style('flex-row justify-between items-center overflow-hidden', twClassName),
+            style,
+        ]} {...props}>
+      {children}
+    </react_native_1.View>);
+};
+exports.default = KeyValueRowRoot;
+//# sourceMappingURL=KeyValueRoot.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueRoot.cjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":";;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAoC;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uDAAuD,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { KeyValueRowRootProps } from '../KeyValueRow.types';\n\n/**\n * The main container for the KeyValueRow component.\n * When creating custom KeyValueRow components, this must be the outermost component\n * wrapping the two <KeyValueSection/> components.\n *\n * e.g.\n * ```\n * <KeyValueRowRoot>\n *  <KeyValueSection></KeyValueSection>\n *  <KeyValueSection></KeyValueSection>\n * </KeyValueRowRoot>\n * ```\n *\n * @param props - Component props.\n * @param props.children - The two <KeyValueSection> children.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered Root component.\n */\nconst KeyValueRowRoot: React.FC<KeyValueRowRootProps> = ({\n  children,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      style={[\n        tw.style(\n          'flex-row justify-between items-center overflow-hidden',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueRowRoot;\n"]}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { KeyValueRowRootProps } from "../KeyValueRow.types.cjs";
+/**
+ * The main container for the KeyValueRow component.
+ * When creating custom KeyValueRow components, this must be the outermost component
+ * wrapping the two <KeyValueSection/> components.
+ *
+ * e.g.
+ * ```
+ * <KeyValueRowRoot>
+ *  <KeyValueSection></KeyValueSection>
+ *  <KeyValueSection></KeyValueSection>
+ * </KeyValueRowRoot>
+ * ```
+ *
+ * @param props - Component props.
+ * @param props.children - The two <KeyValueSection> children.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered Root component.
+ */
+declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
+export default KeyValueRowRoot;
+//# sourceMappingURL=KeyValueRoot.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueRoot.d.cts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { KeyValueRowRootProps } from "../KeyValueRow.types.mjs";
+/**
+ * The main container for the KeyValueRow component.
+ * When creating custom KeyValueRow components, this must be the outermost component
+ * wrapping the two <KeyValueSection/> components.
+ *
+ * e.g.
+ * ```
+ * <KeyValueRowRoot>
+ *  <KeyValueSection></KeyValueSection>
+ *  <KeyValueSection></KeyValueSection>
+ * </KeyValueRowRoot>
+ * ```
+ *
+ * @param props - Component props.
+ * @param props.children - The two <KeyValueSection> children.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered Root component.
+ */
+declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
+export default KeyValueRowRoot;
+//# sourceMappingURL=KeyValueRoot.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueRoot.d.mts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsBnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/KeyValueRow/KeyValueRoot/KeyValueRoot.mjs

@@ -0,0 +1,41 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { View } from "react-native/index.js";
+/**
+ * The main container for the KeyValueRow component.
+ * When creating custom KeyValueRow components, this must be the outermost component
+ * wrapping the two <KeyValueSection/> components.
+ *
+ * e.g.
+ * ```
+ * <KeyValueRowRoot>
+ *  <KeyValueSection></KeyValueSection>
+ *  <KeyValueSection></KeyValueSection>
+ * </KeyValueRowRoot>
+ * ```
+ *
+ * @param props - Component props.
+ * @param props.children - The two <KeyValueSection> children.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered Root component.
+ */
+const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
+    const tw = useTailwind();
+    return (<View style={[
+            tw.style('flex-row justify-between items-center overflow-hidden', twClassName),
+            style,
+        ]} {...props}>
+      {children}
+    </View>);
+};
+export default KeyValueRowRoot;
+//# sourceMappingURL=KeyValueRoot.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueRoot.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uDAAuD,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { KeyValueRowRootProps } from '../KeyValueRow.types';\n\n/**\n * The main container for the KeyValueRow component.\n * When creating custom KeyValueRow components, this must be the outermost component\n * wrapping the two <KeyValueSection/> components.\n *\n * e.g.\n * ```\n * <KeyValueRowRoot>\n *  <KeyValueSection></KeyValueSection>\n *  <KeyValueSection></KeyValueSection>\n * </KeyValueRowRoot>\n * ```\n *\n * @param props - Component props.\n * @param props.children - The two <KeyValueSection> children.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered Root component.\n */\nconst KeyValueRowRoot: React.FC<KeyValueRowRootProps> = ({\n  children,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      style={[\n        tw.style(\n          'flex-row justify-between items-center overflow-hidden',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueRowRoot;\n"]}

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValueRowStubs = void 0;
+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 = __importDefault(require("./KeyValueLabel/KeyValueLabel.cjs"));
+const KeyValueRoot_1 = __importDefault(require("./KeyValueRoot/KeyValueRoot.cjs"));
+const KeyValueRow_types_1 = require("./KeyValueRow.types.cjs");
+const KeyValueSection_1 = __importDefault(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 tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const fieldIcon = field?.icon;
+    const valueIcon = value?.icon;
+    return (<KeyValueRoot_1.default twClassName={twClassName} style={style} {...props}>
+      <KeyValueSection_1.default>
+        <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.default 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.default>
+      <KeyValueSection_1.default 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.default 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.default>
+    </KeyValueRoot_1.default>);
+};
+KeyValueRow.displayName = 'KeyValueRow';
+/**
+ * Exported sub-components to provide a base for new KeyValueRow variants.
+ */
+exports.KeyValueRowStubs = {
+    Root: KeyValueRoot_1.default,
+    Section: KeyValueSection_1.default,
+    Label: KeyValueLabel_1.default,
+};
+exports.default = KeyValueRow;
+//# sourceMappingURL=KeyValueRow.cjs.map

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

@@ -0,0 +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 */\nconst 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\nexport default KeyValueRow;\n"]}

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

@@ -0,0 +1,25 @@
+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.
+ */
+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 default KeyValueRow;
+//# sourceMappingURL=KeyValueRow.d.cts.map

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

@@ -0,0 +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,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4C3C,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,25 @@
+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.
+ */
+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 default KeyValueRow;
+//# sourceMappingURL=KeyValueRow.d.mts.map

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

@@ -0,0 +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,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4C3C,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAe,WAAW,CAAC"}