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

package/dist/components/HeaderStandard/HeaderStandard.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAavC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsGxD,CAAC"}

package/dist/components/HeaderStandard/HeaderStandard.d.mts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAavC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsGxD,CAAC"}

package/dist/components/HeaderStandard/HeaderStandard.mjs

@@ -0,0 +1,81 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+// Third party dependencies.
+import $React, { useMemo } from "react";
+const React = $importDefault($React);
+// External dependencies.
+import { BoxAlignItems } from "../Box/index.mjs";
+import { BoxVertical } from "../BoxVertical/index.mjs";
+import { HeaderBase } from "../HeaderBase/index.mjs";
+import { IconName } from "../Icon/index.mjs";
+import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
+import { FontWeight, TextColor, TextVariant } from "../Text/index.mjs";
+export const HeaderStandard = ({ title, titleProps, subtitle, subtitleProps, children, onBack, backButtonProps, onClose, closeButtonProps, endButtonIconProps, startButtonIconProps, twClassName = '', testID, ...headerBaseProps }) => {
+    const resolvedStartButtonIconProps = useMemo(() => {
+        if (startButtonIconProps) {
+            return startButtonIconProps;
+        }
+        if (onBack || backButtonProps) {
+            const startProps = {
+                iconName: IconName.ArrowLeft,
+                ...(backButtonProps ?? {}),
+                onPress: backButtonProps?.onPress ?? onBack,
+            };
+            return startProps;
+        }
+        return undefined;
+    }, [onBack, backButtonProps, startButtonIconProps]);
+    const resolvedEndButtonIconProps = useMemo(() => {
+        const props = [];
+        if (onClose || closeButtonProps) {
+            const closeProps = {
+                iconName: IconName.Close,
+                ...(closeButtonProps || {}),
+                onPress: closeButtonProps?.onPress ?? onClose,
+            };
+            props.push(closeProps);
+        }
+        if (endButtonIconProps) {
+            props.push(...endButtonIconProps);
+        }
+        return props.length > 0 ? props : undefined;
+    }, [endButtonIconProps, onClose, closeButtonProps]);
+    const renderContent = () => {
+        if (children) {
+            return children;
+        }
+        if (title) {
+            let subtitleTextProps;
+            if (subtitle && typeof subtitle === 'string') {
+                const { twClassName: subtitleTwClassName, ...subtitleTextRest } = subtitleProps ?? {};
+                subtitleTextProps = {
+                    variant: TextVariant.BodySm,
+                    color: TextColor.TextAlternative,
+                    ...subtitleTextRest,
+                    twClassName: ['-mt-0.5', subtitleTwClassName]
+                        .filter(Boolean)
+                        .join(' '),
+                };
+            }
+            return (<BoxVertical alignItems={BoxAlignItems.Center} textProps={{
+                    variant: TextVariant.BodyMd,
+                    fontWeight: FontWeight.Bold,
+                    ...titleProps,
+                }} bottomAccessory={subtitle ? (<TextOrChildren textProps={subtitleTextProps}>
+                {subtitle}
+              </TextOrChildren>) : undefined}>
+          {title}
+        </BoxVertical>);
+        }
+        return null;
+    };
+    return (<HeaderBase testID={testID} startButtonIconProps={resolvedStartButtonIconProps} endButtonIconProps={resolvedEndButtonIconProps} {...headerBaseProps} twClassName={`px-2 ${twClassName}`}>
+      {renderContent()}
+    </HeaderBase>);
+};
+HeaderStandard.displayName = 'HeaderStandard';
+//# sourceMappingURL=HeaderStandard.mjs.map

