@metamask-previews/design-system-react-native 0.13.0-preview.dbe1fac → 0.14.0-preview.4ce710b

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

@@ -1,44 +1,12 @@
+import type { TextPropsShared } from "@metamask-previews/design-system-shared";
 import type { TextProps as RNTextProps } from "react-native/index.js";
-import type { TextVariant, TextColor, FontWeight, FontFamily, FontStyle } from "../../types/index.cjs";
 /**
  * Text component props.
  */
-export type TextProps = {
-    /**
-     * Optional enum to select between Typography variants.
-     *
-     * @default BodyMD
-     */
-    variant?: TextVariant;
-    /**
-     * Text to be displayed.
-     */
-    children: React.ReactNode;
-    /**
-     * Optional prop to add color to text.
-     */
-    color?: TextColor;
-    /**
-     * Optional prop to control the font weight of the text.
-     * Normal: 400
-     * Medium: 500
-     * Bold: 600
-     */
-    fontWeight?: FontWeight;
-    /**
-     * Optional prop to adjust the font family.
-     * Default: Geist
-     * Accent: MM Sans
-     * Hero: MM Poly
-     */
-    fontFamily?: FontFamily;
-    /**
-     * Optional prop to adjust the style of the font.
-     */
-    fontStyle?: FontStyle;
+export type TextProps = TextPropsShared & RNTextProps & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & RNTextProps;
+};
 //# sourceMappingURL=Text.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.d.cts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,8BAAqB;AAE7D,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACV,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC"}
+{"version":3,"file":"Text.types.d.cts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gDAAgD;AAC/E,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,8BAAqB;AAE7D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,eAAe,GACrC,WAAW,GAAG;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1,44 +1,12 @@
+import type { TextPropsShared } from "@metamask-previews/design-system-shared";
 import type { TextProps as RNTextProps } from "react-native/index.js";
-import type { TextVariant, TextColor, FontWeight, FontFamily, FontStyle } from "../../types/index.mjs";
 /**
  * Text component props.
  */
-export type TextProps = {
-    /**
-     * Optional enum to select between Typography variants.
-     *
-     * @default BodyMD
-     */
-    variant?: TextVariant;
-    /**
-     * Text to be displayed.
-     */
-    children: React.ReactNode;
-    /**
-     * Optional prop to add color to text.
-     */
-    color?: TextColor;
-    /**
-     * Optional prop to control the font weight of the text.
-     * Normal: 400
-     * Medium: 500
-     * Bold: 600
-     */
-    fontWeight?: FontWeight;
-    /**
-     * Optional prop to adjust the font family.
-     * Default: Geist
-     * Accent: MM Sans
-     * Hero: MM Poly
-     */
-    fontFamily?: FontFamily;
-    /**
-     * Optional prop to adjust the style of the font.
-     */
-    fontStyle?: FontStyle;
+export type TextProps = TextPropsShared & RNTextProps & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & RNTextProps;
+};
 //# sourceMappingURL=Text.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.d.mts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,8BAAqB;AAE7D,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACV,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC"}
+{"version":3,"file":"Text.types.d.mts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gDAAgD;AAC/E,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,8BAAqB;AAE7D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,eAAe,GACrC,WAAW,GAAG;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TextProps as RNTextProps } from 'react-native';\n\nimport type {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n} from '../../types';\n\n/**\n * Text component props.\n */\nexport type TextProps = {\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMD\n   */\n  variant?: TextVariant;\n  /**\n   * Text to be displayed.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to add color to text.\n   */\n  color?: TextColor;\n  /**\n   * Optional prop to control the font weight of the text.\n   * Normal: 400\n   * Medium: 500\n   * Bold: 600\n   */\n  fontWeight?: FontWeight;\n  /**\n   * Optional prop to adjust the font family.\n   * Default: Geist\n   * Accent: MM Sans\n   * Hero: MM Poly\n   */\n  fontFamily?: FontFamily;\n  /**\n   * Optional prop to adjust the style of the font.\n   */\n  fontStyle?: FontStyle;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & RNTextProps;\n"]}
+{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextPropsShared } from '@metamask-previews/design-system-shared';\nimport type { TextProps as RNTextProps } from 'react-native';\n\n/**\n * Text component props.\n */\nexport type TextProps = TextPropsShared &\n  RNTextProps & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

