@metamask/design-system-react-native 0.11.0 → 0.12.0

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { KeyValueSectionProps } from "../KeyValueRow.types.mjs";
+/**
+ * A container representing either the left or right side of the KeyValueRow.
+ * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.
+ *
+ * @param props - Component props.
+ * @param props.children - The child components.
+ * @param props.align - The alignment of the section.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered KeyValueSection component.
+ */
+declare const KeyValueSection: React.FC<KeyValueSectionProps>;
+export default KeyValueSection;
+//# sourceMappingURL=KeyValueSection.d.mts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { View } from "react-native/index.js";
+import { KeyValueRowSectionAlignments } from "../KeyValueRow.types.mjs";
+/**
+ * A container representing either the left or right side of the KeyValueRow.
+ * For desired results, use only two <KeyValueSection> components within the <KeyValueRowRoot>.
+ *
+ * @param props - Component props.
+ * @param props.children - The child components.
+ * @param props.align - The alignment of the section.
+ * @param props.twClassName - Optional Tailwind class names to override root styles.
+ * @param props.style - Optional additional styles for the root element.
+ *
+ * @returns The rendered KeyValueSection component.
+ */
+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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueSection.mjs","sourceRoot":"","sources":["../../../../src/components/KeyValueRow/KeyValueSection/KeyValueSection.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,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/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"]}

package/dist/components/KeyValueRow/index.cjs

