@metamask/design-system-react-native 0.14.0 → 0.16.0

package/dist/components/Icon/Icon.cjs

@@ -8,10 +8,11 @@ const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-pres
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../../types/index.cjs");
 const Icon_assets_1 = require("./Icon.assets.cjs");
+const Icon_constants_1 = require("./Icon.constants.cjs");
 const Icon = ({ size = types_1.IconSize.Md, name, color = types_1.IconColor.IconDefault, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const SVG = Icon_assets_1.assetByIconName[name];
-    const twStyle = tw.style(color, `w-[${size}px]`, `h-[${size}px]`, twClassName);
+    const twStyle = tw.style(color, Icon_constants_1.TWCLASSMAP_ICON_SIZE_DIMENSION[size], twClassName);
     return (<SVG name={name} fill="currentColor" style={[twStyle, style]} {...props}/>);
 };
 exports.Icon = Icon;

package/dist/components/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAE1B,iDAAkD;AAElD,mDAAgD;AAGzC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,GAAG,GAAG,6BAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,MAAM,IAAI,KAAK,EACf,MAAM,IAAI,KAAK,EACf,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC5E,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,IAAI,QAoBf","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor, IconSize } from '../../types';\n\nimport { assetByIconName } from './Icon.assets';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const twStyle = tw.style(\n    color,\n    `w-[${size}px]`,\n    `h-[${size}px]`,\n    twClassName,\n  );\n\n  return (\n    <SVG name={name} fill=\"currentColor\" style={[twStyle, style]} {...props} />\n  );\n};\n"]}
+{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAE1B,iDAAkD;AAElD,mDAAgD;AAChD,yDAAkE;AAG3D,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,GAAG,GAAG,6BAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,+CAA8B,CAAC,IAAI,CAAC,EACpC,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC5E,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,IAAI,QAmBf","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor, IconSize } from '../../types';\n\nimport { assetByIconName } from './Icon.assets';\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const twStyle = tw.style(\n    color,\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    twClassName,\n  );\n\n  return (\n    <SVG name={name} fill=\"currentColor\" style={[twStyle, style]} {...props} />\n  );\n};\n"]}

package/dist/components/Icon/Icon.constants.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TWCLASSMAP_ICON_SIZE_DIMENSION = void 0;
+const types_1 = require("../../types/index.cjs");
+exports.TWCLASSMAP_ICON_SIZE_DIMENSION = {
+    [types_1.IconSize.Xs]: 'w-3 h-3',
+    [types_1.IconSize.Sm]: 'w-4 h-4',
+    [types_1.IconSize.Md]: 'w-5 h-5',
+    [types_1.IconSize.Lg]: 'w-6 h-6',
+    [types_1.IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAuC;AAE1B,QAAA,8BAA8B,GAA6B;IACtE,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

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

@@ -0,0 +1,3 @@
+import { IconSize } from "../../types/index.cjs";
+export declare const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}

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

@@ -0,0 +1,3 @@
+import { IconSize } from "../../types/index.mjs";
+export declare const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}

package/dist/components/Icon/Icon.constants.mjs