package/dist/components/HeaderStandard/HeaderStandard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.mjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport React, { useMemo } from 'react';\n\n// External dependencies.\nimport { BoxAlignItems } from '../Box';\nimport { BoxVertical } from '../BoxVertical';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\nimport type { TextProps } from '../Text';\nimport { FontWeight, TextColor, TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderStandardProps } from './HeaderStandard.types';\n\nexport const HeaderStandard: React.FC<HeaderStandardProps> = ({\n  title,\n  titleProps,\n  subtitle,\n  subtitleProps,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  endButtonIconProps,\n  startButtonIconProps,\n  twClassName = '',\n  testID,\n  ...headerBaseProps\n}) => {\n  const resolvedStartButtonIconProps = useMemo(() => {\n    if (startButtonIconProps) {\n      return startButtonIconProps;\n    }\n    if (onBack || backButtonProps) {\n      const startProps: ButtonIconProps = {\n        iconName: IconName.ArrowLeft,\n        ...(backButtonProps ?? {}),\n        onPress: backButtonProps?.onPress ?? onBack,\n      };\n      return startProps;\n    }\n    return undefined;\n  }, [onBack, backButtonProps, startButtonIconProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      const closeProps: ButtonIconProps = {\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      };\n      props.push(closeProps);\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      let subtitleTextProps: Omit<Partial<TextProps>, 'children'> | undefined;\n      if (subtitle && typeof subtitle === 'string') {\n        const { twClassName: subtitleTwClassName, ...subtitleTextRest } =\n          subtitleProps ?? {};\n        subtitleTextProps = {\n          variant: TextVariant.BodySm,\n          color: TextColor.TextAlternative,\n          ...subtitleTextRest,\n          twClassName: ['-mt-0.5', subtitleTwClassName]\n            .filter(Boolean)\n            .join(' '),\n        };\n      }\n\n      return (\n        <BoxVertical\n          alignItems={BoxAlignItems.Center}\n          textProps={{\n            variant: TextVariant.BodyMd,\n            fontWeight: FontWeight.Bold,\n            ...titleProps,\n          }}\n          bottomAccessory={\n            subtitle ? (\n              <TextOrChildren textProps={subtitleTextProps}>\n                {subtitle}\n              </TextOrChildren>\n            ) : undefined\n          }\n        >\n          {title}\n        </BoxVertical>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <HeaderBase\n      testID={testID}\n      startButtonIconProps={resolvedStartButtonIconProps}\n      endButtonIconProps={resolvedEndButtonIconProps}\n      {...headerBaseProps}\n      twClassName={`px-2 ${twClassName}`}\n    >\n      {renderContent()}\n    </HeaderBase>\n  );\n};\n\nHeaderStandard.displayName = 'HeaderStandard';\n"]}