@@ -0,0 +1,15 @@
+"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;
+var KeyValueRow_1 = require("./KeyValueRow.cjs");
+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; } });
+Object.defineProperty(exports, "TooltipSizes", { enumerable: true, get: function () { return KeyValueRow_types_1.TooltipSizes; } });
+Object.defineProperty(exports, "IconSizes", { enumerable: true, get: function () { return KeyValueRow_types_1.IconSizes; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+export { KeyValueRowStubs, default } 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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { KeyValueRowStubs, default } 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

@@ -0,0 +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"}

package/dist/components/KeyValueRow/index.mjs

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

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

@@ -0,0 +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"]}

package/dist/components/TextButton/TextButton.cjs

@@ -24,45 +24,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextButton = void 0;
-const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native/index.js");
 const types_1 = require("../../types/index.cjs");
-const Icon_1 = require("../Icon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
-const TextButton_constants_1 = require("./TextButton.constants.cjs");
-const TextButton = ({ children, size = types_1.TextButtonSize.BodyMd, textProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = false, isInverse = false, twClassName = '', accessibilityRole, accessibilityLabel, style, ...props }) => {
-    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    /**
-     * Calculating the baselineOffset. This baselineOffset is needed to make sure
-     * the TextButton aligns perfectly when placed within Text elements
-     */
-    // eslint-disable-next-line tailwindcss/no-custom-classname
-    const { fontSize, lineHeight } = tw `text-${TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}`;
-    const baselineOffset = (lineHeight - fontSize) / 2;
-    const getTextColor = (0, react_1.useCallback)((pressed) => {
-        if (isInverse) {
-            return 'text-primary-inverse';
-        }
-        return pressed ? 'text-primary-default-pressed' : 'text-primary-default';
-    }, [isInverse]);
-    const getTextDecoration = (0, react_1.useCallback)((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
-    return (<Text_1.Text>
-      <react_native_1.Pressable accessibilityRole={accessibilityRole ?? 'button'} accessibilityLabel={accessibilityLabel} disabled={isDisabled} style={({ pressed }) => [
-            { transform: [{ translateY: baselineOffset }] },
-            tw `flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,
-            style,
-        ]} {...props}>
-        {({ pressed }) => (<>
-            {startIconName ? (<Icon_1.Icon name={startIconName} size={Icon_1.IconSize.Sm} testID="start-icon" twClassName={`${getTextColor(pressed)} mr-1`} {...startIconProps}/>) : (startAccessory)}
-
-            <Text_1.Text variant={TextButton_constants_1.MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}>
-              {children}
-            </Text_1.Text>
-
-            {endIconName ? (<Icon_1.Icon name={endIconName} size={Icon_1.IconSize.Sm} testID="end-icon" twClassName={`${getTextColor(pressed)} ml-1`} {...endIconProps}/>) : (endAccessory)}
-          </>)}
-      </react_native_1.Pressable>
+const TextButton = ({ children, variant = types_1.TextVariant.BodyMd, fontWeight = Text_1.FontWeight.Medium, twClassName, accessibilityRole = 'link', onPress, onPressIn, onPressOut, suppressHighlighting = true, ...rest }) => {
+    const [pressed, setPressed] = (0, react_1.useState)(false);
+    const handlePressIn = (e) => {
+        setPressed(true);
+        onPressIn?.(e);
+    };
+    const handlePressOut = (e) => {
+        setPressed(false);
+        onPressOut?.(e);
+    };
+    return (<Text_1.Text {...rest} accessibilityRole={accessibilityRole} variant={variant} fontWeight={fontWeight} color={pressed ? types_1.TextColor.PrimaryDefaultPressed : types_1.TextColor.PrimaryDefault} twClassName={twClassName} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut} suppressHighlighting={suppressHighlighting}>
+      {children}
     </Text_1.Text>);
 };
 exports.TextButton = TextButton;

package/dist/components/TextButton/TextButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextButton.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+CAA2C;AAC3C,wDAAyC;AAEzC,iDAA6C;AAC7C,4CAAyC;AACzC,4CAA2C;AAE3C,qEAAyE;AAGlE,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,MAAM,EAC5B,SAAS,EACT,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB;;;OAGG;IACH,2DAA2D;IAC3D,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAA,QACjC,sDAA+B,CAAC,IAAI,CACtC,EAGC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,SAAS,EAAE;YACb,OAAO,sBAAsB,CAAC;SAC/B;QACD,OAAO,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,sBAAsB,CAAC;IAC3E,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,OAAgB,EAAU,EAAE,CAC3B,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,EACrD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,WAAI,CACH;MAAA,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACjD,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtB,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,EAAE;YAC/C,EAAE,CAAA,yBAAyB,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,IAAI,WAAW,EAAE;YAClI,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;YAAA,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,YAAY,CACnB,WAAW,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CAED;;YAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,sDAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,GAAG,CAAC,CAExG;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,WAAI,CAEN;;YAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,MAAM,CAAC,UAAU,CACjB,WAAW,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAC7C,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACH;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,wBAAS,CACb;IAAA,EAAE,WAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AApGW,QAAA,UAAU,cAoGrB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { TextButtonSize } from '../../types';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight } from '../Text';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSize.BodyMd,\n  textProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled = false,\n  isInverse = false,\n  twClassName = '',\n  accessibilityRole,\n  accessibilityLabel,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  /**\n   * Calculating the baselineOffset. This baselineOffset is needed to make sure\n   * the TextButton aligns perfectly when placed within Text elements\n   */\n  // eslint-disable-next-line tailwindcss/no-custom-classname\n  const { fontSize, lineHeight } = tw`text-${\n    MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size] as string\n  }` as {\n    fontSize: number;\n    lineHeight: number;\n  };\n  const baselineOffset = (lineHeight - fontSize) / 2;\n\n  const getTextColor = useCallback(\n    (pressed: boolean): string => {\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      return pressed ? 'text-primary-default-pressed' : 'text-primary-default';\n    },\n    [isInverse],\n  );\n\n  const getTextDecoration = useCallback(\n    (pressed: boolean): string =>\n      isInverse || pressed ? 'underline' : 'no-underline',\n    [isInverse],\n  );\n\n  return (\n    <Text>\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        accessibilityLabel={accessibilityLabel}\n        disabled={isDisabled}\n        style={({ pressed }) => [\n          { transform: [{ translateY: baselineOffset }] },\n          tw`flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,\n          style,\n        ]}\n        {...props}\n      >\n        {({ pressed }) => (\n          <>\n            {startIconName ? (\n              <Icon\n                name={startIconName}\n                size={IconSize.Sm}\n                testID=\"start-icon\"\n                twClassName={`${getTextColor(pressed)} mr-1`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n\n            <Text\n              variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}\n              fontWeight={FontWeight.Medium}\n              {...textProps}\n              twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}\n            >\n              {children}\n            </Text>\n\n            {endIconName ? (\n              <Icon\n                name={endIconName}\n                size={IconSize.Sm}\n                testID=\"end-icon\"\n                twClassName={`${getTextColor(pressed)} ml-1`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </>\n        )}\n      </Pressable>\n    </Text>\n  );\n};\n"]}
+{"version":3,"file":"TextButton.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,iDAAqD;AACrD,4CAA2C;AAIpC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,OAAO,GAAG,mBAAW,CAAC,MAAM,EAC5B,UAAU,GAAG,iBAAU,CAAC,MAAM,EAC9B,WAAW,EACX,iBAAiB,GAAG,MAAM,EAC1B,OAAO,EACP,SAAS,EACT,UAAU,EACV,oBAAoB,GAAG,IAAI,EAC3B,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,aAAa,GAA8C,CAAC,CAAC,EAAE,EAAE;QACrE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,cAAc,GAA+C,CAAC,CAAC,EAAE,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,WAAI,CACH,IAAI,IAAI,CAAC,CACT,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CACJ,OAAO,CAAC,CAAC,CAAC,iBAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAS,CAAC,cAAc,CACrE,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,CAC3B,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAE3C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,WAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,UAAU,cA0CrB","sourcesContent":["import React, { useState } from 'react';\n\nimport { TextVariant, TextColor } from '../../types';\nimport { Text, FontWeight } from '../Text';\n\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  variant = TextVariant.BodyMd,\n  fontWeight = FontWeight.Medium,\n  twClassName,\n  accessibilityRole = 'link',\n  onPress,\n  onPressIn,\n  onPressOut,\n  suppressHighlighting = true,\n  ...rest\n}) => {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn: NonNullable<TextButtonProps['onPressIn']> = (e) => {\n    setPressed(true);\n    onPressIn?.(e);\n  };\n\n  const handlePressOut: NonNullable<TextButtonProps['onPressOut']> = (e) => {\n    setPressed(false);\n    onPressOut?.(e);\n  };\n\n  return (\n    <Text\n      {...rest}\n      accessibilityRole={accessibilityRole}\n      variant={variant}\n      fontWeight={fontWeight}\n      color={\n        pressed ? TextColor.PrimaryDefaultPressed : TextColor.PrimaryDefault\n      }\n      twClassName={twClassName}\n      onPress={onPress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting={suppressHighlighting}\n    >\n      {children}\n    </Text>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAQ3C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoGhD,CAAC"}
+{"version":3,"file":"TextButton.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ChD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAQ3C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoGhD,CAAC"}
+{"version":3,"file":"TextButton.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ChD,CAAC"}

package/dist/components/TextButton/TextButton.mjs

@@ -4,46 +4,22 @@ function $importDefault(module) {
     }
     return module;
 }
-import { useTailwind } from "@metamask/design-system-twrnc-preset";
-import $React, { useCallback } from "react";
+import $React, { useState } from "react";
 const React = $importDefault($React);
-import { Pressable } from "react-native/index.js";
-import { TextButtonSize } from "../../types/index.mjs";
-import { Icon, IconSize } from "../Icon/index.mjs";
+import { TextVariant, TextColor } from "../../types/index.mjs";
 import { Text, FontWeight } from "../Text/index.mjs";
-import { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from "./TextButton.constants.mjs";
-export const TextButton = ({ children, size = TextButtonSize.BodyMd, textProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = false, isInverse = false, twClassName = '', accessibilityRole, accessibilityLabel, style, ...props }) => {
-    const tw = useTailwind();
-    /**
-     * Calculating the baselineOffset. This baselineOffset is needed to make sure
-     * the TextButton aligns perfectly when placed within Text elements
-     */
-    // eslint-disable-next-line tailwindcss/no-custom-classname
-    const { fontSize, lineHeight } = tw `text-${MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}`;
-    const baselineOffset = (lineHeight - fontSize) / 2;
-    const getTextColor = useCallback((pressed) => {
-        if (isInverse) {
-            return 'text-primary-inverse';
-        }
-        return pressed ? 'text-primary-default-pressed' : 'text-primary-default';
-    }, [isInverse]);
-    const getTextDecoration = useCallback((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
-    return (<Text>
-      <Pressable accessibilityRole={accessibilityRole ?? 'button'} accessibilityLabel={accessibilityLabel} disabled={isDisabled} style={({ pressed }) => [
-            { transform: [{ translateY: baselineOffset }] },
-            tw `flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,
-            style,
-        ]} {...props}>
-        {({ pressed }) => (<>
-            {startIconName ? (<Icon name={startIconName} size={IconSize.Sm} testID="start-icon" twClassName={`${getTextColor(pressed)} mr-1`} {...startIconProps}/>) : (startAccessory)}
-
-            <Text variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]} fontWeight={FontWeight.Medium} {...textProps} twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}>
-              {children}
-            </Text>
-
-            {endIconName ? (<Icon name={endIconName} size={IconSize.Sm} testID="end-icon" twClassName={`${getTextColor(pressed)} ml-1`} {...endIconProps}/>) : (endAccessory)}
-          </>)}
-      </Pressable>
+export const TextButton = ({ children, variant = TextVariant.BodyMd, fontWeight = FontWeight.Medium, twClassName, accessibilityRole = 'link', onPress, onPressIn, onPressOut, suppressHighlighting = true, ...rest }) => {
+    const [pressed, setPressed] = useState(false);
+    const handlePressIn = (e) => {
+        setPressed(true);
+        onPressIn?.(e);
+    };
+    const handlePressOut = (e) => {
+        setPressed(false);
+        onPressOut?.(e);
+    };
+    return (<Text {...rest} accessibilityRole={accessibilityRole} variant={variant} fontWeight={fontWeight} color={pressed ? TextColor.PrimaryDefaultPressed : TextColor.PrimaryDefault} twClassName={twClassName} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut} suppressHighlighting={suppressHighlighting}>
+      {children}
     </Text>);
 };
 //# sourceMappingURL=TextButton.mjs.map

package/dist/components/TextButton/TextButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { TextButtonSize } from '../../types';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight } from '../Text';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  size = TextButtonSize.BodyMd,\n  textProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled = false,\n  isInverse = false,\n  twClassName = '',\n  accessibilityRole,\n  accessibilityLabel,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n  /**\n   * Calculating the baselineOffset. This baselineOffset is needed to make sure\n   * the TextButton aligns perfectly when placed within Text elements\n   */\n  // eslint-disable-next-line tailwindcss/no-custom-classname\n  const { fontSize, lineHeight } = tw`text-${\n    MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size] as string\n  }` as {\n    fontSize: number;\n    lineHeight: number;\n  };\n  const baselineOffset = (lineHeight - fontSize) / 2;\n\n  const getTextColor = useCallback(\n    (pressed: boolean): string => {\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      return pressed ? 'text-primary-default-pressed' : 'text-primary-default';\n    },\n    [isInverse],\n  );\n\n  const getTextDecoration = useCallback(\n    (pressed: boolean): string =>\n      isInverse || pressed ? 'underline' : 'no-underline',\n    [isInverse],\n  );\n\n  return (\n    <Text>\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        accessibilityLabel={accessibilityLabel}\n        disabled={isDisabled}\n        style={({ pressed }) => [\n          { transform: [{ translateY: baselineOffset }] },\n          tw`flex-row items-center ${pressed ? 'bg-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,\n          style,\n        ]}\n        {...props}\n      >\n        {({ pressed }) => (\n          <>\n            {startIconName ? (\n              <Icon\n                name={startIconName}\n                size={IconSize.Sm}\n                testID=\"start-icon\"\n                twClassName={`${getTextColor(pressed)} mr-1`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n\n            <Text\n              variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}\n              fontWeight={FontWeight.Medium}\n              {...textProps}\n              twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}\n            >\n              {children}\n            </Text>\n\n            {endIconName ? (\n              <Icon\n                name={endIconName}\n                size={IconSize.Sm}\n                testID=\"end-icon\"\n                twClassName={`${getTextColor(pressed)} ml-1`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </>\n        )}\n      </Pressable>\n    </Text>\n  );\n};\n"]}
+{"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,8BAAoB;AACrD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,0BAAgB;AAI3C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,OAAO,GAAG,WAAW,CAAC,MAAM,EAC5B,UAAU,GAAG,UAAU,CAAC,MAAM,EAC9B,WAAW,EACX,iBAAiB,GAAG,MAAM,EAC1B,OAAO,EACP,SAAS,EACT,UAAU,EACV,oBAAoB,GAAG,IAAI,EAC3B,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,aAAa,GAA8C,CAAC,CAAC,EAAE,EAAE;QACrE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,cAAc,GAA+C,CAAC,CAAC,EAAE,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,IAAI,CAAC,CACT,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CACJ,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CACrE,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,CAC3B,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAE3C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState } from 'react';\n\nimport { TextVariant, TextColor } from '../../types';\nimport { Text, FontWeight } from '../Text';\n\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n  children,\n  variant = TextVariant.BodyMd,\n  fontWeight = FontWeight.Medium,\n  twClassName,\n  accessibilityRole = 'link',\n  onPress,\n  onPressIn,\n  onPressOut,\n  suppressHighlighting = true,\n  ...rest\n}) => {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn: NonNullable<TextButtonProps['onPressIn']> = (e) => {\n    setPressed(true);\n    onPressIn?.(e);\n  };\n\n  const handlePressOut: NonNullable<TextButtonProps['onPressOut']> = (e) => {\n    setPressed(false);\n    onPressOut?.(e);\n  };\n\n  return (\n    <Text\n      {...rest}\n      accessibilityRole={accessibilityRole}\n      variant={variant}\n      fontWeight={fontWeight}\n      color={\n        pressed ? TextColor.PrimaryDefaultPressed : TextColor.PrimaryDefault\n      }\n      twClassName={twClassName}\n      onPress={onPress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting={suppressHighlighting}\n    >\n      {children}\n    </Text>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { TextButtonSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * TextButton component props.\n */\nexport type TextButtonProps = {\n  /**\n   * Required prop for the content to be rendered within the TextButton\n   */\n  children: string;\n  /**\n   * Optional prop to control the size of the TextButton\n   *\n   * @default TextButtonSize.BodyMd\n   */\n  size?: TextButtonSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & Omit<PressableProps, 'disabled'>;\n"]}
+{"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Props for `TextButton`, a text-only control for links and inline actions.\n * Extends {@link Text} props.\n */\nexport type TextButtonProps = Omit<\n  TextProps,\n  'children' | 'color' | 'onPress'\n> & {\n  /**\n   * Content shown as the label.\n   */\n  children: React.ReactNode;\n  /**\n   * Called when the user presses the label. Primary interaction for this control.\n   */\n  onPress?: TextProps['onPress'];\n};\n"]}

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

@@ -1,68 +1,16 @@
-import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
-import type { TextButtonSize } from "../../types/index.cjs";
-import type { IconProps, IconName } from "../Icon/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
 /**
- * TextButton component props.
+ * Props for `TextButton`, a text-only control for links and inline actions.
+ * Extends {@link Text} props.
  */
-export type TextButtonProps = {
+export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> & {
     /**
-     * Required prop for the content to be rendered within the TextButton
+     * Content shown as the label.
      */
-    children: string;
+    children: React.ReactNode;
     /**
-     * Optional prop to control the size of the TextButton
-     *
-     * @default TextButtonSize.BodyMd
+     * Called when the user presses the label. Primary interaction for this control.
      */
-    size?: TextButtonSize;
-    /**
-     * Optional props to be passed to the Text component when children is a string
-     */
-    textProps?: Omit<Partial<TextProps>, 'children'>;
-    /**
-     * Optional prop to specify an icon to show at the start of the button
-     */
-    startIconName?: IconName;
-    /**
-     * Optional prop to pass additional properties to the start icon
-     */
-    startIconProps?: Partial<IconProps>;
-    /**
-     * Optional prop for a custom element to show at the start of the button
-     */
-    startAccessory?: React.ReactNode;
-    /**
-     * Optional prop to specify an icon to show at the end of the button
-     */
-    endIconName?: IconName;
-    /**
-     * Optional prop to pass additional properties to the end icon
-     */
-    endIconProps?: Partial<IconProps>;
-    /**
-     * Optional prop for a custom element to show at the end of the button
-     */
-    endAccessory?: React.ReactNode;
-    /**
-     * Optional prop that when true, disables the button
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
-     *
-     * @default false
-     */
-    isInverse?: boolean;
-    /**
-     * Optional prop to add twrnc overriding classNames.
-     */
-    twClassName?: string;
-    /**
-     * Optional prop to control the style.
-     */
-    style?: StyleProp<ViewStyle>;
-} & Omit<PressableProps, 'disabled'>;
+    onPress?: TextProps['onPress'];
+};
 //# sourceMappingURL=TextButton.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,UAAU,GAAG,OAAO,GAAG,SAAS,CACjC,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC"}

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

@@ -1,68 +1,16 @@
-import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
-import type { TextButtonSize } from "../../types/index.mjs";
-import type { IconProps, IconName } from "../Icon/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
 /**
- * TextButton component props.
+ * Props for `TextButton`, a text-only control for links and inline actions.
+ * Extends {@link Text} props.
  */
-export type TextButtonProps = {
+export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> & {
     /**
-     * Required prop for the content to be rendered within the TextButton
+     * Content shown as the label.
      */
-    children: string;
+    children: React.ReactNode;
     /**
-     * Optional prop to control the size of the TextButton
-     *
-     * @default TextButtonSize.BodyMd
+     * Called when the user presses the label. Primary interaction for this control.
      */
-    size?: TextButtonSize;
-    /**
-     * Optional props to be passed to the Text component when children is a string
-     */
-    textProps?: Omit<Partial<TextProps>, 'children'>;
-    /**
-     * Optional prop to specify an icon to show at the start of the button
-     */
-    startIconName?: IconName;
-    /**
-     * Optional prop to pass additional properties to the start icon
-     */
-    startIconProps?: Partial<IconProps>;
-    /**
-     * Optional prop for a custom element to show at the start of the button
-     */
-    startAccessory?: React.ReactNode;
-    /**
-     * Optional prop to specify an icon to show at the end of the button
-     */
-    endIconName?: IconName;
-    /**
-     * Optional prop to pass additional properties to the end icon
-     */
-    endIconProps?: Partial<IconProps>;
-    /**
-     * Optional prop for a custom element to show at the end of the button
-     */
-    endAccessory?: React.ReactNode;
-    /**
-     * Optional prop that when true, disables the button
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
-     *
-     * @default false
-     */
-    isInverse?: boolean;
-    /**
-     * Optional prop to add twrnc overriding classNames.
-     */
-    twClassName?: string;
-    /**
-     * Optional prop to control the style.
-     */
-    style?: StyleProp<ViewStyle>;
-} & Omit<PressableProps, 'disabled'>;
+    onPress?: TextProps['onPress'];
+};
 //# sourceMappingURL=TextButton.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,UAAU,GAAG,OAAO,GAAG,SAAS,CACjC,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { TextButtonSize } from '../../types';\nimport type { IconProps, IconName } from '../Icon';\nimport type { TextProps } from '../Text';\n\n/**\n * TextButton component props.\n */\nexport type TextButtonProps = {\n  /**\n   * Required prop for the content to be rendered within the TextButton\n   */\n  children: string;\n  /**\n   * Optional prop to control the size of the TextButton\n   *\n   * @default TextButtonSize.BodyMd\n   */\n  size?: TextButtonSize;\n  /**\n   * Optional props to be passed to the Text component when children is a string\n   */\n  textProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional prop to specify an icon to show at the start of the button\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the start of the button\n   */\n  startAccessory?: React.ReactNode;\n  /**\n   * Optional prop to specify an icon to show at the end of the button\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop for a custom element to show at the end of the button\n   */\n  endAccessory?: React.ReactNode;\n  /**\n   * Optional prop that when true, disables the button\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.\n   *\n   * @default false\n   */\n  isInverse?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & Omit<PressableProps, 'disabled'>;\n"]}
+{"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Props for `TextButton`, a text-only control for links and inline actions.\n * Extends {@link Text} props.\n */\nexport type TextButtonProps = Omit<\n  TextProps,\n  'children' | 'color' | 'onPress'\n> & {\n  /**\n   * Content shown as the label.\n   */\n  children: React.ReactNode;\n  /**\n   * Called when the user presses the label. Primary interaction for this control.\n   */\n  onPress?: TextProps['onPress'];\n};\n"]}

package/dist/components/TextButton/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,uGAAA,cAAc,OAAA;AACvB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { TextButtonSize } from '../../types';\nexport { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}

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

@@ -1,4 +1,3 @@
-export { TextButtonSize } from "../../types/index.cjs";
 export { TextButton } from "./TextButton.cjs";
 export type { TextButtonProps } from "./TextButton.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

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

@@ -1,4 +1,3 @@
-export { TextButtonSize } from "../../types/index.mjs";
 export { TextButton } from "./TextButton.mjs";
 export type { TextButtonProps } from "./TextButton.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/TextButton/index.mjs

@@ -1,3 +1,2 @@
-export { TextButtonSize } from "../../types/index.mjs";
 export { TextButton } from "./TextButton.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { TextButtonSize } from '../../types';\nexport { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton.types';\n"]}