@metamask/design-system-react-native 0.37.0 → 0.38.1

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

@@ -1,5 +1,6 @@
 import type { ContentPropsShared } from "@metamask/design-system-shared";
 import type { BoxProps } from "../Box/Box.types.cjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.cjs";
 import type { TextProps } from "../Text/Text.types.cjs";
 /**
  * Content component props.
@@ -13,19 +14,22 @@ export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
      */
     titleProps?: Partial<Omit<TextProps, 'children'>>;
     /**
-     * Optional props for the description Text when `description` is a string.
+     * Optional props for the description SensitiveText when `description` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
      */
-    descriptionProps?: Partial<Omit<TextProps, 'children'>>;
+    descriptionProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /**
-     * Optional props for the value Text when `value` is a string.
+     * Optional props for the value SensitiveText when `value` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
      */
-    valueProps?: Partial<Omit<TextProps, 'children'>>;
+    valueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /**
-     * Optional props for the subvalue Text when `subvalue` is a string.
+     * Optional props for the subvalue SensitiveText when `subvalue` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
      */
-    subvalueProps?: Partial<Omit<TextProps, 'children'>>;
+    subvalueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
 };
 //# sourceMappingURL=Content.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.types.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;CACtD,CAAC"}
+{"version":3,"file":"Content.types.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IACjE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAC3D;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;CAC/D,CAAC"}

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

@@ -1,5 +1,6 @@
 import type { ContentPropsShared } from "@metamask/design-system-shared";
 import type { BoxProps } from "../Box/Box.types.mjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.mjs";
 import type { TextProps } from "../Text/Text.types.mjs";
 /**
  * Content component props.
@@ -13,19 +14,22 @@ export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
      */
     titleProps?: Partial<Omit<TextProps, 'children'>>;
     /**
-     * Optional props for the description Text when `description` is a string.
+     * Optional props for the description SensitiveText when `description` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
      */
-    descriptionProps?: Partial<Omit<TextProps, 'children'>>;
+    descriptionProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /**
-     * Optional props for the value Text when `value` is a string.
+     * Optional props for the value SensitiveText when `value` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
      */
-    valueProps?: Partial<Omit<TextProps, 'children'>>;
+    valueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /**
-     * Optional props for the subvalue Text when `subvalue` is a string.
+     * Optional props for the subvalue SensitiveText when `subvalue` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
      */
-    subvalueProps?: Partial<Omit<TextProps, 'children'>>;
+    subvalueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
 };
 //# sourceMappingURL=Content.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.types.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;CACtD,CAAC"}
+{"version":3,"file":"Content.types.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IACjE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAC3D;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;CAC/D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.types.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description Text when `description` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the value Text when `value` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue Text when `subvalue` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n  };\n"]}
+{"version":3,"file":"Content.types.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { SensitiveTextProps } from '../SensitiveText';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description SensitiveText when `description` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n    /**\n     * Optional props for the value SensitiveText when `value` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue SensitiveText when `subvalue` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n  };\n"]}

package/dist/components/HelpText/HelpText.cjs

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpText = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
+const IconAlert_1 = require("../IconAlert/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const HelpText_constants_1 = require("./HelpText.constants.cjs");
+const HelpText = ({ severity, showIcon = false, color = design_system_shared_1.TextColor.TextDefault, twClassName, style, testID, children, ...props }) => {
+    const textColor = severity ? HelpText_constants_1.MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;
+    if (!(showIcon && severity)) {
+        return (<Text_1.Text variant={design_system_shared_1.TextVariant.BodySm} color={textColor} twClassName={twClassName} style={style} testID={testID} {...props}>
+        {children}
+      </Text_1.Text>);
+    }
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Center} gap={1} twClassName={twClassName} style={style} testID={testID}>
+      <IconAlert_1.IconAlert severity={severity} size={design_system_shared_1.IconSize.Sm} testID="help-text-icon"/>
+      <Text_1.Text variant={design_system_shared_1.TextVariant.BodySm} color={textColor} {...props}>
+        {children}
+      </Text_1.Text>
+    </Box_1.Box>);
+};
+exports.HelpText = HelpText;
+//# sourceMappingURL=HelpText.cjs.map