@@ -0,0 +1,9 @@
+import { IconSize } from "../../types/index.mjs";
+export const TWCLASSMAP_ICON_SIZE_DIMENSION = {
+    [IconSize.Xs]: 'w-3 h-3',
+    [IconSize.Sm]: 'w-4 h-4',
+    [IconSize.Md]: 'w-5 h-5',
+    [IconSize.Lg]: 'w-6 h-6',
+    [IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,MAAM,CAAC,MAAM,8BAA8B,GAA6B;IACtE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,wDAOd,SAAS,sBAaX,CAAC"}
+{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,wDAOd,SAAS,sBAYX,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,wDAOd,SAAS,sBAaX,CAAC"}
+{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,wDAOd,SAAS,sBAYX,CAAC"}

package/dist/components/Icon/Icon.mjs

@@ -9,10 +9,11 @@ import $React from "react";
 const React = $importDefault($React);
 import { IconColor, IconSize } from "../../types/index.mjs";
 import { assetByIconName } from "./Icon.assets.mjs";
+import { TWCLASSMAP_ICON_SIZE_DIMENSION } from "./Icon.constants.mjs";
 export const Icon = ({ size = IconSize.Md, name, color = IconColor.IconDefault, twClassName, style, ...props }) => {
     const tw = useTailwind();
     const SVG = assetByIconName[name];
-    const twStyle = tw.style(color, `w-[${size}px]`, `h-[${size}px]`, twClassName);
+    const twStyle = tw.style(color, TWCLASSMAP_ICON_SIZE_DIMENSION[size], twClassName);
     return (<SVG name={name} fill="currentColor" style={[twStyle, style]} {...props}/>);
 };
 //# sourceMappingURL=Icon.mjs.map

package/dist/components/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,OAAO,EAAE,eAAe,EAAE,0BAAsB;AAGhD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,MAAM,IAAI,KAAK,EACf,MAAM,IAAI,KAAK,EACf,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC5E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor, IconSize } from '../../types';\n\nimport { assetByIconName } from './Icon.assets';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const twStyle = tw.style(\n    color,\n    `w-[${size}px]`,\n    `h-[${size}px]`,\n    twClassName,\n  );\n\n  return (\n    <SVG name={name} fill=\"currentColor\" style={[twStyle, style]} {...props} />\n  );\n};\n"]}
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,OAAO,EAAE,eAAe,EAAE,0BAAsB;AAChD,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAGlE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,8BAA8B,CAAC,IAAI,CAAC,EACpC,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC5E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor, IconSize } from '../../types';\n\nimport { assetByIconName } from './Icon.assets';\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const twStyle = tw.style(\n    color,\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    twClassName,\n  );\n\n  return (\n    <SVG name={name} fill=\"currentColor\" style={[twStyle, style]} {...props} />\n  );\n};\n"]}

package/dist/components/Icon/assets/no-photography.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.0002 19.1248-2-2v-10.12509h-4.05l-1.825-2h-4.24991l-.95 1.05-1.425-1.425 1.5-1.625h5.99991l1.85 2h3.15c.55 0 1.0209.19583 1.4125.5875.3917.39167.5875.8625.5875 1.4125zm-17.99991 1.875c-.55 0-1.02083-.1959-1.4125-.5875-.39167-.3917-.5875-.8625-.5875-1.4125v-12.00009c0-.55.19583-1.02083.5875-1.4125s.8625-.5875 1.4125-.5875h1.025l2 2h-3.025v12.00009h15.02491l2 2zm11.64991-5.375c-.4166.5666-.9375 1.0208-1.5625 1.3625-.625.3416-1.3208.5125-2.0875.5125-1.25 0-2.31241-.4375-3.18741-1.3125s-1.3125-1.9375-1.3125-3.1875c0-.7667.17083-1.4625.5125-2.0875s.79583-1.14592 1.3625-1.56259l1.44991 1.45009c-.4.2166-.7208.5166-.96241.9-.24167.3833-.3625.8166-.3625 1.3 0 .7.24167 1.2916.72491 1.775.4834.4833 1.075.725 1.775.725.4834 0 .9167-.1209 1.3-.3625.3834-.2417.6834-.5625.9-.9625zm-.45-5.82509c.4167.40009.7375.87509.9625 1.42509s.3375 1.1416.3375 1.775v.3c0 .1-.0083.2-.025.3l-5.075-5.07509c.1-.01667.2-.025.3-.025h.3c.6334 0 1.225.1125 1.775.3375s1.025.54583 1.425.9625zm5.275 13.50009-19.799907-19.80009 1.424997-1.425 19.79991 19.80009z"/></svg>

