@metamask-previews/design-system-react-native 0.13.0-preview.69c659c → 0.13.0-preview.beee588

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

@@ -21,7 +21,7 @@ import { isPreDefinedKeyValueRowLabel } from "../KeyValueRow.utils.mjs";
  *
  * @returns The rendered KeyValueRowLabel component.
  */
-const KeyValueRowLabel = ({ label, tooltip, }) => {
+export const KeyValueRowLabel = ({ label, tooltip, }) => {
     const tw = useTailwind();
     const hasTooltip = Boolean(tooltip?.title && tooltip?.content);
     return (<View style={tw.style('flex-row items-center')}>
@@ -31,5 +31,4 @@ const KeyValueRowLabel = ({ label, tooltip, }) => {
       {hasTooltip && tooltip && (<ButtonIcon size={tooltip.size ?? ButtonIconSize.Md} iconName={tooltip.iconName ?? IconName.Question} accessibilityLabel={`${tooltip.title} tooltip`} onPress={() => tooltip?.onPress?.()}/>)}
     </View>);
 };
-export default KeyValueRowLabel;
 //# sourceMappingURL=KeyValueLabel.mjs.map

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

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

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValueRowRoot = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native/index.js");
@@ -35,5 +36,5 @@ const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
       {children}
     </react_native_1.View>);
 };
-exports.default = KeyValueRowRoot;
+exports.KeyValueRowRoot = KeyValueRowRoot;
 //# sourceMappingURL=KeyValueRoot.cjs.map

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

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

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

@@ -20,6 +20,5 @@ import type { KeyValueRowRootProps } from "../KeyValueRow.types.cjs";
  *
  * @returns The rendered Root component.
  */
-declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
-export default KeyValueRowRoot;
+export declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
 //# sourceMappingURL=KeyValueRoot.d.cts.map

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

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

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

@@ -20,6 +20,5 @@ import type { KeyValueRowRootProps } from "../KeyValueRow.types.mjs";
  *
  * @returns The rendered Root component.
  */
-declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
-export default KeyValueRowRoot;
+export declare const KeyValueRowRoot: React.FC<KeyValueRowRootProps>;
 //# sourceMappingURL=KeyValueRoot.d.mts.map

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

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

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

@@ -28,7 +28,7 @@ import { View } from "react-native/index.js";
  *
  * @returns The rendered Root component.
  */