package/dist/components/HelpText/HelpText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAMwC;AACxC,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,4CAA+B;AAE/B,iEAAmE;AAG5D,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,gCAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,gDAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3E,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,EAAE;QAC3B,OAAO,CACL,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,WAAI,CAAC,CACR,CAAC;KACH;IAED,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,uCAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,oCAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,qBAAS,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,gBAAgB,EAEzB;MAAA,CAAC,WAAI,CAAC,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAC7D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,WAAI,CACR;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,QAAQ,YA8CnB","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { IconAlert } from '../IconAlert';\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n  severity,\n  showIcon = false,\n  color = TextColor.TextDefault,\n  twClassName,\n  style,\n  testID,\n  children,\n  ...props\n}) => {\n  const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;\n\n  if (!(showIcon && severity)) {\n    return (\n      <Text\n        variant={TextVariant.BodySm}\n        color={textColor}\n        twClassName={twClassName}\n        style={style}\n        testID={testID}\n        {...props}\n      >\n        {children}\n      </Text>\n    );\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={1}\n      twClassName={twClassName}\n      style={style}\n      testID={testID}\n    >\n      <IconAlert\n        severity={severity}\n        size={IconSize.Sm}\n        testID=\"help-text-icon\"\n      />\n      <Text variant={TextVariant.BodySm} color={textColor} {...props}>\n        {children}\n      </Text>\n    </Box>\n  );\n};\n"]}

package/dist/components/HelpText/HelpText.constants.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_HELPTEXT_SEVERITY_COLOR = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+exports.MAP_HELPTEXT_SEVERITY_COLOR = {
+    [design_system_shared_1.HelpTextSeverity.Danger]: design_system_shared_1.TextColor.ErrorDefault,
+    [design_system_shared_1.HelpTextSeverity.Warning]: design_system_shared_1.TextColor.WarningDefault,
+    [design_system_shared_1.HelpTextSeverity.Success]: design_system_shared_1.TextColor.SuccessDefault,
+    [design_system_shared_1.HelpTextSeverity.Info]: design_system_shared_1.TextColor.InfoDefault,
+};
+//# sourceMappingURL=HelpText.constants.cjs.map

package/dist/components/HelpText/HelpText.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.constants.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.constants.ts"],"names":[],"mappings":";;;AAAA,yEAA6E;AAEhE,QAAA,2BAA2B,GACtC;IACE,CAAC,uCAAgB,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IACjD,CAAC,uCAAgB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IACpD,CAAC,uCAAgB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IACpD,CAAC,uCAAgB,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC/C,CAAC","sourcesContent":["import { HelpTextSeverity, TextColor } from '@metamask/design-system-shared';\n\nexport const MAP_HELPTEXT_SEVERITY_COLOR: Record<HelpTextSeverity, TextColor> =\n  {\n    [HelpTextSeverity.Danger]: TextColor.ErrorDefault,\n    [HelpTextSeverity.Warning]: TextColor.WarningDefault,\n    [HelpTextSeverity.Success]: TextColor.SuccessDefault,\n    [HelpTextSeverity.Info]: TextColor.InfoDefault,\n  };\n"]}

package/dist/components/HelpText/HelpText.constants.d.cts

@@ -0,0 +1,3 @@
+import { HelpTextSeverity, TextColor } from "@metamask/design-system-shared";
+export declare const MAP_HELPTEXT_SEVERITY_COLOR: Record<HelpTextSeverity, TextColor>;
+//# sourceMappingURL=HelpText.constants.d.cts.map

package/dist/components/HelpText/HelpText.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.constants.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uCAAuC;AAE7E,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAMzE,CAAC"}

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

@@ -0,0 +1,3 @@
+import { HelpTextSeverity, TextColor } from "@metamask/design-system-shared";
+export declare const MAP_HELPTEXT_SEVERITY_COLOR: Record<HelpTextSeverity, TextColor>;
+//# sourceMappingURL=HelpText.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.constants.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uCAAuC;AAE7E,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAMzE,CAAC"}

package/dist/components/HelpText/HelpText.constants.mjs