package/dist/components/KeyValueColumn/KeyValueColumn.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValueColumn = void 0;
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../types/index.cjs");
+const BoxColumn_1 = require("../BoxColumn/index.cjs");
+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);
+    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);
+    const keyBox = (<BoxRow_1.BoxRow startAccessory={keyStartAccessory} endAccessory={keyEndAccessoryNode} textProps={{
+            variant: types_1.TextVariant.BodyMd,
+            fontWeight: types_1.FontWeight.Medium,
+            color: types_1.TextColor.TextAlternative,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...keyTextProps,
+        }} twClassName="w-full min-w-0">
+      {keyContent}
+    </BoxRow_1.BoxRow>);
+    const valueBox = (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessoryNode} textProps={{
+            variant: types_1.TextVariant.BodyMd,
+            fontWeight: types_1.FontWeight.Medium,
+            color: types_1.TextColor.TextDefault,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...valueTextProps,
+        }} twClassName="w-full min-w-0">
+      {valueContent}
+    </BoxRow_1.BoxRow>);
+    return (<BoxColumn_1.BoxColumn bottomAccessory={valueBox} twClassName={twClassName} {...viewProps}>
+      {keyBox}
+    </BoxColumn_1.BoxColumn>);
+};
+exports.KeyValueColumn = KeyValueColumn;
+exports.KeyValueColumn.displayName = 'KeyValueColumn';
+//# sourceMappingURL=KeyValueColumn.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueColumn.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAMqB;AACrB,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,mBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,kBAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,iBAAS,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,mBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,kBAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,iBAAS,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 React from 'react';\n\nimport {\n  ButtonIconSize,\n  FontWeight,\n  IconColor,\n  TextColor,\n  TextVariant,\n} 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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { KeyValueColumnProps } from "./KeyValueColumn.types.cjs";
+export declare const KeyValueColumn: {
+    ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, twClassName, ...viewProps }: KeyValueColumnProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=KeyValueColumn.d.cts.map

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { KeyValueColumnProps } from "./KeyValueColumn.types.mjs";
+export declare const KeyValueColumn: {
+    ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, twClassName, ...viewProps }: KeyValueColumnProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=KeyValueColumn.d.mts.map

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

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

package/dist/components/KeyValueColumn/KeyValueColumn.mjs

@@ -0,0 +1,43 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { ButtonIconSize, FontWeight, IconColor, TextColor, TextVariant } from "../../types/index.mjs";
+import { BoxColumn } from "../BoxColumn/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { ButtonIcon } from "../ButtonIcon/index.mjs";
+export 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 size={ButtonIconSize.Sm} iconProps={{ color: IconColor.IconAlternative }} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName}/>) : (keyEndAccessory);
+    const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon size={ButtonIconSize.Sm} iconProps={{ color: IconColor.IconDefault }} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName}/>) : (valueEndAccessory);
+    const keyBox = (<BoxRow startAccessory={keyStartAccessory} endAccessory={keyEndAccessoryNode} textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            color: TextColor.TextAlternative,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...keyTextProps,
+        }} twClassName="w-full min-w-0">
+      {keyContent}
+    </BoxRow>);
+    const valueBox = (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessoryNode} textProps={{
+            variant: TextVariant.BodyMd,
+            fontWeight: FontWeight.Medium,
+            color: TextColor.TextDefault,
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+            ...valueTextProps,
+        }} twClassName="w-full min-w-0">
+      {valueContent}
+    </BoxRow>);
+    return (<BoxColumn bottomAccessory={valueBox} twClassName={twClassName} {...viewProps}>
+      {keyBox}
+    </BoxColumn>);
+};
+KeyValueColumn.displayName = 'KeyValueColumn';
+//# sourceMappingURL=KeyValueColumn.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueColumn.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,cAAc,EACd,UAAU,EACV,SAAS,EACT,SAAS,EACT,WAAW,EACZ,8BAAoB;AACrB,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,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,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,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,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,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,MAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React from 'react';\n\nimport {\n  ButtonIconSize,\n  FontWeight,\n  IconColor,\n  TextColor,\n  TextVariant,\n} 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.types.cjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/KeyValueColumn/index.cjs

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/KeyValueColumn/index.mjs

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

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

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

package/dist/components/KeyValueRow/KeyValueRow.cjs

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAc5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4ClD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}
+{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAa1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}