package/dist/components/HeaderStandard/HeaderStandard.types.cjs

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Third party dependencies.
+const react_1 = __importDefault(require("react"));
+//# sourceMappingURL=HeaderStandard.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.types.ts"],"names":[],"mappings":";;;;;AAAA,4BAA4B;AAC5B,kDAA0B","sourcesContent":["// Third party dependencies.\nimport React from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { HeaderBaseProps } from '../HeaderBase';\nimport type { TextProps } from '../Text';\n\n/**\n * HeaderStandard component props.\n */\nexport type HeaderStandardProps = HeaderBaseProps & {\n  /**\n   * Title to display in the header. Can be a string or a React node.\n   * Used as children if children prop is not provided.\n   * When string: rendered with TextVariant.BodyMd and FontWeight.Bold by default; titleProps apply.\n   * When node: rendered as-is; titleProps are not applied.\n   */\n  title?: string | React.ReactNode;\n  /**\n   * Additional props to pass to the title Text component.\n   * Props are spread to the Text component and can override default values.\n   * Only applied when title is a string.\n   */\n  titleProps?: Partial<TextProps>;\n  /**\n   * Subtitle to display below the title. Can be a string or a React node.\n   * When string: rendered with TextVariant.BodySm and TextColor.TextAlternative by default; subtitleProps apply.\n   * When node: rendered as-is; subtitleProps are not applied (add spacing on your root if needed, e.g. twClassName).\n   */\n  subtitle?: string | React.ReactNode;\n  /**\n   * Additional props to pass to the subtitle Text component.\n   * Props are spread to the Text component and can override default values.\n   * Only applied when subtitle is a string.\n   */\n  subtitleProps?: Partial<TextProps>;\n  /**\n   * Callback when the back button is pressed.\n   * If provided, a back button will be rendered as startButtonIconProps.\n   */\n  onBack?: () => void;\n  /**\n   * Additional props to pass to the back ButtonIcon.\n   * If provided, a back button will be rendered as startButtonIconProps with these props spread.\n   */\n  backButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Callback when the close button is pressed.\n   * If provided, a close button will be added to endButtonIconProps.\n   */\n  onClose?: () => void;\n  /**\n   * Additional props to pass to the close ButtonIcon.\n   * If provided, a close button will be added to endButtonIconProps with these props spread.\n   */\n  closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n};\n"]}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
+import type { HeaderBaseProps } from "../HeaderBase/index.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * HeaderStandard component props.
+ */
+export type HeaderStandardProps = HeaderBaseProps & {
+    /**
+     * Title to display in the header. Can be a string or a React node.
+     * Used as children if children prop is not provided.
+     * When string: rendered with TextVariant.BodyMd and FontWeight.Bold by default; titleProps apply.
+     * When node: rendered as-is; titleProps are not applied.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Additional props to pass to the title Text component.
+     * Props are spread to the Text component and can override default values.
+     * Only applied when title is a string.
+     */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Subtitle to display below the title. Can be a string or a React node.
+     * When string: rendered with TextVariant.BodySm and TextColor.TextAlternative by default; subtitleProps apply.
+     * When node: rendered as-is; subtitleProps are not applied (add spacing on your root if needed, e.g. twClassName).
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Additional props to pass to the subtitle Text component.
+     * Props are spread to the Text component and can override default values.
+     * Only applied when subtitle is a string.
+     */
+    subtitleProps?: Partial<TextProps>;
+    /**
+     * Callback when the back button is pressed.
+     * If provided, a back button will be rendered as startButtonIconProps.
+     */
+    onBack?: () => void;
+    /**
+     * Additional props to pass to the back ButtonIcon.
+     * If provided, a back button will be rendered as startButtonIconProps with these props spread.
+     */
+    backButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Callback when the close button is pressed.
+     * If provided, a close button will be added to endButtonIconProps.
+     */
+    onClose?: () => void;
+    /**
+     * Additional props to pass to the close ButtonIcon.
+     * If provided, a close button will be added to endButtonIconProps with these props spread.
+     */
+    closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+};
+//# sourceMappingURL=HeaderStandard.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;CACtD,CAAC"}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import type { ButtonIconProps } from "../ButtonIcon/index.mjs";
+import type { HeaderBaseProps } from "../HeaderBase/index.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * HeaderStandard component props.
+ */
+export type HeaderStandardProps = HeaderBaseProps & {
+    /**
+     * Title to display in the header. Can be a string or a React node.
+     * Used as children if children prop is not provided.
+     * When string: rendered with TextVariant.BodyMd and FontWeight.Bold by default; titleProps apply.
+     * When node: rendered as-is; titleProps are not applied.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Additional props to pass to the title Text component.
+     * Props are spread to the Text component and can override default values.
+     * Only applied when title is a string.
+     */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Subtitle to display below the title. Can be a string or a React node.
+     * When string: rendered with TextVariant.BodySm and TextColor.TextAlternative by default; subtitleProps apply.
+     * When node: rendered as-is; subtitleProps are not applied (add spacing on your root if needed, e.g. twClassName).
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Additional props to pass to the subtitle Text component.
+     * Props are spread to the Text component and can override default values.
+     * Only applied when subtitle is a string.
+     */
+    subtitleProps?: Partial<TextProps>;
+    /**
+     * Callback when the back button is pressed.
+     * If provided, a back button will be rendered as startButtonIconProps.
+     */
+    onBack?: () => void;
+    /**
+     * Additional props to pass to the back ButtonIcon.
+     * If provided, a back button will be rendered as startButtonIconProps with these props spread.
+     */
+    backButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Callback when the close button is pressed.
+     * If provided, a close button will be added to endButtonIconProps.
+     */
+    onClose?: () => void;
+    /**
+     * Additional props to pass to the close ButtonIcon.
+     * If provided, a close button will be added to endButtonIconProps with these props spread.
+     */
+    closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+};
+//# sourceMappingURL=HeaderStandard.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.types.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;CACtD,CAAC"}