@@ -0,0 +1,8 @@
+import { HelpTextSeverity, TextColor } from "@metamask/design-system-shared";
+export const MAP_HELPTEXT_SEVERITY_COLOR = {
+    [HelpTextSeverity.Danger]: TextColor.ErrorDefault,
+    [HelpTextSeverity.Warning]: TextColor.WarningDefault,
+    [HelpTextSeverity.Success]: TextColor.SuccessDefault,
+    [HelpTextSeverity.Info]: TextColor.InfoDefault,
+};
+//# sourceMappingURL=HelpText.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.constants.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uCAAuC;AAE7E,MAAM,CAAC,MAAM,2BAA2B,GACtC;IACE,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IACjD,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACpD,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACpD,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC/C,CAAC","sourcesContent":["import { HelpTextSeverity, TextColor } from '@metamask/design-system-shared';\n\nexport const MAP_HELPTEXT_SEVERITY_COLOR: Record<HelpTextSeverity, TextColor> =\n  {\n    [HelpTextSeverity.Danger]: TextColor.ErrorDefault,\n    [HelpTextSeverity.Warning]: TextColor.WarningDefault,\n    [HelpTextSeverity.Success]: TextColor.SuccessDefault,\n    [HelpTextSeverity.Info]: TextColor.InfoDefault,\n  };\n"]}

package/dist/components/HelpText/HelpText.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HelpTextProps } from "./HelpText.types.cjs";
+export declare const HelpText: React.FC<HelpTextProps>;
+//# sourceMappingURL=HelpText.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8C5C,CAAC"}

package/dist/components/HelpText/HelpText.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HelpTextProps } from "./HelpText.types.mjs";
+export declare const HelpText: React.FC<HelpTextProps>;
+//# sourceMappingURL=HelpText.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8C5C,CAAC"}

package/dist/components/HelpText/HelpText.mjs

@@ -0,0 +1,28 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { BoxAlignItems, BoxFlexDirection, IconSize, TextColor, TextVariant } from "@metamask/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
+import { IconAlert } from "../IconAlert/index.mjs";
+import { Text } from "../Text/index.mjs";
+import { MAP_HELPTEXT_SEVERITY_COLOR } from "./HelpText.constants.mjs";
+export const HelpText = ({ severity, showIcon = false, color = TextColor.TextDefault, twClassName, style, testID, children, ...props }) => {
+    const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;
+    if (!(showIcon && severity)) {
+        return (<Text variant={TextVariant.BodySm} color={textColor} twClassName={twClassName} style={style} testID={testID} {...props}>
+        {children}
+      </Text>);
+    }
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={1} twClassName={twClassName} style={style} testID={testID}>
+      <IconAlert severity={severity} size={IconSize.Sm} testID="help-text-icon"/>
+      <Text variant={TextVariant.BodySm} color={textColor} {...props}>
+        {children}
+      </Text>
+    </Box>);
+};
+//# sourceMappingURL=HelpText.mjs.map

package/dist/components/HelpText/HelpText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,2BAA2B,EAAE,iCAA6B;AAGnE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3E,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,EAAE;QAC3B,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;KACH;IAED,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,SAAS,CACR,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,gBAAgB,EAEzB;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAC7D;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { IconAlert } from '../IconAlert';\nimport { Text } from '../Text';\n\nimport { MAP_HELPTEXT_SEVERITY_COLOR } from './HelpText.constants';\nimport type { HelpTextProps } from './HelpText.types';\n\nexport const HelpText: React.FC<HelpTextProps> = ({\n  severity,\n  showIcon = false,\n  color = TextColor.TextDefault,\n  twClassName,\n  style,\n  testID,\n  children,\n  ...props\n}) => {\n  const textColor = severity ? MAP_HELPTEXT_SEVERITY_COLOR[severity] : color;\n\n  if (!(showIcon && severity)) {\n    return (\n      <Text\n        variant={TextVariant.BodySm}\n        color={textColor}\n        twClassName={twClassName}\n        style={style}\n        testID={testID}\n        {...props}\n      >\n        {children}\n      </Text>\n    );\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={1}\n      twClassName={twClassName}\n      style={style}\n      testID={testID}\n    >\n      <IconAlert\n        severity={severity}\n        size={IconSize.Sm}\n        testID=\"help-text-icon\"\n      />\n      <Text variant={TextVariant.BodySm} color={textColor} {...props}>\n        {children}\n      </Text>\n    </Box>\n  );\n};\n"]}

