@metamask-previews/design-system-react-native 0.19.0-preview.1679aa9 → 0.24.0-preview.178e60f

package/dist/components/Input/Input.cjs

@@ -8,10 +8,11 @@ const react_1 = require("react");
 const react_native_1 = require("react-native/index.js");
 const Text_constants_1 = require("../Text/Text.constants.cjs");
 const Input_constants_1 = require("./Input.constants.cjs");
-exports.Input = (0, react_1.forwardRef)(({ style, textVariant = design_system_shared_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
+exports.Input = (0, react_1.forwardRef)(({ style, textVariant = design_system_shared_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadOnly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, multiline, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(autoFocus);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const theme = (0, design_system_twrnc_preset_1.useTheme)();
+    const isMultiline = multiline === true;
     const placeholderTextColor = (0, react_1.useMemo)(() => theme === design_system_twrnc_preset_1.Theme.Light
         ? design_tokens_1.lightTheme.colors.text.alternative
         : design_tokens_1.darkTheme.colors.text.alternative, [theme]);
@@ -23,7 +24,14 @@ exports.Input = (0, react_1.forwardRef)(({ style, textVariant = design_system_sh
     // 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 = (0, react_1.useMemo)(() => tw.style(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+    // Multiline field styles
+    const multilineChromeStyle = (0, react_1.useMemo)(() => tw.style('text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+        !isDisabled &&
+        isFocused &&
+        'border-primary-default', twClassName), [isStateStylesDisabled, isDisabled, isFocused, twClassName, tw]);
+    const multilineTypographyStyle = (0, react_1.useMemo)(() => tw.style(`text-${textVariant}`, fontClass), [textVariant, fontClass, tw]);
+    // Single-line field styles
+    const singleLineChromeStyle = (0, react_1.useMemo)(() => tw.style(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
         !isDisabled &&
         isFocused &&
         'border-primary-default', twClassName), [
@@ -34,31 +42,33 @@ exports.Input = (0, react_1.forwardRef)(({ style, textVariant = design_system_sh
         twClassName,
         tw,
     ]);
-    const variantTextStyle = (0, react_1.useMemo)(() => Input_constants_1.MAP_TEXT_VARIANT_INPUT_METRICS[textVariant], [textVariant]);
-    /* istanbul ignore next: handler body covered by focus/blur tests */
-    const onBlurHandler = (0, react_1.useCallback)((e) => {
-        if (!isDisabled) {
+    const singleLineTypographyStyle = (0, react_1.useMemo)(() => Input_constants_1.MAP_TEXT_VARIANT_INPUT_METRICS[textVariant], [textVariant]);
+    // iOS-only single-line placeholder fix: native TextInput can render
+    // placeholder text vertically offset. Do not use on Android (lineHeight 0
+    // collapses text) or on multiline (breaks paragraph layout).
+    const iosSingleLinePlaceholderLineHeightFix = react_native_1.Platform.OS === 'ios' &&
+        isPlaceholderVisible && { lineHeight: 0 };
+    const resolvedStyle = (isMultiline
+        ? [multilineChromeStyle, multilineTypographyStyle, style]
+        : [
+            singleLineChromeStyle,
+            singleLineTypographyStyle,
+            iosSingleLinePlaceholderLineHeightFix,
+            style,
+        ]).filter(Boolean);
+    (0, react_1.useEffect)(() => {
+        if (isDisabled || isReadOnly) {
             setIsFocused(false);
-            onBlur?.(e);
         }
-    }, [isDisabled, onBlur]);
-    /* istanbul ignore next: handler body covered by focus/blur tests */
+    }, [isDisabled, isReadOnly]);
+    const onBlurHandler = (0, react_1.useCallback)((e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
     const onFocusHandler = (0, react_1.useCallback)((e) => {
-        if (!isDisabled) {
-            setIsFocused(true);
-            onFocus?.(e);
-        }
-    }, [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.
-        react_native_1.Platform.OS === 'ios' &&
-            isPlaceholderVisible && { lineHeight: 0 },
-        style,
-    ].filter(Boolean);
-    return (<react_native_1.TextInput ref={ref} placeholderTextColor={placeholderTextColor} {...props} placeholder={placeholder} value={value} style={resolvedStyle} editable={!isDisabled && !isReadonly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+    return (<react_native_1.TextInput ref={ref} {...props} multiline={multiline} placeholder={placeholder} placeholderTextColor={placeholderTextColor} value={value} style={resolvedStyle} editable={!isDisabled && !isReadOnly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);
 });
 //# sourceMappingURL=Input.cjs.map

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontFamily, TextVariant } from '@metamask-previews/design-system-shared';\nimport {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport {\n  TWCLASSMAP_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 = TWCLASSMAP_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"]}
+{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontFamily, TextVariant } from '@metamask-previews/design-system-shared';\nimport {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport {\n  TWCLASSMAP_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      multiline,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n    const isMultiline = multiline === true;\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 = TWCLASSMAP_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    // Multiline field styles\n    const multilineChromeStyle = useMemo(\n      () =>\n        tw.style(\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      [isStateStylesDisabled, isDisabled, isFocused, twClassName, tw],\n    );\n    const multilineTypographyStyle = useMemo(\n      () => tw.style(`text-${textVariant}`, fontClass),\n      [textVariant, fontClass, tw],\n    );\n\n    // Single-line field styles\n    const singleLineChromeStyle = 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    const singleLineTypographyStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n    // iOS-only single-line placeholder fix: native TextInput can render\n    // placeholder text vertically offset. Do not use on Android (lineHeight 0\n    // collapses text) or on multiline (breaks paragraph layout).\n    const iosSingleLinePlaceholderLineHeightFix = Platform.OS === 'ios' &&\n      isPlaceholderVisible && { lineHeight: 0 as const };\n\n    const resolvedStyle = (\n      isMultiline\n        ? [multilineChromeStyle, multilineTypographyStyle, style]\n        : [\n            singleLineChromeStyle,\n            singleLineTypographyStyle,\n            iosSingleLinePlaceholderLineHeightFix,\n            style,\n          ]\n    ).filter(Boolean);\n\n    useEffect(() => {\n      if (isDisabled || isReadOnly) {\n        setIsFocused(false);\n      }\n    }, [isDisabled, isReadOnly]);\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    return (\n      <TextInput\n        ref={ref}\n        {...props}\n        multiline={multiline}\n        placeholder={placeholder}\n        placeholderTextColor={placeholderTextColor}\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/Input/Input.d.cts

@@ -1,12 +1,6 @@
 /// <reference types="react" />
-import { TextVariant } from "@metamask-previews/design-system-shared";
 import { TextInput } from "react-native/index.js";
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "editable" | "defaultValue"> & {
-    value: string;
-    textVariant?: TextVariant | undefined;
-    isDisabled?: boolean | undefined;
-    isReadonly?: boolean | undefined;
-    isStateStylesDisabled?: boolean | undefined;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "editable" | "defaultValue"> & import("@metamask-previews/design-system-shared").InputPropsShared & {
     twClassName?: string | undefined;
 } & import("react").RefAttributes<TextInput>>;
 //# sourceMappingURL=Input.d.cts.map

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":";AAAA,OAAO,EAAc,WAAW,EAAE,gDAAgD;AAQlF,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAUnD,eAAO,MAAM,KAAK;;;;;;;6CAqHjB,CAAC"}
+{"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAUnD,eAAO,MAAM,KAAK;;6CAoJjB,CAAC"}

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

@@ -1,12 +1,6 @@
 /// <reference types="react" />
-import { TextVariant } from "@metamask-previews/design-system-shared";
 import { TextInput } from "react-native/index.js";
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "editable" | "defaultValue"> & {
-    value: string;
-    textVariant?: TextVariant | undefined;
-    isDisabled?: boolean | undefined;
-    isReadonly?: boolean | undefined;
-    isStateStylesDisabled?: boolean | undefined;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "value" | "editable" | "defaultValue"> & import("@metamask-previews/design-system-shared").InputPropsShared & {
     twClassName?: string | undefined;
 } & import("react").RefAttributes<TextInput>>;
 //# sourceMappingURL=Input.d.mts.map

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":";AAAA,OAAO,EAAc,WAAW,EAAE,gDAAgD;AAQlF,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAUnD,eAAO,MAAM,KAAK;;;;;;;6CAqHjB,CAAC"}
+{"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAUnD,eAAO,MAAM,KAAK;;6CAoJjB,CAAC"}

package/dist/components/Input/Input.mjs

@@ -1,14 +1,15 @@
 import { FontFamily, TextVariant } from "@metamask-previews/design-system-shared";
 import { Theme, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
 import { darkTheme, lightTheme } from "@metamask-previews/design-tokens";
-import { forwardRef, useCallback, useMemo, useState } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, TextInput } from "react-native/index.js";
 import { TWCLASSMAP_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) => {
+export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadOnly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, multiline, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(autoFocus);
     const tw = useTailwind();
     const theme = useTheme();
+    const isMultiline = multiline === true;
     const placeholderTextColor = useMemo(() => theme === Theme.Light
         ? lightTheme.colors.text.alternative
         : darkTheme.colors.text.alternative, [theme]);
@@ -20,7 +21,14 @@ 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(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+    // Multiline field styles
+    const multilineChromeStyle = useMemo(() => tw.style('text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+        !isDisabled &&
+        isFocused &&
+        'border-primary-default', twClassName), [isStateStylesDisabled, isDisabled, isFocused, twClassName, tw]);
+    const multilineTypographyStyle = useMemo(() => tw.style(`text-${textVariant}`, fontClass), [textVariant, fontClass, tw]);
+    // Single-line field styles
+    const singleLineChromeStyle = useMemo(() => tw.style(fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
         !isDisabled &&
         isFocused &&
         'border-primary-default', twClassName), [
@@ -31,31 +39,33 @@ 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) {
+    const singleLineTypographyStyle = useMemo(() => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant], [textVariant]);
+    // iOS-only single-line placeholder fix: native TextInput can render
+    // placeholder text vertically offset. Do not use on Android (lineHeight 0
+    // collapses text) or on multiline (breaks paragraph layout).
+    const iosSingleLinePlaceholderLineHeightFix = Platform.OS === 'ios' &&
+        isPlaceholderVisible && { lineHeight: 0 };
+    const resolvedStyle = (isMultiline
+        ? [multilineChromeStyle, multilineTypographyStyle, style]
+        : [
+            singleLineChromeStyle,
+            singleLineTypographyStyle,
+            iosSingleLinePlaceholderLineHeightFix,
+            style,
+        ]).filter(Boolean);
+    useEffect(() => {
+        if (isDisabled || isReadOnly) {
             setIsFocused(false);
-            onBlur?.(e);
         }
-    }, [isDisabled, onBlur]);
-    /* istanbul ignore next: handler body covered by focus/blur tests */
+    }, [isDisabled, isReadOnly]);
+    const onBlurHandler = useCallback((e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
     const onFocusHandler = useCallback((e) => {
-        if (!isDisabled) {
-            setIsFocused(true);
-            onFocus?.(e);
-        }
-    }, [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 },
-        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}/>);
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+    return (<TextInput ref={ref} {...props} multiline={multiline} placeholder={placeholder} placeholderTextColor={placeholderTextColor} value={value} style={resolvedStyle} editable={!isDisabled && !isReadOnly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);
 });
 //# sourceMappingURL=Input.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,gDAAgD;AAClF,OAAO,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACT,sDAAsD;AACvD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,yCAAyC;AACzE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc;AACnE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EACL,kCAAkC,EAClC,0BAA0B,EAC3B,mCAA+B;AAEhC,OAAO,EAAE,8BAA8B,EAAE,8BAA0B;AAGnE,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,KAAK,EACL,WAAW,GAAG,WAAW,CAAC,MAAM,EAChC,qBAAqB,EACrB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,EACX,WAAW,EACX,MAAM,EACN,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,OAAO,CAClC,GAAG,EAAE,CACH,KAAK,KAAK,KAAK,CAAC,KAAK;QACnB,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EACvC,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,eAAe,GAAG,kCAAkC,CAAC,WAAW,CAAC,CAAC;IACxE,MAAM,UAAU,GAAG,0BAA0B,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,QAAQ,UAAU,CAAC,OAAO,GAAG,UAAU,EAAE,CAAC;IAC5D,MAAM,cAAc,GAClB,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,CAAC;IAC1E,wEAAwE;IACxE,0EAA0E;IAC1E,wEAAwE;IACxE,MAAM,oBAAoB,GAAG,cAAc,IAAI,KAAK,KAAK,EAAE,CAAC;IAE5D,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CACH,EAAE,CAAC,KAAK,CACN,SAAS,EACT,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,oBAAoB,EACpB,CAAC,qBAAqB,IAAI,UAAU,IAAI,YAAY,EACpD,CAAC,qBAAqB;QACpB,CAAC,UAAU;QACX,SAAS;QACT,wBAAwB,EAC1B,WAAW,CACZ,EACH;QACE,SAAS;QACT,qBAAqB;QACrB,UAAU;QACV,SAAS;QACT,WAAW;QACX,EAAE;KACH,CACF,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,8BAA8B,CAAC,WAAW,CAAC,EACjD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,oEAAoE;IACpE,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAmD,EAAE,EAAE;QACtD,IAAI,CAAC,UAAU,EAAE;YACf,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,CAAC,CACrB,CAAC;IAEF,oEAAoE;IACpE,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAoD,EAAE,EAAE;QACvD,IAAI,CAAC,UAAU,EAAE;YACf,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;SACd;IACH,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACtB,CAAC;IACF,MAAM,aAAa,GAAG;QACpB,UAAU;QACV,gBAAgB;QAChB,iEAAiE;QACjE,2DAA2D;QAC3D,yEAAyE;QACzE,QAAQ,CAAC,EAAE,KAAK,KAAK;YACnB,oBAAoB,IAAI,EAAE,UAAU,EAAE,CAAU,EAAE;QACpD,KAAK;KACN,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,OAAO,CACL,CAAC,SAAS,CACR,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,IAAI,KAAK,CAAC,CACV,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,aAAa,CAAC,CACrB,QAAQ,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,CACrC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,aAAa,CAAC,CACtB,OAAO,CAAC,CAAC,cAAc,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { FontFamily, TextVariant } from '@metamask-previews/design-system-shared';\nimport {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport {\n  TWCLASSMAP_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 = TWCLASSMAP_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"]}
+{"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontFamily, TextVariant } from '@metamask-previews/design-system-shared';\nimport {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport {\n  TWCLASSMAP_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      multiline,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n    const isMultiline = multiline === true;\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 = TWCLASSMAP_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    // Multiline field styles\n    const multilineChromeStyle = useMemo(\n      () =>\n        tw.style(\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      [isStateStylesDisabled, isDisabled, isFocused, twClassName, tw],\n    );\n    const multilineTypographyStyle = useMemo(\n      () => tw.style(`text-${textVariant}`, fontClass),\n      [textVariant, fontClass, tw],\n    );\n\n    // Single-line field styles\n    const singleLineChromeStyle = 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    const singleLineTypographyStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n    // iOS-only single-line placeholder fix: native TextInput can render\n    // placeholder text vertically offset. Do not use on Android (lineHeight 0\n    // collapses text) or on multiline (breaks paragraph layout).\n    const iosSingleLinePlaceholderLineHeightFix = Platform.OS === 'ios' &&\n      isPlaceholderVisible && { lineHeight: 0 as const };\n\n    const resolvedStyle = (\n      isMultiline\n        ? [multilineChromeStyle, multilineTypographyStyle, style]\n        : [\n            singleLineChromeStyle,\n            singleLineTypographyStyle,\n            iosSingleLinePlaceholderLineHeightFix,\n            style,\n          ]\n    ).filter(Boolean);\n\n    useEffect(() => {\n      if (isDisabled || isReadOnly) {\n        setIsFocused(false);\n      }\n    }, [isDisabled, isReadOnly]);\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    return (\n      <TextInput\n        ref={ref}\n        {...props}\n        multiline={multiline}\n        placeholder={placeholder}\n        placeholderTextColor={placeholderTextColor}\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/Input/Input.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.types.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextVariant } from '@metamask-previews/design-system-shared';\nimport type { TextInputProps } from 'react-native';\n\nexport type InputProps = Omit<\n  TextInputProps,\n  'editable' | 'value' | 'defaultValue'\n> & {\n  /**\n   * Controlled value for Input.\n   */\n  value: string;\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMd\n   */\n  textVariant?: TextVariant;\n  /**\n   * Optional boolean to disable Input.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional boolean to show readonly input.\n   *\n   * @default false\n   */\n  isReadonly?: boolean;\n  /**\n   * Optional boolean to disable state styles.\n   *\n   * @default false\n   */\n  isStateStylesDisabled?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n};\n"]}
+{"version":3,"file":"Input.types.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { InputPropsShared } from '@metamask-previews/design-system-shared';\nimport type { TextInputProps } from 'react-native';\n\nexport type InputProps = Omit<\n  TextInputProps,\n  'editable' | 'value' | 'defaultValue'\n> &\n  InputPropsShared & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

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

@@ -1,34 +1,6 @@
-import type { TextVariant } from "@metamask-previews/design-system-shared";
+import type { InputPropsShared } from "@metamask-previews/design-system-shared";
 import type { TextInputProps } from "react-native/index.js";
-export type InputProps = Omit<TextInputProps, 'editable' | 'value' | 'defaultValue'> & {
-    /**
-     * Controlled value for Input.
-     */
-    value: string;
-    /**
-     * Optional enum to select between Typography variants.
-     *
-     * @default BodyMd
-     */
-    textVariant?: TextVariant;
-    /**
-     * Optional boolean to disable Input.
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Optional boolean to show readonly input.
-     *
-     * @default false
-     */
-    isReadonly?: boolean;
-    /**
-     * Optional boolean to disable state styles.
-     *
-     * @default false
-     */
-    isStateStylesDisabled?: boolean;
+export type InputProps = Omit<TextInputProps, 'editable' | 'value' | 'defaultValue'> & InputPropsShared & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Input.types.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gDAAgD;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACd,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GAAG;IACF;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Input.types.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACd,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GACC,gBAAgB,GAAG;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1,34 +1,6 @@
-import type { TextVariant } from "@metamask-previews/design-system-shared";
+import type { InputPropsShared } from "@metamask-previews/design-system-shared";
 import type { TextInputProps } from "react-native/index.js";
-export type InputProps = Omit<TextInputProps, 'editable' | 'value' | 'defaultValue'> & {
-    /**
-     * Controlled value for Input.
-     */
-    value: string;
-    /**
-     * Optional enum to select between Typography variants.
-     *
-     * @default BodyMd
-     */
-    textVariant?: TextVariant;
-    /**
-     * Optional boolean to disable Input.
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Optional boolean to show readonly input.
-     *
-     * @default false
-     */
-    isReadonly?: boolean;
-    /**
-     * Optional boolean to disable state styles.
-     *
-     * @default false
-     */
-    isStateStylesDisabled?: boolean;
+export type InputProps = Omit<TextInputProps, 'editable' | 'value' | 'defaultValue'> & InputPropsShared & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Input.types.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gDAAgD;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACd,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GAAG;IACF;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Input.types.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gDAAgD;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,cAAc,EACd,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GACC,gBAAgB,GAAG;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.types.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextVariant } from '@metamask-previews/design-system-shared';\nimport type { TextInputProps } from 'react-native';\n\nexport type InputProps = Omit<\n  TextInputProps,\n  'editable' | 'value' | 'defaultValue'\n> & {\n  /**\n   * Controlled value for Input.\n   */\n  value: string;\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMd\n   */\n  textVariant?: TextVariant;\n  /**\n   * Optional boolean to disable Input.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional boolean to show readonly input.\n   *\n   * @default false\n   */\n  isReadonly?: boolean;\n  /**\n   * Optional boolean to disable state styles.\n   *\n   * @default false\n   */\n  isStateStylesDisabled?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n};\n"]}
+{"version":3,"file":"Input.types.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { InputPropsShared } from '@metamask-previews/design-system-shared';\nimport type { TextInputProps } from 'react-native';\n\nexport type InputProps = Omit<\n  TextInputProps,\n  'editable' | 'value' | 'defaultValue'\n> &\n  InputPropsShared & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

package/dist/components/KeyValueColumn/KeyValueColumn.cjs

@@ -12,9 +12,9 @@ const BoxRow_1 = require("../BoxRow/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const KeyValueColumn = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, twClassName, ...viewProps }) => {
     const keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
-        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} iconProps={{ color: types_1.IconColor.IconAlternative }} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName}/>) : (keyEndAccessory);
+        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} iconProps={{ color: types_1.IconColor.IconAlternative }} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName}/>) : (keyEndAccessory);
     const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
-        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} iconProps={{ color: types_1.IconColor.IconDefault }} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName}/>) : (valueEndAccessory);
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} iconProps={{ color: types_1.IconColor.IconDefault }} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName}/>) : (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,

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAIiD;AACjD,kDAA0B;AAE1B,iDAAwD;AACxD,sDAAyC;AACzC,gDAAmC;AACnC,wDAA2C;AAIpC,MAAM,cAAc,GAAG,CAAC,EAC7B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,sBAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,eAAe,EAAE,CAAC,CAChD,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACzC,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,uBAAU,CACT,IAAI,CAAC,CAAC,sBAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,WAAW,EAAE,CAAC,CAC5C,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAC3C,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,qBAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AArFW,QAAA,cAAc,kBAqFzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import {\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { ButtonIconSize, IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}
+{"version":3,"file":"KeyValueColumn.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAKiD;AACjD,kDAA0B;AAE1B,iDAAwC;AACxC,sDAAyC;AACzC,gDAAmC;AACnC,wDAA2C;AAIpC,MAAM,cAAc,GAAG,CAAC,EAC7B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,qCAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,eAAe,EAAE,CAAC,CAChD,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACzC,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,uBAAU,CACT,IAAI,CAAC,CAAC,qCAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,WAAW,EAAE,CAAC,CAC5C,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAC3C,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,qBAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AArFW,QAAA,cAAc,kBAqFzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}
+{"version":3,"file":"KeyValueColumn.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}
+{"version":3,"file":"KeyValueColumn.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}

package/dist/components/KeyValueColumn/KeyValueColumn.mjs

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

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

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

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -14,12 +14,12 @@ 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 keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
-        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
+        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_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={{
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
             color: types_1.IconColor.IconDefault,
             ...valueEndButtonIconProps.iconProps,
         }}/>) : (valueEndAccessory);

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

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

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

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

package/dist/components/KeyValueRow/KeyValueRow.mjs

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