-const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
+export const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
     const tw = useTailwind();
     return (<View style={[
             tw.style('flex-row justify-between items-center overflow-hidden', twClassName),
@@ -37,5 +37,4 @@ const KeyValueRowRoot = ({ children, twClassName, style, ...props }) => {
       {children}
     </View>);
 };
-export default KeyValueRowRoot;
 //# sourceMappingURL=KeyValueRoot.mjs.map

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

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

package/dist/components/KeyValueRow/KeyValueRow.cjs

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

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

@@ -12,7 +12,7 @@ import type { KeyValueRowProps } from "./KeyValueRow.types.cjs";
  *
  * @returns The rendered KeyValueRow component.
  */
-declare const KeyValueRow: React.FC<KeyValueRowProps>;
+export declare const KeyValueRow: React.FC<KeyValueRowProps>;
 /**
  * Exported sub-components to provide a base for new KeyValueRow variants.
  */
@@ -21,5 +21,4 @@ export declare const KeyValueRowStubs: {
     Section: React.FC<import("./KeyValueRow.types.cjs").KeyValueSectionProps>;
     Label: React.FC<import("./KeyValueRow.types.cjs").KeyValueRowLabelProps>;
 };
-export default KeyValueRow;
 //# sourceMappingURL=KeyValueRow.d.cts.map

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

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

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

@@ -12,7 +12,7 @@ import type { KeyValueRowProps } from "./KeyValueRow.types.mjs";
  *
  * @returns The rendered KeyValueRow component.
  */
-declare const KeyValueRow: React.FC<KeyValueRowProps>;
+export declare const KeyValueRow: React.FC<KeyValueRowProps>;
 /**
  * Exported sub-components to provide a base for new KeyValueRow variants.
  */
@@ -21,5 +21,4 @@ export declare const KeyValueRowStubs: {
     Section: React.FC<import("./KeyValueRow.types.mjs").KeyValueSectionProps>;
     Label: React.FC<import("./KeyValueRow.types.mjs").KeyValueRowLabelProps>;
 };
-export default KeyValueRow;
 //# sourceMappingURL=KeyValueRow.d.mts.map

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

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

package/dist/components/KeyValueRow/KeyValueRow.mjs

@@ -9,10 +9,10 @@ import $React from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
 import { Icon } from "../Icon/index.mjs";
-import KeyValueRowLabel from "./KeyValueLabel/KeyValueLabel.mjs";
-import KeyValueRowRoot from "./KeyValueRoot/KeyValueRoot.mjs";
+import { KeyValueRowLabel } from "./KeyValueLabel/KeyValueLabel.mjs";
+import { KeyValueRowRoot } from "./KeyValueRoot/KeyValueRoot.mjs";
 import { KeyValueRowFieldIconSides, KeyValueRowSectionAlignments } from "./KeyValueRow.types.mjs";
-import KeyValueSection from "./KeyValueSection/KeyValueSection.mjs";
+import { KeyValueSection } from "./KeyValueSection/KeyValueSection.mjs";
 const renderIcon = (icon) => {
     const { side: _side, ...iconProps } = icon;
     return <Icon {...iconProps}/>;
@@ -29,7 +29,7 @@ const renderIcon = (icon) => {
  *
  * @returns The rendered KeyValueRow component.
  */
-const KeyValueRow = ({ field, value, twClassName, style, ...props }) => {
+export const KeyValueRow = ({ field, value, twClassName, style, ...props }) => {
     const tw = useTailwind();
     const fieldIcon = field?.icon;
     const valueIcon = value?.icon;
@@ -73,5 +73,4 @@ export const KeyValueRowStubs = {
     Section: KeyValueSection,
     Label: KeyValueRowLabel,
 };
-export default KeyValueRow;
 //# sourceMappingURL=KeyValueRow.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon } from '../Icon';\nimport type { IconProps } from '../Icon';\n\nimport KeyValueRowLabel from './KeyValueLabel/KeyValueLabel';\nimport KeyValueRowRoot from './KeyValueRoot/KeyValueRoot';\nimport type { KeyValueRowProps } from './KeyValueRow.types';\nimport {\n  KeyValueRowFieldIconSides,\n  KeyValueRowSectionAlignments,\n} from './KeyValueRow.types';\nimport KeyValueSection from './KeyValueSection/KeyValueSection';\n\ntype IconWithSide = IconProps & { side?: KeyValueRowFieldIconSides };\n\nconst renderIcon = (icon: IconWithSide) => {\n  const { side: _side, ...iconProps } = icon;\n  return <Icon {...iconProps} />;\n};\n\n/**\n * Prebuilt convenience component to format and render a key/value label pair.\n * The KeyValueRowLabel component has props to display a tooltip and icon.\n *\n * @param props - Component props\n * @param props.field - Represents the left side of the key value row pair\n * @param props.value - Represents the right side of the key value row pair\n * @param props.twClassName - Optional Tailwind class names for the root element\n * @param props.style - Optional additional styles for the root element\n *\n * @returns The rendered KeyValueRow component.\n */\nconst KeyValueRow: React.FC<KeyValueRowProps> = ({\n  field,\n  value,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const fieldIcon = field?.icon;\n  const valueIcon = value?.icon;\n\n  return (\n    <KeyValueRowRoot twClassName={twClassName} style={style} {...props}>\n      <KeyValueSection>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Left ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both ||\n              !fieldIcon.side) &&\n            renderIcon(fieldIcon)}\n          <KeyValueRowLabel label={field.label} tooltip={field.tooltip} />\n          {fieldIcon?.name &&\n            (fieldIcon.side === KeyValueRowFieldIconSides.Right ||\n              fieldIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(fieldIcon)}\n        </View>\n      </KeyValueSection>\n      <KeyValueSection align={KeyValueRowSectionAlignments.Right}>\n        <View style={tw.style('flex-row items-center gap-2')}>\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Left ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both ||\n              !valueIcon.side) &&\n            renderIcon(valueIcon)}\n          <KeyValueRowLabel label={value.label} tooltip={value.tooltip} />\n          {valueIcon?.name &&\n            (valueIcon.side === KeyValueRowFieldIconSides.Right ||\n              valueIcon.side === KeyValueRowFieldIconSides.Both) &&\n            renderIcon(valueIcon)}\n        </View>\n      </KeyValueSection>\n    </KeyValueRowRoot>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n\n/**\n * Exported sub-components to provide a base for new KeyValueRow variants.\n */\nexport const KeyValueRowStubs = {\n  Root: KeyValueRowRoot,\n  Section: KeyValueSection,\n  Label: KeyValueRowLabel,\n};\n\nexport default KeyValueRow;\n"]}
+{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAG/B,OAAO,EAAE,gBAAgB,EAAE,0CAAsC;AACjE,OAAO,EAAE,eAAe,EAAE,wCAAoC;AAE9D,OAAO,EACL,yBAAyB,EACzB,4BAA4B,EAC7B,gCAA4B;AAC7B,OAAO,EAAE,eAAe,EAAE,8CAA0C;AAIpE,MAAM,UAAU,GAAG,CAAC,IAAkB,EAAE,EAAE;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,OAAO,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,EAAG,CAAC;AACjC,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG,KAAK,EAAE,IAAI,CAAC;IAC9B,MAAM,SAAS,GAAG,KAAK,EAAE,IAAI,CAAC;IAE9B,OAAO,CACL,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CACjE;MAAA,CAAC,eAAe,CACd;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC,CACnD;UAAA,CAAC,SAAS,EAAE,IAAI;YACd,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI;gBAChD,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI;gBACjD,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,UAAU,CAAC,SAAS,CAAC,CACvB;UAAA,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC7D;UAAA,CAAC,SAAS,EAAE,IAAI;YACd,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,KAAK;gBACjD,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI,CAAC;YACpD,UAAU,CAAC,SAAS,CAAC,CACzB;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,eAAe,CACjB;MAAA,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,4BAA4B,CAAC,KAAK,CAAC,CACzD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC,CACnD;UAAA,CAAC,SAAS,EAAE,IAAI;YACd,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI;gBAChD,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI;gBACjD,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,UAAU,CAAC,SAAS,CAAC,CACvB;UAAA,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAC7D;UAAA,CAAC,SAAS,EAAE,IAAI;YACd,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,KAAK;gBACjD,SAAS,CAAC,IAAI,KAAK,yBAAyB,CAAC,IAAI,CAAC;YACpD,UAAU,CAAC,SAAS,CAAC,CACzB;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,eAAe,CACnB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,gBAAgB;CACxB,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/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"]}

package/dist/components/KeyValueRow/KeyValueSection/KeyValueSection.cjs

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValueSection = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native/index.js");
@@ -25,5 +26,5 @@ const KeyValueSection = ({ children, align = KeyValueRow_types_1.KeyValueRowSect
       {children}
     </react_native_1.View>);
 };
-exports.default = KeyValueSection;
+exports.KeyValueSection = KeyValueSection;
 //# sourceMappingURL=KeyValueSection.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueSection.cjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":";;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,gEAAoE;AAGpE;;;;;;;;;;;GAWG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,KAAK,GAAG,gDAA4B,CAAC,IAAI,EACzC,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACtE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { KeyValueRowSectionAlignments } from '../KeyValueRow.types';\nimport type { KeyValueSectionProps } from '../KeyValueRow.types';\n\n/**\n * A container representing either the left or right side of the KeyValueRow.\n * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.\n *\n * @param props - Component props.\n * @param props.children - The child components.\n * @param props.align - The alignment of the section.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered KeyValueSection component.\n */\nconst KeyValueSection: React.FC<KeyValueSectionProps> = ({\n  children,\n  align = KeyValueRowSectionAlignments.Left,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View style={[tw.style('flex-1', align, twClassName), style]} {...props}>\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueSection;\n"]}
+{"version":3,"file":"KeyValueSection.cjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,gEAAoE;AAGpE;;;;;;;;;;;GAWG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,KAAK,GAAG,gDAA4B,CAAC,IAAI,EACzC,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACtE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { KeyValueRowSectionAlignments } from '../KeyValueRow.types';\nimport type { KeyValueSectionProps } from '../KeyValueRow.types';\n\n/**\n * A container representing either the left or right side of the KeyValueRow.\n * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.\n *\n * @param props - Component props.\n * @param props.children - The child components.\n * @param props.align - The alignment of the section.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered KeyValueSection component.\n */\nexport const KeyValueSection: React.FC<KeyValueSectionProps> = ({\n  children,\n  align = KeyValueRowSectionAlignments.Left,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View style={[tw.style('flex-1', align, twClassName), style]} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}

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

@@ -12,6 +12,5 @@ import type { KeyValueSectionProps } from "../KeyValueRow.types.cjs";
  *
  * @returns The rendered KeyValueSection component.
  */
-declare const KeyValueSection: React.FC<KeyValueSectionProps>;
-export default KeyValueSection;
+export declare const KeyValueSection: React.FC<KeyValueSectionProps>;
 //# sourceMappingURL=KeyValueSection.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueSection.d.cts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAcnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"KeyValueSection.d.cts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAc1D,CAAC"}

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

@@ -12,6 +12,5 @@ import type { KeyValueSectionProps } from "../KeyValueRow.types.mjs";
  *
  * @returns The rendered KeyValueSection component.
  */
-declare const KeyValueSection: React.FC<KeyValueSectionProps>;
-export default KeyValueSection;
+export declare const KeyValueSection: React.FC<KeyValueSectionProps>;
 //# sourceMappingURL=KeyValueSection.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueSection.d.mts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAcnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"KeyValueSection.d.mts","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iCAA6B;AAEjE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAc1D,CAAC"}

package/dist/components/KeyValueRow/KeyValueSection/KeyValueSection.mjs

@@ -21,11 +21,10 @@ import { KeyValueRowSectionAlignments } from "../KeyValueRow.types.mjs";
  *
  * @returns The rendered KeyValueSection component.
  */
-const KeyValueSection = ({ children, align = KeyValueRowSectionAlignments.Left, twClassName, style, ...props }) => {
+export const KeyValueSection = ({ children, align = KeyValueRowSectionAlignments.Left, twClassName, style, ...props }) => {
     const tw = useTailwind();
     return (<View style={[tw.style('flex-1', align, twClassName), style]} {...props}>
       {children}
     </View>);
 };
-export default KeyValueSection;
 //# sourceMappingURL=KeyValueSection.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueSection.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,4BAA4B,EAAE,iCAA6B;AAGpE;;;;;;;;;;;GAWG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,KAAK,GAAG,4BAA4B,CAAC,IAAI,EACzC,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACtE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { KeyValueRowSectionAlignments } from '../KeyValueRow.types';\nimport type { KeyValueSectionProps } from '../KeyValueRow.types';\n\n/**\n * A container representing either the left or right side of the KeyValueRow.\n * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.\n *\n * @param props - Component props.\n * @param props.children - The child components.\n * @param props.align - The alignment of the section.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered KeyValueSection component.\n */\nconst KeyValueSection: React.FC<KeyValueSectionProps> = ({\n  children,\n  align = KeyValueRowSectionAlignments.Left,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View style={[tw.style('flex-1', align, twClassName), style]} {...props}>\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueSection;\n"]}
+{"version":3,"file":"KeyValueSection.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,4BAA4B,EAAE,iCAA6B;AAGpE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,KAAK,GAAG,4BAA4B,CAAC,IAAI,EACzC,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACtE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { KeyValueRowSectionAlignments } from '../KeyValueRow.types';\nimport type { KeyValueSectionProps } from '../KeyValueRow.types';\n\n/**\n * A container representing either the left or right side of the KeyValueRow.\n * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.\n *\n * @param props - Component props.\n * @param props.children - The child components.\n * @param props.align - The alignment of the section.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered KeyValueSection component.\n */\nexport const KeyValueSection: React.FC<KeyValueSectionProps> = ({\n  children,\n  align = KeyValueRowSectionAlignments.Left,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View style={[tw.style('flex-1', align, twClassName), style]} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}

package/dist/components/KeyValueRow/index.cjs

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSizes = exports.TooltipSizes = exports.KeyValueRowFieldIconSides = exports.KeyValueRowSectionAlignments = exports.default = exports.KeyValueRowStubs = void 0;
+exports.IconSizes = exports.TooltipSizes = exports.KeyValueRowFieldIconSides = exports.KeyValueRowSectionAlignments = exports.KeyValueRowStubs = exports.KeyValueRow = void 0;
 var KeyValueRow_1 = require("./KeyValueRow.cjs");
+Object.defineProperty(exports, "KeyValueRow", { enumerable: true, get: function () { return KeyValueRow_1.KeyValueRow; } });
 Object.defineProperty(exports, "KeyValueRowStubs", { enumerable: true, get: function () { return KeyValueRow_1.KeyValueRowStubs; } });
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(KeyValueRow_1).default; } });
 var KeyValueRow_types_1 = require("./KeyValueRow.types.cjs");
 Object.defineProperty(exports, "KeyValueRowSectionAlignments", { enumerable: true, get: function () { return KeyValueRow_types_1.KeyValueRowSectionAlignments; } });
 Object.defineProperty(exports, "KeyValueRowFieldIconSides", { enumerable: true, get: function () { return KeyValueRow_types_1.KeyValueRowFieldIconSides; } });

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAA0D;AAAjD,+GAAA,gBAAgB,OAAA;AAAE,uHAAA,OAAO,OAAA;AAClC,6DAY6B;AAX3B,iIAAA,4BAA4B,OAAA;AAC5B,8HAAA,yBAAyB,OAAA;AACzB,iHAAA,YAAY,OAAA;AACZ,8GAAA,SAAS,OAAA","sourcesContent":["export { KeyValueRowStubs, default } from './KeyValueRow';\nexport {\n  KeyValueRowSectionAlignments,\n  KeyValueRowFieldIconSides,\n  TooltipSizes,\n  IconSizes,\n  type KeyValueRowTooltip,\n  type KeyValueRowField,\n  type PreDefinedKeyValueRowLabel,\n  type KeyValueRowLabelProps,\n  type KeyValueRowRootProps,\n  type KeyValueSectionProps,\n  type KeyValueRowProps,\n} from './KeyValueRow.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":";;;AAAA,iDAA8D;AAArD,0GAAA,WAAW,OAAA;AAAE,+GAAA,gBAAgB,OAAA;AACtC,6DAY6B;AAX3B,iIAAA,4BAA4B,OAAA;AAC5B,8HAAA,yBAAyB,OAAA;AACzB,iHAAA,YAAY,OAAA;AACZ,8GAAA,SAAS,OAAA","sourcesContent":["export { KeyValueRow, KeyValueRowStubs } from './KeyValueRow';\nexport {\n  KeyValueRowSectionAlignments,\n  KeyValueRowFieldIconSides,\n  TooltipSizes,\n  IconSizes,\n  type KeyValueRowTooltip,\n  type KeyValueRowField,\n  type PreDefinedKeyValueRowLabel,\n  type KeyValueRowLabelProps,\n  type KeyValueRowRootProps,\n  type KeyValueSectionProps,\n  type KeyValueRowProps,\n} from './KeyValueRow.types';\n"]}

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

@@ -1,3 +1,3 @@
-export { KeyValueRowStubs, default } from "./KeyValueRow.cjs";
+export { KeyValueRow, KeyValueRowStubs } from "./KeyValueRow.cjs";
 export { KeyValueRowSectionAlignments, KeyValueRowFieldIconSides, TooltipSizes, IconSizes, type KeyValueRowTooltip, type KeyValueRowField, type PreDefinedKeyValueRowLabel, type KeyValueRowLabelProps, type KeyValueRowRootProps, type KeyValueSectionProps, type KeyValueRowProps, } from "./KeyValueRow.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,0BAAsB;AAC1D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,gCAA4B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,0BAAsB;AAC9D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,gCAA4B"}

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

@@ -1,3 +1,3 @@
-export { KeyValueRowStubs, default } from "./KeyValueRow.mjs";
+export { KeyValueRow, KeyValueRowStubs } from "./KeyValueRow.mjs";
 export { KeyValueRowSectionAlignments, KeyValueRowFieldIconSides, TooltipSizes, IconSizes, type KeyValueRowTooltip, type KeyValueRowField, type PreDefinedKeyValueRowLabel, type KeyValueRowLabelProps, type KeyValueRowRootProps, type KeyValueSectionProps, type KeyValueRowProps, } from "./KeyValueRow.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,0BAAsB;AAC1D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,gCAA4B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,0BAAsB;AAC9D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EACT,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,gCAA4B"}

package/dist/components/KeyValueRow/index.mjs

@@ -1,3 +1,3 @@
-export { KeyValueRowStubs, default } from "./KeyValueRow.mjs";
+export { KeyValueRow, KeyValueRowStubs } from "./KeyValueRow.mjs";
 export { KeyValueRowSectionAlignments, KeyValueRowFieldIconSides, TooltipSizes, IconSizes } from "./KeyValueRow.types.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,0BAAsB;AAC1D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAQV,gCAA4B","sourcesContent":["export { KeyValueRowStubs, default } from './KeyValueRow';\nexport {\n  KeyValueRowSectionAlignments,\n  KeyValueRowFieldIconSides,\n  TooltipSizes,\n  IconSizes,\n  type KeyValueRowTooltip,\n  type KeyValueRowField,\n  type PreDefinedKeyValueRowLabel,\n  type KeyValueRowLabelProps,\n  type KeyValueRowRootProps,\n  type KeyValueSectionProps,\n  type KeyValueRowProps,\n} from './KeyValueRow.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,0BAAsB;AAC9D,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,EACzB,YAAY,EACZ,SAAS,EAQV,gCAA4B","sourcesContent":["export { KeyValueRow, KeyValueRowStubs } from './KeyValueRow';\nexport {\n  KeyValueRowSectionAlignments,\n  KeyValueRowFieldIconSides,\n  TooltipSizes,\n  IconSizes,\n  type KeyValueRowTooltip,\n  type KeyValueRowField,\n  type PreDefinedKeyValueRowLabel,\n  type KeyValueRowLabelProps,\n  type KeyValueRowRootProps,\n  type KeyValueSectionProps,\n  type KeyValueRowProps,\n} from './KeyValueRow.types';\n"]}

package/dist/components/Skeleton/Skeleton.cjs

@@ -23,6 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native/index.js");
@@ -82,5 +83,5 @@ const Skeleton = ({ height, width, children, hideChildren = false, style, childr
         </react_native_1.View>)}
     </react_native_1.View>);
 };
-exports.default = Skeleton;
+exports.Skeleton = Skeleton;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAiD;AACjD,wDAA8C;AAI9C,MAAM,QAAQ,GAA4B,CAAC,EACzC,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,KAAK,EACL,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,EACX,QAAQ,GAAG,IAAI,EACf,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,WAAW,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,CAAC;IAEhE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,uBAAQ,CAAC,QAAQ,CAAC;YAChB,uBAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC;YACF,uBAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC;SACH,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACxB,2EAA2E;YAC3E,IAAI,QAAQ,EAAE;gBACZ,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,CAAC,CAAC,WAAW,IAAI,YAAY,CAAC,EAAE;YAC9C,cAAc,EAAE,CAAC;SAClB;QAED,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,aAAa,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,YAAY,IAAI,WAAW,EAAE;QAChC,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;KACxB;IAED,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,yBAAyB,EAAE,WAAW,CAAC;YAChD,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE;YAClC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE;YAChC,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,uBAAQ,CAAC,IAAI,CACZ,IAAI,iBAAiB,CAAC,CACtB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,8CAA8C,CAAC;YACxD,EAAE,OAAO,EAAE,WAAW,EAAE;YACxB,iBAAiB,EAAE,KAAK;SACzB,CAAC,CACF,aAAa,CAAC,MAAM,EAGtB;;MAAA,CAAC,WAAW,IAAI,CACd,CAAC,mBAAI,CACH,IAAI,oBAAoB,CAAC,CACzB,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,yBAAyB,CAAC;gBACnC,oBAAoB,EAAE,KAAK;aAC5B,CAAC,CACF,aAAa,CAAC,MAAM,CACpB,2BAA2B,CAC3B,yBAAyB,CAAC,qBAAqB,CAE/C;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, View } from 'react-native';\n\nimport type { SkeletonProps } from './Skeleton.types';\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n  height,\n  width,\n  children,\n  hideChildren = false,\n  style,\n  childrenWrapperProps,\n  animatedViewProps,\n  twClassName,\n  autoPlay = true,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const opacityAnim = useRef(new Animated.Value(0.2)).current;\n  const hasChildren = children !== null && children !== undefined;\n\n  const startAnimation = () => {\n    Animated.sequence([\n      Animated.timing(opacityAnim, {\n        toValue: 0.1,\n        duration: 700,\n        useNativeDriver: true,\n        isInteraction: false,\n      }),\n      Animated.timing(opacityAnim, {\n        toValue: 0.2,\n        duration: 700,\n        useNativeDriver: true,\n        isInteraction: false,\n      }),\n    ]).start(({ finished }) => {\n      /* istanbul ignore next - animation interruption is not testable in Jest */\n      if (finished) {\n        startAnimation();\n      }\n    });\n  };\n\n  useEffect(() => {\n    if (autoPlay && (!hasChildren || hideChildren)) {\n      startAnimation();\n    }\n\n    return () => {\n      opacityAnim.stopAnimation();\n    };\n  }, [hasChildren, hideChildren, autoPlay]);\n\n  if (!hideChildren && hasChildren) {\n    return <>{children}</>;\n  }\n\n  return (\n    <View\n      style={[\n        tw.style('rounded overflow-hidden', twClassName),\n        height !== undefined && { height },\n        width !== undefined && { width },\n        style,\n      ]}\n      {...props}\n    >\n      <Animated.View\n        {...animatedViewProps}\n        style={[\n          tw.style('absolute inset-0 rounded bg-icon-alternative'),\n          { opacity: opacityAnim },\n          animatedViewProps?.style,\n        ]}\n        pointerEvents=\"none\"\n      />\n\n      {hasChildren && (\n        <View\n          {...childrenWrapperProps}\n          style={[\n            tw.style('relative z-10 opacity-0'),\n            childrenWrapperProps?.style,\n          ]}\n          pointerEvents=\"none\"\n          accessibilityElementsHidden\n          importantForAccessibility=\"no-hide-descendants\"\n        >\n          {children}\n        </View>\n      )}\n    </View>\n  );\n};\n\nexport default Skeleton;\n"]}
+{"version":3,"file":"Skeleton.cjs","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAiD;AACjD,wDAA8C;AAIvC,MAAM,QAAQ,GAA4B,CAAC,EAChD,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,KAAK,EACL,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,EACX,QAAQ,GAAG,IAAI,EACf,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,WAAW,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,CAAC;IAEhE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,uBAAQ,CAAC,QAAQ,CAAC;YAChB,uBAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC;YACF,uBAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC;SACH,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACxB,2EAA2E;YAC3E,IAAI,QAAQ,EAAE;gBACZ,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,CAAC,CAAC,WAAW,IAAI,YAAY,CAAC,EAAE;YAC9C,cAAc,EAAE,CAAC;SAClB;QAED,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,aAAa,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,YAAY,IAAI,WAAW,EAAE;QAChC,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;KACxB;IAED,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,yBAAyB,EAAE,WAAW,CAAC;YAChD,MAAM,KAAK,SAAS,IAAI,EAAE,MAAM,EAAE;YAClC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE;YAChC,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,uBAAQ,CAAC,IAAI,CACZ,IAAI,iBAAiB,CAAC,CACtB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,8CAA8C,CAAC;YACxD,EAAE,OAAO,EAAE,WAAW,EAAE;YACxB,iBAAiB,EAAE,KAAK;SACzB,CAAC,CACF,aAAa,CAAC,MAAM,EAGtB;;MAAA,CAAC,WAAW,IAAI,CACd,CAAC,mBAAI,CACH,IAAI,oBAAoB,CAAC,CACzB,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,yBAAyB,CAAC;gBACnC,oBAAoB,EAAE,KAAK;aAC5B,CAAC,CACF,aAAa,CAAC,MAAM,CACpB,2BAA2B,CAC3B,yBAAyB,CAAC,qBAAqB,CAE/C;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,mBAAI,CAAC,CACR,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAxFW,QAAA,QAAQ,YAwFnB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, View } from 'react-native';\n\nimport type { SkeletonProps } from './Skeleton.types';\n\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  height,\n  width,\n  children,\n  hideChildren = false,\n  style,\n  childrenWrapperProps,\n  animatedViewProps,\n  twClassName,\n  autoPlay = true,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const opacityAnim = useRef(new Animated.Value(0.2)).current;\n  const hasChildren = children !== null && children !== undefined;\n\n  const startAnimation = () => {\n    Animated.sequence([\n      Animated.timing(opacityAnim, {\n        toValue: 0.1,\n        duration: 700,\n        useNativeDriver: true,\n        isInteraction: false,\n      }),\n      Animated.timing(opacityAnim, {\n        toValue: 0.2,\n        duration: 700,\n        useNativeDriver: true,\n        isInteraction: false,\n      }),\n    ]).start(({ finished }) => {\n      /* istanbul ignore next - animation interruption is not testable in Jest */\n      if (finished) {\n        startAnimation();\n      }\n    });\n  };\n\n  useEffect(() => {\n    if (autoPlay && (!hasChildren || hideChildren)) {\n      startAnimation();\n    }\n\n    return () => {\n      opacityAnim.stopAnimation();\n    };\n  }, [hasChildren, hideChildren, autoPlay]);\n\n  if (!hideChildren && hasChildren) {\n    return <>{children}</>;\n  }\n\n  return (\n    <View\n      style={[\n        tw.style('rounded overflow-hidden', twClassName),\n        height !== undefined && { height },\n        width !== undefined && { width },\n        style,\n      ]}\n      {...props}\n    >\n      <Animated.View\n        {...animatedViewProps}\n        style={[\n          tw.style('absolute inset-0 rounded bg-icon-alternative'),\n          { opacity: opacityAnim },\n          animatedViewProps?.style,\n        ]}\n        pointerEvents=\"none\"\n      />\n\n      {hasChildren && (\n        <View\n          {...childrenWrapperProps}\n          style={[\n            tw.style('relative z-10 opacity-0'),\n            childrenWrapperProps?.style,\n          ]}\n          pointerEvents=\"none\"\n          accessibilityElementsHidden\n          importantForAccessibility=\"no-hide-descendants\"\n        >\n          {children}\n        </View>\n      )}\n    </View>\n  );\n};\n"]}

package/dist/components/Skeleton/Skeleton.d.cts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.cts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAGjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.d.cts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAGjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwF5C,CAAC"}

package/dist/components/Skeleton/Skeleton.d.mts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.mts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAGjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.d.mts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAGjD,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwF5C,CAAC"}

package/dist/components/Skeleton/Skeleton.mjs

@@ -8,7 +8,7 @@ import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useEffect, useRef } from "react";
 const React = $importDefault($React);
 import { Animated, View } from "react-native/index.js";
-const Skeleton = ({ height, width, children, hideChildren = false, style, childrenWrapperProps, animatedViewProps, twClassName, autoPlay = true, ...props }) => {
+export const Skeleton = ({ height, width, children, hideChildren = false, style, childrenWrapperProps, animatedViewProps, twClassName, autoPlay = true, ...props }) => {
     const tw = useTailwind();
     const opacityAnim = useRef(new Animated.Value(0.2)).current;
     const hasChildren = children !== null && children !== undefined;
@@ -64,5 +64,4 @@ const Skeleton = ({ height, width, children, hideChildren = false, style, childr
         </View>)}
     </View>);
 };
-export default Skeleton;
 //# sourceMappingURL=Skeleton.mjs.map