package/dist/components/HelpText/HelpText.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.types.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { HelpTextPropsShared } from '@metamask/design-system-shared';\n\nimport type { TextProps } from '../Text';\n\nexport type HelpTextProps = HelpTextPropsShared & Omit<TextProps, 'variant'>;\n"]}

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

@@ -0,0 +1,4 @@
+import type { HelpTextPropsShared } from "@metamask/design-system-shared";
+import type { TextProps } from "../Text/index.cjs";
+export type HelpTextProps = HelpTextPropsShared & Omit<TextProps, 'variant'>;
+//# sourceMappingURL=HelpText.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.types.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { HelpTextPropsShared } from "@metamask/design-system-shared";
+import type { TextProps } from "../Text/index.mjs";
+export type HelpTextProps = HelpTextPropsShared & Omit<TextProps, 'variant'>;
+//# sourceMappingURL=HelpText.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.types.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/HelpText/HelpText.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpText.types.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/HelpText.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { HelpTextPropsShared } from '@metamask/design-system-shared';\n\nimport type { TextProps } from '../Text';\n\nexport type HelpTextProps = HelpTextPropsShared & Omit<TextProps, 'variant'>;\n"]}

package/dist/components/HelpText/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpText = exports.HelpTextSeverity = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "HelpTextSeverity", { enumerable: true, get: function () { return design_system_shared_1.HelpTextSeverity; } });
+var HelpText_1 = require("./HelpText.cjs");
+Object.defineProperty(exports, "HelpText", { enumerable: true, get: function () { return HelpText_1.HelpText; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/HelpText/index.ts"],"names":[],"mappings":";;;AAAA,uEAAkE;AAAzD,wHAAA,gBAAgB,OAAA;AACzB,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA","sourcesContent":["export { HelpTextSeverity } from '@metamask/design-system-shared';\nexport { HelpText } from './HelpText';\nexport type { HelpTextProps } from './HelpText.types';\n"]}

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

@@ -0,0 +1,4 @@
+export { HelpTextSeverity } from "@metamask/design-system-shared";
+export { HelpText } from "./HelpText.cjs";
+export type { HelpTextProps } from "./HelpText.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/HelpText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAClE,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

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

@@ -0,0 +1,4 @@
+export { HelpTextSeverity } from "@metamask/design-system-shared";
+export { HelpText } from "./HelpText.mjs";
+export type { HelpTextProps } from "./HelpText.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/HelpText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAClE,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/HelpText/index.mjs

@@ -0,0 +1,3 @@
+export { HelpTextSeverity } from "@metamask/design-system-shared";
+export { HelpText } from "./HelpText.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/HelpText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAClE,OAAO,EAAE,QAAQ,EAAE,uBAAmB","sourcesContent":["export { HelpTextSeverity } from '@metamask/design-system-shared';\nexport { HelpText } from './HelpText';\nexport type { HelpTextProps } from './HelpText.types';\n"]}

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -43,7 +43,7 @@ const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps
       {valueContent}
     </BoxRow_1.BoxRow>);
     return (<BoxRow_1.BoxRow endAccessory={valueBox} gap={4} style={[
-            tw.style(variant === design_system_shared_1.KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
+            tw.style('px-4', variant === design_system_shared_1.KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
             style,
         ]} {...viewProps}>
       <Box_1.Box twClassName="shrink-0">{keyBox}</Box_1.Box>

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

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

package/dist/components/KeyValueRow/KeyValueRow.mjs

@@ -44,7 +44,7 @@ export const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIc
       {valueContent}
     </BoxRow>);
     return (<BoxRow endAccessory={valueBox} gap={4} style={[
-            tw.style(variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
+            tw.style('px-4', variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10', twClassName),
             style,
         ]} {...viewProps}>
       <Box twClassName="shrink-0">{keyBox}</Box>

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

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

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

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

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

@@ -1,12 +1,16 @@
 import type { KeyValueRowPropsShared } from "@metamask/design-system-shared";
 import type { ViewProps } from "react-native";
 import type { ButtonIconProps } from "../ButtonIcon/ButtonIcon.types.cjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.cjs";
 import type { TextProps } from "../Text/Text.types.cjs";
 export type KeyValueRowProps = KeyValueRowPropsShared & Omit<ViewProps, 'children'> & {
     /** Optional props for the key Text when key is a string. */
     keyTextProps?: Partial<Omit<TextProps, 'children'>>;
-    /** Optional props for the value Text when value is a string. */
-    valueTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the value SensitiveText when value is a string.
+     * Supports Text props plus `isHidden` / `length`.
+     */
+    valueTextProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /** Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles. */
     twClassName?: string;
     /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.types.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACtD,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}
+{"version":3,"file":"KeyValueRow.types.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}

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

@@ -1,12 +1,16 @@
 import type { KeyValueRowPropsShared } from "@metamask/design-system-shared";
 import type { ViewProps } from "react-native";
 import type { ButtonIconProps } from "../ButtonIcon/ButtonIcon.types.mjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.mjs";
 import type { TextProps } from "../Text/Text.types.mjs";
 export type KeyValueRowProps = KeyValueRowPropsShared & Omit<ViewProps, 'children'> & {
     /** Optional props for the key Text when key is a string. */
     keyTextProps?: Partial<Omit<TextProps, 'children'>>;
-    /** Optional props for the value Text when value is a string. */
-    valueTextProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the value SensitiveText when value is a string.
+     * Supports Text props plus `isHidden` / `length`.
+     */
+    valueTextProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
     /** Optional Tailwind class names applied to the outer BoxHorizontal. Merged with base styles. */
     twClassName?: string;
     /** When set, renders a ButtonIcon as the key endAccessory (takes precedence over keyEndAccessory). */

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.types.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACtD,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}
+{"version":3,"file":"KeyValueRow.types.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AACtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAC/D,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjD,0GAA0G;IAC1G,uBAAuB,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACpD,CAAC"}

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

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

package/dist/components/KeyValueSelect/KeyValueSelect.cjs

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValueSelect = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const KeyValueRow_1 = require("../KeyValueRow/index.cjs");
+const SelectButton_1 = require("../SelectButton/index.cjs");
+const ROOT_TW_CLASS_NAME = 'w-full';
+/** Overrides KeyValueRow `pr-4` so SelectButton's `px-3` keeps a 16px trailing inset. */
+const KEY_VALUE_ROW_TW_CLASS_NAME = 'pr-1';
+exports.KeyValueSelect = (0, react_1.forwardRef)(({ keyLabel, keyStartAccessory, keyEndAccessory, keyTextProps, keyEndButtonIconProps, variant, value, valueStartAccessory, valueEndAccessory, valueTextProps, selectButtonProps, keyValueRowProps, isDisabled = false, twClassName, style, accessibilityRole, ...pressableProps }, ref) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const rootTwClassName = (0, design_system_shared_1.mergeTwClassName)(ROOT_TW_CLASS_NAME, twClassName);
+    const { twClassName: keyValueRowTwClassName, ...restKeyValueRowProps } = keyValueRowProps ?? {};
+    const resolvedKeyValueRowTwClassName = (0, design_system_shared_1.mergeTwClassName)(KEY_VALUE_ROW_TW_CLASS_NAME, keyValueRowTwClassName);
+    const getPressableStyle = ({ pressed, }) => {
+        const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');
+        if (!style) {
+            return baseStyle;
+        }
+        const userStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [baseStyle, userStyle];
+    };
+    const renderSelectValue = () => (<SelectButton_1.SelectButton {...selectButtonProps} value={value} startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} textProps={valueTextProps} variant={design_system_shared_1.SelectButtonVariant.Secondary} isDisabled={isDisabled} size={design_system_shared_1.SelectButtonSize.Md} pointerEvents="none" accessible={false}/>);
+    return (<react_native_1.Pressable ref={ref} accessibilityRole={accessibilityRole ?? 'button'} disabled={isDisabled} style={getPressableStyle} {...pressableProps}>
+        <KeyValueRow_1.KeyValueRow {...restKeyValueRowProps} twClassName={resolvedKeyValueRowTwClassName} keyLabel={keyLabel} keyStartAccessory={keyStartAccessory} keyEndAccessory={keyEndAccessory} keyTextProps={keyTextProps} keyEndButtonIconProps={keyEndButtonIconProps} variant={variant} value={renderSelectValue()}/>
+      </react_native_1.Pressable>);
+});
+exports.KeyValueSelect.displayName = 'KeyValueSelect';
+//# sourceMappingURL=KeyValueSelect.cjs.map

package/dist/components/KeyValueSelect/KeyValueSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueSelect.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueSelect/KeyValueSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  mergeTwClassName,\n  SelectButtonSize,\n  SelectButtonVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { forwardRef } from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  View,\n  ViewStyle,\n} from 'react-native';\n\nimport { KeyValueRow } from '../KeyValueRow';\nimport { SelectButton } from '../SelectButton';\n\nimport type { KeyValueSelectProps } from './KeyValueSelect.types';\n\nconst ROOT_TW_CLASS_NAME = 'w-full';\n\n/** Overrides KeyValueRow `pr-4` so SelectButton's `px-3` keeps a 16px trailing inset. */\nconst KEY_VALUE_ROW_TW_CLASS_NAME = 'pr-1';\n\nexport const KeyValueSelect = forwardRef<View, KeyValueSelectProps>(\n  (\n    {\n      keyLabel,\n      keyStartAccessory,\n      keyEndAccessory,\n      keyTextProps,\n      keyEndButtonIconProps,\n      variant,\n      value,\n      valueStartAccessory,\n      valueEndAccessory,\n      valueTextProps,\n      selectButtonProps,\n      keyValueRowProps,\n      isDisabled = false,\n      twClassName,\n      style,\n      accessibilityRole,\n      ...pressableProps\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const rootTwClassName = mergeTwClassName(ROOT_TW_CLASS_NAME, twClassName);\n    const { twClassName: keyValueRowTwClassName, ...restKeyValueRowProps } =\n      keyValueRowProps ?? {};\n    const resolvedKeyValueRowTwClassName = mergeTwClassName(\n      KEY_VALUE_ROW_TW_CLASS_NAME,\n      keyValueRowTwClassName,\n    );\n\n    const getPressableStyle = ({\n      pressed,\n    }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n      const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');\n\n      if (!style) {\n        return baseStyle;\n      }\n\n      const userStyle =\n        typeof style === 'function' ? style({ pressed }) : style;\n\n      return [baseStyle, userStyle];\n    };\n\n    const renderSelectValue = () => (\n      <SelectButton\n        {...selectButtonProps}\n        value={value}\n        startAccessory={valueStartAccessory}\n        endAccessory={valueEndAccessory}\n        textProps={valueTextProps}\n        variant={SelectButtonVariant.Secondary}\n        isDisabled={isDisabled}\n        size={SelectButtonSize.Md}\n        pointerEvents=\"none\"\n        accessible={false}\n      />\n    );\n\n    return (\n      <Pressable\n        ref={ref}\n        accessibilityRole={accessibilityRole ?? 'button'}\n        disabled={isDisabled}\n        style={getPressableStyle}\n        {...pressableProps}\n      >\n        <KeyValueRow\n          {...restKeyValueRowProps}\n          twClassName={resolvedKeyValueRowTwClassName}\n          keyLabel={keyLabel}\n          keyStartAccessory={keyStartAccessory}\n          keyEndAccessory={keyEndAccessory}\n          keyTextProps={keyTextProps}\n          keyEndButtonIconProps={keyEndButtonIconProps}\n          variant={variant}\n          value={renderSelectValue()}\n        />\n      </Pressable>\n    );\n  },\n);\n\nKeyValueSelect.displayName = 'KeyValueSelect';\n"]}

package/dist/components/KeyValueSelect/KeyValueSelect.d.cts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { View } from "react-native";
+export declare const KeyValueSelect: React.ForwardRefExoticComponent<Omit<import("@metamask/design-system-shared").KeyValueSelectPropsShared, "selectButtonProps"> & Omit<import("react-native").PressableProps, "children" | "disabled"> & {
+    keyTextProps?: Partial<Omit<import("../index.cjs").TextProps, "children">> | undefined;
+    keyEndButtonIconProps?: Partial<import("../index.cjs").ButtonIconProps> | undefined;
+    valueTextProps?: Partial<Omit<import("../index.cjs").TextProps, "children">> | undefined;
+    selectButtonProps: import("./KeyValueSelect.types.cjs").KeyValueSelectSelectButtonProps;
+    keyValueRowProps?: import("./KeyValueSelect.types.cjs").KeyValueSelectKeyValueRowProps | undefined;
+    twClassName?: string | undefined;
+} & React.RefAttributes<View>>;
+//# sourceMappingURL=KeyValueSelect.d.cts.map