package/dist/components/Text/index.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextColor = exports.TextVariant = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return types_1.TextVariant; } });
-Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return types_1.TextColor; } });
-Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return types_1.FontWeight; } });
-Object.defineProperty(exports, "FontFamily", { enumerable: true, get: function () { return types_1.FontFamily; } });
-Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return types_1.FontStyle; } });
+exports.Text = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextVariant = exports.TextColor = void 0;
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return design_system_shared_1.TextColor; } });
+Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return design_system_shared_1.TextVariant; } });
+Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return design_system_shared_1.FontWeight; } });
+Object.defineProperty(exports, "FontFamily", { enumerable: true, get: function () { return design_system_shared_1.FontFamily; } });
+Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return design_system_shared_1.FontStyle; } });
 var Text_1 = require("./Text.cjs");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;AAAA,+CAMqB;AALnB,oGAAA,WAAW,OAAA;AACX,kGAAA,SAAS,OAAA;AACT,mGAAA,UAAU,OAAA;AACV,mGAAA,UAAU,OAAA;AACV,kGAAA,SAAS,OAAA;AAEX,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n} from '../../types';\nexport { Text } from './Text';\nexport type { TextProps } from './Text.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;AAAA,gFAOiD;AAN/C,iHAAA,SAAS,OAAA;AACT,mHAAA,WAAW,OAAA;AACX,kHAAA,UAAU,OAAA;AACV,kHAAA,UAAU,OAAA;AACV,iHAAA,SAAS,OAAA;AAGX,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export {\n  TextColor,\n  TextVariant,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n  type TextPropsShared,\n} from '@metamask-previews/design-system-shared';\nexport { Text } from './Text';\nexport type { TextProps } from './Text.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { TextVariant, TextColor, FontWeight, FontFamily, FontStyle, } from "../../types/index.cjs";
+export { TextColor, TextVariant, FontWeight, FontFamily, FontStyle, type TextPropsShared, } from "@metamask-previews/design-system-shared";
 export { Text } from "./Text.cjs";
 export type { TextProps } from "./Text.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,8BAAoB;AACrB,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,eAAe,GACrB,gDAAgD;AACjD,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

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

@@ -1,4 +1,4 @@
-export { TextVariant, TextColor, FontWeight, FontFamily, FontStyle, } from "../../types/index.mjs";
+export { TextColor, TextVariant, FontWeight, FontFamily, FontStyle, type TextPropsShared, } from "@metamask-previews/design-system-shared";
 export { Text } from "./Text.mjs";
 export type { TextProps } from "./Text.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,8BAAoB;AACrB,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,eAAe,GACrB,gDAAgD;AACjD,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/Text/index.mjs

@@ -1,3 +1,3 @@
-export { TextVariant, TextColor, FontWeight, FontFamily, FontStyle } from "../../types/index.mjs";
+export { TextColor, TextVariant, FontWeight, FontFamily, FontStyle } from "@metamask-previews/design-system-shared";
 export { Text } from "./Text.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACV,8BAAoB;AACrB,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export {\n  TextVariant,\n  TextColor,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n} from '../../types';\nexport { Text } from './Text';\nexport type { TextProps } from './Text.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EAEV,gDAAgD;AACjD,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export {\n  TextColor,\n  TextVariant,\n  FontWeight,\n  FontFamily,\n  FontStyle,\n  type TextPropsShared,\n} from '@metamask-previews/design-system-shared';\nexport { Text } from './Text';\nexport type { TextProps } from './Text.types';\n"]}