package/dist/components/HeaderStandard/HeaderStandard.types.mjs

@@ -0,0 +1,10 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+// Third party dependencies.
+import $React from "react";
+const React = $importDefault($React);
+//# sourceMappingURL=HeaderStandard.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderStandard.types.mjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.types.ts"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,MAAK,cAAc","sourcesContent":["// Third party dependencies.\nimport React from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { HeaderBaseProps } from '../HeaderBase';\nimport type { TextProps } from '../Text';\n\n/**\n * HeaderStandard component props.\n */\nexport type HeaderStandardProps = HeaderBaseProps & {\n  /**\n   * Title to display in the header. Can be a string or a React node.\n   * Used as children if children prop is not provided.\n   * When string: rendered with TextVariant.BodyMd and FontWeight.Bold by default; titleProps apply.\n   * When node: rendered as-is; titleProps are not applied.\n   */\n  title?: string | React.ReactNode;\n  /**\n   * Additional props to pass to the title Text component.\n   * Props are spread to the Text component and can override default values.\n   * Only applied when title is a string.\n   */\n  titleProps?: Partial<TextProps>;\n  /**\n   * Subtitle to display below the title. Can be a string or a React node.\n   * When string: rendered with TextVariant.BodySm and TextColor.TextAlternative by default; subtitleProps apply.\n   * When node: rendered as-is; subtitleProps are not applied (add spacing on your root if needed, e.g. twClassName).\n   */\n  subtitle?: string | React.ReactNode;\n  /**\n   * Additional props to pass to the subtitle Text component.\n   * Props are spread to the Text component and can override default values.\n   * Only applied when subtitle is a string.\n   */\n  subtitleProps?: Partial<TextProps>;\n  /**\n   * Callback when the back button is pressed.\n   * If provided, a back button will be rendered as startButtonIconProps.\n   */\n  onBack?: () => void;\n  /**\n   * Additional props to pass to the back ButtonIcon.\n   * If provided, a back button will be rendered as startButtonIconProps with these props spread.\n   */\n  backButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Callback when the close button is pressed.\n   * If provided, a close button will be added to endButtonIconProps.\n   */\n  onClose?: () => void;\n  /**\n   * Additional props to pass to the close ButtonIcon.\n   * If provided, a close button will be added to endButtonIconProps with these props spread.\n   */\n  closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n};\n"]}

package/dist/components/HeaderStandard/index.cjs

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/HeaderStandard/index.mjs

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

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

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

package/dist/components/KeyValueRow/KeyValueLabel/KeyValueLabel.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.KeyValueRowLabel = void 0;
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native/index.js");
@@ -29,5 +30,5 @@ const KeyValueRowLabel = ({ label, tooltip, }) => {
       {hasTooltip && tooltip && (<ButtonIcon_1.ButtonIcon size={tooltip.size ?? ButtonIcon_1.ButtonIconSize.Md} iconName={tooltip.iconName ?? Icon_1.IconName.Question} accessibilityLabel={`${tooltip.title} tooltip`} onPress={() => tooltip?.onPress?.()}/>)}
     </react_native_1.View>);
 };