package/dist/components/TextButton/TextButton.cjs

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextButton = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const Text_1 = require("../Text/index.cjs");
-const TextButton = ({ children, variant = types_1.TextVariant.BodyMd, fontWeight = Text_1.FontWeight.Medium, twClassName, accessibilityRole = 'link', onPress, onPressIn, onPressOut, suppressHighlighting = true, ...rest }) => {
+const TextButton = ({ children, variant = design_system_shared_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);
@@ -37,7 +37,7 @@ const TextButton = ({ children, variant = types_1.TextVariant.BodyMd, fontWeight
         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}>
+    return (<Text_1.Text {...rest} accessibilityRole={accessibilityRole} variant={variant} fontWeight={fontWeight} color={pressed ? design_system_shared_1.TextColor.PrimaryDefaultPressed : design_system_shared_1.TextColor.PrimaryDefault} twClassName={twClassName} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut} suppressHighlighting={suppressHighlighting}>
       {children}
     </Text_1.Text>);
 };

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"TextButton.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAiF;AACjF,+CAAwC;AAExC,4CAA2C;AAIpC,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,OAAO,GAAG,kCAAW,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,gCAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,gCAAS,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 { TextColor, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { useState } from 'react';\n\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":"AAAA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ChD,CAAC"}
+{"version":3,"file":"TextButton.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAIxC,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":"AAAA,OAAO,KAAmB,cAAc;AAKxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ChD,CAAC"}
+{"version":3,"file":"TextButton.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAIxC,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,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
+import { TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import $React, { useState } from "react";
 const React = $importDefault($React);
-import { TextVariant, TextColor } from "../../types/index.mjs";
 import { Text, FontWeight } from "../Text/index.mjs";
 export const TextButton = ({ children, variant = TextVariant.BodyMd, fontWeight = FontWeight.Medium, twClassName, accessibilityRole = 'link', onPress, onPressIn, onPressOut, suppressHighlighting = true, ...rest }) => {
     const [pressed, setPressed] = useState(false);

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"TextButton.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gDAAgD;AACjF,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,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 { TextColor, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { useState } from 'react';\n\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/TextField/TextField.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = require("react");
 const react_native_1 = require("react-native/index.js");
-const types_1 = require("../../types/index.cjs");
 const Input_1 = require("../Input/index.cjs");
 function getContainerBorderColorClass(isDisabled, isFocused, isError) {
     if (isDisabled) {
@@ -45,7 +45,7 @@ exports.TextField = (0, react_1.forwardRef)(({ style, startAccessory, endAccesso
     return (<react_native_1.Pressable testID={testID} style={[containerStyle, style]} onPress={onPressHandler} accessible={false}>
         {startAccessory}
         <react_native_1.View style={tw.style('min-h-0 flex-1 justify-center')}>
-          {inputElement ?? (<Input_1.Input {...props} ref={inputRef} textVariant={types_1.TextVariant.BodyMd} isDisabled={isDisabled} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler} isStateStylesDisabled 
+          {inputElement ?? (<Input_1.Input {...props} ref={inputRef} textVariant={design_system_shared_1.TextVariant.BodyMd} isDisabled={isDisabled} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler} isStateStylesDisabled 
         // Row is `h-12` (48px) with `border` on the Pressable (1px top + bottom). Inner TextInput
         // uses 46px height so the field matches a 48px-tall control without vertical overflow.
         twClassName="h-[46px] bg-transparent border-0" numberOfLines={1} multiline={false}/>)}

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Pressable, TextInput, View } from 'react-native';\n\nimport { TextVariant } from '../../types';\nimport { Input } from '../Input';\n\nimport type { TextFieldProps } from './TextField.types';\n\nfunction getContainerBorderColorClass(\n  isDisabled: boolean,\n  isFocused: boolean,\n  isError: boolean,\n): string {\n  if (isDisabled) {\n    return 'border-muted';\n  }\n  if (isError) {\n    return 'border-error-default';\n  }\n  if (isFocused) {\n    return 'border-default';\n  }\n  return 'border-muted';\n}\n\nexport const TextField = forwardRef<TextInput, TextFieldProps>(\n  (\n    {\n      style,\n      startAccessory,\n      endAccessory,\n      isError = false,\n      inputElement,\n      isDisabled = false,\n      autoFocus = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      testID,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const inputRef = useRef<TextInput>(null);\n    const tw = useTailwind();\n\n    useImperativeHandle<TextInput | null, TextInput | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    );\n\n    const borderColorClass = getContainerBorderColorClass(\n      isDisabled,\n      isFocused,\n      isError,\n    );\n\n    const containerStyle = useMemo(\n      () =>\n        tw.style(\n          'flex-row',\n          'items-center',\n          'gap-3',\n          'rounded-lg',\n          'h-12',\n          'border',\n          borderColorClass,\n          'px-4',\n          'bg-muted',\n          isDisabled && 'opacity-50',\n          twClassName,\n        ),\n      [borderColorClass, isDisabled, twClassName, tw],\n    );\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const onPressHandler = useCallback(() => {\n      if (!isDisabled && inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, [isDisabled]);\n\n    return (\n      <Pressable\n        testID={testID}\n        style={[containerStyle, style]}\n        onPress={onPressHandler}\n        accessible={false}\n      >\n        {startAccessory}\n        <View style={tw.style('min-h-0 flex-1 justify-center')}>\n          {inputElement ?? (\n            <Input\n              {...props}\n              ref={inputRef}\n              textVariant={TextVariant.BodyMd}\n              isDisabled={isDisabled}\n              autoFocus={autoFocus}\n              onBlur={onBlurHandler}\n              onFocus={onFocusHandler}\n              isStateStylesDisabled\n              // Row is `h-12` (48px) with `border` on the Pressable (1px top + bottom). Inner TextInput\n              // uses 46px height so the field matches a 48px-tall control without vertical overflow.\n              twClassName=\"h-[46px] bg-transparent border-0\"\n              numberOfLines={1}\n              multiline={false}\n            />\n          )}\n        </View>\n        {endAccessory}\n      </Pressable>\n    );\n  },\n);\n"]}
+{"version":3,"file":"TextField.cjs","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextVariant } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Pressable, TextInput, View } from 'react-native';\n\nimport { Input } from '../Input';\n\nimport type { TextFieldProps } from './TextField.types';\n\nfunction getContainerBorderColorClass(\n  isDisabled: boolean,\n  isFocused: boolean,\n  isError: boolean,\n): string {\n  if (isDisabled) {\n    return 'border-muted';\n  }\n  if (isError) {\n    return 'border-error-default';\n  }\n  if (isFocused) {\n    return 'border-default';\n  }\n  return 'border-muted';\n}\n\nexport const TextField = forwardRef<TextInput, TextFieldProps>(\n  (\n    {\n      style,\n      startAccessory,\n      endAccessory,\n      isError = false,\n      inputElement,\n      isDisabled = false,\n      autoFocus = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      testID,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const inputRef = useRef<TextInput>(null);\n    const tw = useTailwind();\n\n    useImperativeHandle<TextInput | null, TextInput | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    );\n\n    const borderColorClass = getContainerBorderColorClass(\n      isDisabled,\n      isFocused,\n      isError,\n    );\n\n    const containerStyle = useMemo(\n      () =>\n        tw.style(\n          'flex-row',\n          'items-center',\n          'gap-3',\n          'rounded-lg',\n          'h-12',\n          'border',\n          borderColorClass,\n          'px-4',\n          'bg-muted',\n          isDisabled && 'opacity-50',\n          twClassName,\n        ),\n      [borderColorClass, isDisabled, twClassName, tw],\n    );\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const onPressHandler = useCallback(() => {\n      if (!isDisabled && inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, [isDisabled]);\n\n    return (\n      <Pressable\n        testID={testID}\n        style={[containerStyle, style]}\n        onPress={onPressHandler}\n        accessible={false}\n      >\n        {startAccessory}\n        <View style={tw.style('min-h-0 flex-1 justify-center')}>\n          {inputElement ?? (\n            <Input\n              {...props}\n              ref={inputRef}\n              textVariant={TextVariant.BodyMd}\n              isDisabled={isDisabled}\n              autoFocus={autoFocus}\n              onBlur={onBlurHandler}\n              onFocus={onFocusHandler}\n              isStateStylesDisabled\n              // Row is `h-12` (48px) with `border` on the Pressable (1px top + bottom). Inner TextInput\n              // uses 46px height so the field matches a 48px-tall control without vertical overflow.\n              twClassName=\"h-[46px] bg-transparent border-0\"\n              numberOfLines={1}\n              multiline={false}\n            />\n          )}\n        </View>\n        {endAccessory}\n      </Pressable>\n    );\n  },\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.cts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAa,SAAS,EAAQ,8BAAqB;AAwB1D,eAAO,MAAM,SAAS;;;;;;;6CA6GrB,CAAC"}
+{"version":3,"file":"TextField.d.cts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAa,SAAS,EAAQ,8BAAqB;AAuB1D,eAAO,MAAM,SAAS;;;;;;;6CA6GrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.mts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAa,SAAS,EAAQ,8BAAqB;AAwB1D,eAAO,MAAM,SAAS;;;;;;;6CA6GrB,CAAC"}
+{"version":3,"file":"TextField.d.mts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAa,SAAS,EAAQ,8BAAqB;AAuB1D,eAAO,MAAM,SAAS;;;;;;;6CA6GrB,CAAC"}

package/dist/components/TextField/TextField.mjs

@@ -1,7 +1,7 @@
+import { TextVariant } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Pressable, TextInput, View } from "react-native/index.js";
-import { TextVariant } from "../../types/index.mjs";
 import { Input } from "../Input/index.mjs";
 function getContainerBorderColorClass(isDisabled, isFocused, isError) {
     if (isDisabled) {

package/dist/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Pressable, TextInput, View } from 'react-native';\n\nimport { TextVariant } from '../../types';\nimport { Input } from '../Input';\n\nimport type { TextFieldProps } from './TextField.types';\n\nfunction getContainerBorderColorClass(\n  isDisabled: boolean,\n  isFocused: boolean,\n  isError: boolean,\n): string {\n  if (isDisabled) {\n    return 'border-muted';\n  }\n  if (isError) {\n    return 'border-error-default';\n  }\n  if (isFocused) {\n    return 'border-default';\n  }\n  return 'border-muted';\n}\n\nexport const TextField = forwardRef<TextInput, TextFieldProps>(\n  (\n    {\n      style,\n      startAccessory,\n      endAccessory,\n      isError = false,\n      inputElement,\n      isDisabled = false,\n      autoFocus = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      testID,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const inputRef = useRef<TextInput>(null);\n    const tw = useTailwind();\n\n    useImperativeHandle<TextInput | null, TextInput | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    );\n\n    const borderColorClass = getContainerBorderColorClass(\n      isDisabled,\n      isFocused,\n      isError,\n    );\n\n    const containerStyle = useMemo(\n      () =>\n        tw.style(\n          'flex-row',\n          'items-center',\n          'gap-3',\n          'rounded-lg',\n          'h-12',\n          'border',\n          borderColorClass,\n          'px-4',\n          'bg-muted',\n          isDisabled && 'opacity-50',\n          twClassName,\n        ),\n      [borderColorClass, isDisabled, twClassName, tw],\n    );\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const onPressHandler = useCallback(() => {\n      if (!isDisabled && inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, [isDisabled]);\n\n    return (\n      <Pressable\n        testID={testID}\n        style={[containerStyle, style]}\n        onPress={onPressHandler}\n        accessible={false}\n      >\n        {startAccessory}\n        <View style={tw.style('min-h-0 flex-1 justify-center')}>\n          {inputElement ?? (\n            <Input\n              {...props}\n              ref={inputRef}\n              textVariant={TextVariant.BodyMd}\n              isDisabled={isDisabled}\n              autoFocus={autoFocus}\n              onBlur={onBlurHandler}\n              onFocus={onFocusHandler}\n              isStateStylesDisabled\n              // Row is `h-12` (48px) with `border` on the Pressable (1px top + bottom). Inner TextInput\n              // uses 46px height so the field matches a 48px-tall control without vertical overflow.\n              twClassName=\"h-[46px] bg-transparent border-0\"\n              numberOfLines={1}\n              multiline={false}\n            />\n          )}\n        </View>\n        {endAccessory}\n      </Pressable>\n    );\n  },\n);\n"]}
+{"version":3,"file":"TextField.mjs","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextVariant } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Pressable, TextInput, View } from 'react-native';\n\nimport { Input } from '../Input';\n\nimport type { TextFieldProps } from './TextField.types';\n\nfunction getContainerBorderColorClass(\n  isDisabled: boolean,\n  isFocused: boolean,\n  isError: boolean,\n): string {\n  if (isDisabled) {\n    return 'border-muted';\n  }\n  if (isError) {\n    return 'border-error-default';\n  }\n  if (isFocused) {\n    return 'border-default';\n  }\n  return 'border-muted';\n}\n\nexport const TextField = forwardRef<TextInput, TextFieldProps>(\n  (\n    {\n      style,\n      startAccessory,\n      endAccessory,\n      isError = false,\n      inputElement,\n      isDisabled = false,\n      autoFocus = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      testID,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const inputRef = useRef<TextInput>(null);\n    const tw = useTailwind();\n\n    useImperativeHandle<TextInput | null, TextInput | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    );\n\n    const borderColorClass = getContainerBorderColorClass(\n      isDisabled,\n      isFocused,\n      isError,\n    );\n\n    const containerStyle = useMemo(\n      () =>\n        tw.style(\n          'flex-row',\n          'items-center',\n          'gap-3',\n          'rounded-lg',\n          'h-12',\n          'border',\n          borderColorClass,\n          'px-4',\n          'bg-muted',\n          isDisabled && 'opacity-50',\n          twClassName,\n        ),\n      [borderColorClass, isDisabled, twClassName, tw],\n    );\n\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<TextFieldProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const onPressHandler = useCallback(() => {\n      if (!isDisabled && inputRef.current) {\n        inputRef.current.focus();\n      }\n    }, [isDisabled]);\n\n    return (\n      <Pressable\n        testID={testID}\n        style={[containerStyle, style]}\n        onPress={onPressHandler}\n        accessible={false}\n      >\n        {startAccessory}\n        <View style={tw.style('min-h-0 flex-1 justify-center')}>\n          {inputElement ?? (\n            <Input\n              {...props}\n              ref={inputRef}\n              textVariant={TextVariant.BodyMd}\n              isDisabled={isDisabled}\n              autoFocus={autoFocus}\n              onBlur={onBlurHandler}\n              onFocus={onFocusHandler}\n              isStateStylesDisabled\n              // Row is `h-12` (48px) with `border` on the Pressable (1px top + bottom). Inner TextInput\n              // uses 46px height so the field matches a 48px-tall control without vertical overflow.\n              twClassName=\"h-[46px] bg-transparent border-0\"\n              numberOfLines={1}\n              multiline={false}\n            />\n          )}\n        </View>\n        {endAccessory}\n      </Pressable>\n    );\n  },\n);\n"]}

package/dist/types/index.cjs

@@ -1,32 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconName = exports.IconSize = exports.IconColor = exports.FontFamily = exports.FontStyle = exports.FontWeight = exports.TextColor = exports.TextVariant = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonSize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.AvatarIconSeverity = exports.AvatarGroupVariant = exports.AvatarAccountVariant = exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
+exports.IconName = exports.IconSize = exports.IconColor = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonSize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.AvatarIconSeverity = exports.AvatarGroupVariant = exports.AvatarSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
 var design_system_shared_1 = require("@metamask-previews/design-system-shared");
 Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
 Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
 var design_system_shared_2 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return design_system_shared_2.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_2.AvatarBaseSize; } });
 var design_system_shared_3 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_3.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarGroupSize", { enumerable: true, get: function () { return design_system_shared_3.AvatarBaseSize; } });
 var design_system_shared_4 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarGroupSize", { enumerable: true, get: function () { return design_system_shared_4.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarIconSize", { enumerable: true, get: function () { return design_system_shared_4.AvatarBaseSize; } });
 var design_system_shared_5 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarIconSize", { enumerable: true, get: function () { return design_system_shared_5.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarNetworkSize", { enumerable: true, get: function () { return design_system_shared_5.AvatarBaseSize; } });
 var design_system_shared_6 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarNetworkSize", { enumerable: true, get: function () { return design_system_shared_6.AvatarBaseSize; } });
-var design_system_shared_7 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return design_system_shared_7.AvatarBaseSize; } });
-var design_system_shared_8 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "AvatarSize", { enumerable: true, get: function () { return design_system_shared_8.AvatarBaseSize; } });
-/**
- * AvatarAccount - variant
- */
-var AvatarAccountVariant;
-(function (AvatarAccountVariant) {
-    AvatarAccountVariant["Blockies"] = "blockies";
-    AvatarAccountVariant["Jazzicon"] = "jazzicon";
-    AvatarAccountVariant["Maskicon"] = "maskicon";
-})(AvatarAccountVariant || (exports.AvatarAccountVariant = AvatarAccountVariant = {}));
+Object.defineProperty(exports, "AvatarSize", { enumerable: true, get: function () { return design_system_shared_6.AvatarBaseSize; } });
 /**
  * AvatarGroup - variant
  */
@@ -275,113 +262,6 @@ var ButtonIconVariant;
     ButtonIconVariant["Filled"] = "filled";
     ButtonIconVariant["Floating"] = "floating";
 })(ButtonIconVariant || (exports.ButtonIconVariant = ButtonIconVariant = {}));
-/**
- * Text - variant
- */
-var TextVariant;
-(function (TextVariant) {
-    // Display Sizes
-    TextVariant["DisplayLg"] = "display-lg";
-    TextVariant["DisplayMd"] = "display-md";
-    // Heading Sizes
-    TextVariant["HeadingLg"] = "heading-lg";
-    TextVariant["HeadingMd"] = "heading-md";
-    TextVariant["HeadingSm"] = "heading-sm";
-    // Body Sizes
-    TextVariant["BodyLg"] = "body-lg";
-    TextVariant["BodyMd"] = "body-md";
-    TextVariant["BodySm"] = "body-sm";
-    TextVariant["BodyXs"] = "body-xs";
-    // Special Typography Variants
-    TextVariant["PageHeading"] = "page-heading";
-    TextVariant["SectionHeading"] = "section-heading";
-    TextVariant["ButtonLabelMd"] = "button-label-md";
-    TextVariant["ButtonLabelLg"] = "button-label-lg";
-    TextVariant["AmountDisplayLg"] = "amount-display-lg";
-})(TextVariant || (exports.TextVariant = TextVariant = {}));
-/**
- * Text - color
- */
-var TextColor;
-(function (TextColor) {
-    /** For default neutral text. */
-    TextColor["TextDefault"] = "text-default";
-    /** For softer contrast neutral text */
-    TextColor["TextAlternative"] = "text-alternative";
-    /** For the softest contrast neutral text (not accessible) */
-    TextColor["TextMuted"] = "text-muted";
-    /** For elements used on top of overlay/alternative. */
-    TextColor["OverlayInverse"] = "text-overlay-inverse";
-    /** For interactive, active, and selected semantics. */
-    TextColor["PrimaryDefault"] = "text-primary-default";
-    /** For softer variants of primary text. */
-    TextColor["PrimaryAlternative"] = "text-primary-alternative";
-    /** For elements used on top of primary/default. */
-    TextColor["PrimaryInverse"] = "text-primary-inverse";
-    /** For primary text in a pressed state. */
-    TextColor["PrimaryDefaultPressed"] = "text-primary-default-pressed";
-    /** For critical alert text. */
-    TextColor["ErrorDefault"] = "text-error-default";
-    /** For stronger contrast error text. */
-    TextColor["ErrorAlternative"] = "text-error-alternative";
-    /** For elements used on top of error/default. */
-    TextColor["ErrorInverse"] = "text-error-inverse";
-    /** For critical alert text in a pressed state. */
-    TextColor["ErrorDefaultPressed"] = "text-error-default-pressed";
-    /** For caution alert text. */
-    TextColor["WarningDefault"] = "text-warning-default";
-    /** For elements used on top of warning/default. */
-    TextColor["WarningInverse"] = "text-warning-inverse";
-    /** For caution text in a pressed state. */
-    TextColor["WarningDefaultPressed"] = "text-warning-default-pressed";
-    /** For positive semantic text. */
-    TextColor["SuccessDefault"] = "text-success-default";
-    /** For elements used on top of success/default. */
-    TextColor["SuccessInverse"] = "text-success-inverse";
-    /** For positive text in a pressed state. */
-    TextColor["SuccessDefaultPressed"] = "text-success-default-pressed";
-    /** For informational read-only text. */
-    TextColor["InfoDefault"] = "text-info-default";
-    /** For elements used on top of info/default. */
-    TextColor["InfoInverse"] = "text-info-inverse";
-    /** Make the text color transparent. */
-    TextColor["Transparent"] = "text-transparent";
-})(TextColor || (exports.TextColor = TextColor = {}));
-/**
- * Text - fontWeight
- */
-var FontWeight;
-(function (FontWeight) {
-    /**
-     * Weight - 600
-     */
-    FontWeight["Bold"] = "600";
-    /**
-     * Weight - 500
-     */
-    FontWeight["Medium"] = "500";
-    /**
-     * Weight - 400
-     */
-    FontWeight["Regular"] = "400";
-})(FontWeight || (exports.FontWeight = FontWeight = {}));
-/**
- * Text - fontStyle
- */
-var FontStyle;
-(function (FontStyle) {
-    FontStyle["Italic"] = "italic";
-    FontStyle["Normal"] = "normal";
-})(FontStyle || (exports.FontStyle = FontStyle = {}));
-/**
- * Text - fontFamily
- */
-var FontFamily;
-(function (FontFamily) {
-    FontFamily["Default"] = "default";
-    FontFamily["Accent"] = "accent";
-    FontFamily["Hero"] = "hero";
-})(FontFamily || (exports.FontFamily = FontFamily = {}));
 /**
  * Icon - color
  */
@@ -434,15 +314,15 @@ var IconColor;
 var IconSize;
 (function (IconSize) {
     /** Extra small - 12px */
-    IconSize["Xs"] = "12";
+    IconSize["Xs"] = "xs";
     /** Small - 16px */
-    IconSize["Sm"] = "16";
+    IconSize["Sm"] = "sm";
     /** Medium - 20px (Default) */
-    IconSize["Md"] = "20";
+    IconSize["Md"] = "md";
     /** Large - 24px */
-    IconSize["Lg"] = "24";
+    IconSize["Lg"] = "lg";
     /** Extra large - 32px */
-    IconSize["Xl"] = "32";
+    IconSize["Xl"] = "xl";
 })(IconSize || (exports.IconSize = IconSize = {}));
 // /////////////////////////////////////////////////////
 // This is generated code - Manually add types above