-exports.default = KeyValueRowLabel;
+exports.KeyValueRowLabel = KeyValueRowLabel;
 //# sourceMappingURL=KeyValueLabel.cjs.map

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

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

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

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

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

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

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

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

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

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,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mCAAyB;AAC9D,OAAO,EAAE,QAAQ,EAAE,6BAAmB;AACtC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,6BAAmB;AAE1D,OAAO,EAAE,4BAA4B,EAAE,iCAA6B;AAEpE;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,KAAK,EACL,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,OAAO,CAAC,CAAC;IAE/D,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAC7C;MAAA,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrC,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,MAAM,CAAC,CAC7C,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,CAAC,CAE5C;UAAA,CAAC,KAAK,CAAC,IAAI,CACb;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CACD;MAAA,CAAC,UAAU,IAAI,OAAO,IAAI,CACxB,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,cAAc,CAAC,EAAE,CAAC,CACxC,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAChD,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,UAAU,CAAC,CAC/C,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,EACpC,CACH,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { ButtonIcon, ButtonIconSize } from '../../ButtonIcon';\nimport { IconName } from '../../Icon';\nimport { Text, TextColor, TextVariant } from '../../Text';\nimport type { KeyValueRowLabelProps } from '../KeyValueRow.types';\nimport { isPreDefinedKeyValueRowLabel } from '../KeyValueRow.utils';\n\n/**\n * A label and optional tooltip button component.\n *\n * @param props - Component props.\n * @param props.label - The label content to display.\n * @param props.tooltip - Optional tooltip to render to the right of the label.\n *\n * @returns The rendered KeyValueRowLabel component.\n */\nconst KeyValueRowLabel: React.FC<KeyValueRowLabelProps> = ({\n  label,\n  tooltip,\n}) => {\n  const tw = useTailwind();\n\n  const hasTooltip = Boolean(tooltip?.title && tooltip?.content);\n\n  return (\n    <View style={tw.style('flex-row items-center')}>\n      {isPreDefinedKeyValueRowLabel(label) ? (\n        <Text\n          variant={label.variant ?? TextVariant.BodyMd}\n          color={label.color ?? TextColor.TextDefault}\n        >\n          {label.text}\n        </Text>\n      ) : (\n        label\n      )}\n      {hasTooltip && tooltip && (\n        <ButtonIcon\n          size={tooltip.size ?? ButtonIconSize.Md}\n          iconName={tooltip.iconName ?? IconName.Question}\n          accessibilityLabel={`${tooltip.title} tooltip`}\n          onPress={() => tooltip?.onPress?.()}\n        />\n      )}\n    </View>\n  );\n};\n\nexport default KeyValueRowLabel;\n"]}
+{"version":3,"file":"KeyValueLabel.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mCAAyB;AAC9D,OAAO,EAAE,QAAQ,EAAE,6BAAmB;AACtC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,6BAAmB;AAE1D,OAAO,EAAE,4BAA4B,EAAE,iCAA6B;AAEpE;;;;;;;;GAQG;AACH,MAAM,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/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/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,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAoC;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uDAAuD,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { KeyValueRowRootProps } from '../KeyValueRow.types';\n\n/**\n * The main container for the KeyValueRow component.\n * When creating custom KeyValueRow components, this must be the outermost component\n * wrapping the two <KeyValueSection/> components.\n *\n * e.g.\n * ```\n * <KeyValueRowRoot>\n *  <KeyValueSection></KeyValueSection>\n *  <KeyValueSection></KeyValueSection>\n * </KeyValueRowRoot>\n * ```\n *\n * @param props - Component props.\n * @param props.children - The two <KeyValueSection> children.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered Root component.\n */\nconst KeyValueRowRoot: React.FC<KeyValueRowRootProps> = ({\n  children,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      style={[\n        tw.style(\n          'flex-row justify-between items-center overflow-hidden',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueRowRoot;\n"]}
+{"version":3,"file":"KeyValueRoot.cjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,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/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,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,EACR,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uDAAuD,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { KeyValueRowRootProps } from '../KeyValueRow.types';\n\n/**\n * The main container for the KeyValueRow component.\n * When creating custom KeyValueRow components, this must be the outermost component\n * wrapping the two <KeyValueSection/> components.\n *\n * e.g.\n * ```\n * <KeyValueRowRoot>\n *  <KeyValueSection></KeyValueSection>\n *  <KeyValueSection></KeyValueSection>\n * </KeyValueRowRoot>\n * ```\n *\n * @param props - Component props.\n * @param props.children - The two <KeyValueSection> children.\n * @param props.twClassName - Optional Tailwind class names to override root styles.\n * @param props.style - Optional additional styles for the root element.\n *\n * @returns The rendered Root component.\n */\nconst KeyValueRowRoot: React.FC<KeyValueRowRootProps> = ({\n  children,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      style={[\n        tw.style(\n          'flex-row justify-between items-center overflow-hidden',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </View>\n  );\n};\n\nexport default KeyValueRowRoot;\n"]}
+{"version":3,"file":"KeyValueRoot.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueRoot/KeyValueRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAIpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,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/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/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