@metamask-previews/design-system-react-native 0.0.0-preview.f4da8f1 → 0.0.0-preview.fbd1fe9

package/dist/components/Text/Text.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.constants.js","sourceRoot":"","sources":["../../../src/components/Text/Text.constants.ts"],"names":[],"mappings":";AAAA,iDAAiD;;;AAGjD,6CAAkE;AAElE,WAAW;AACE,QAAA,oBAAoB,GAAG,wBAAW,CAAC,MAAM,CAAC;AAC1C,QAAA,kBAAkB,GAAG,sBAAS,CAAC,WAAW,CAAC;AAExD,WAAW;AACE,QAAA,8CAA8C,GAEvD;IACF,CAAC,uBAAU,CAAC,MAAM,CAAC,EAAE,EAAE;IACvB,CAAC,uBAAU,CAAC,MAAM,CAAC,EAAE,SAAS;IAC9B,CAAC,uBAAU,CAAC,IAAI,CAAC,EAAE,OAAO;CAC3B,CAAC;AAEF,gBAAgB;AACH,QAAA,iBAAiB,GAAc;IAC1C,OAAO,EAAE,4BAAoB;IAC7B,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,0BAAkB;CAC1B,CAAC","sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport type { TextProps } from './Text.types';\nimport { FontWeight, TextColor, TextVariant } from './Text.types';\n\n// Defaults\nexport const DEFAULT_TEXT_VARIANT = TextVariant.BodyMd;\nexport const DEFAULT_TEXT_COLOR = TextColor.TextDefault;\n\n// Mappings\nexport const MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME: {\n  [key in FontWeight]: string;\n} = {\n  [FontWeight.Normal]: '',\n  [FontWeight.Medium]: '-medium',\n  [FontWeight.Bold]: '-bold',\n};\n\n// Sample consts\nexport const SAMPLE_TEXT_PROPS: TextProps = {\n  variant: DEFAULT_TEXT_VARIANT,\n  children: 'Sample Text',\n  color: DEFAULT_TEXT_COLOR,\n};\n"]}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TextProps } from './Text.types';
+declare const Text: React.FC<TextProps>;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Text/Text.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Text_constants_1 = require("./Text.constants");
+const Text_types_1 = require("./Text.types");
+const Text_utilities_1 = require("./Text.utilities");
+const Text = ({ variant = Text_constants_1.DEFAULT_TEXT_VARIANT, color = Text_constants_1.DEFAULT_TEXT_COLOR, style, children, fontWeight = Text_types_1.FontWeight.Normal, fontStyle = Text_types_1.FontStyle.Normal, twClassName = '', ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const mergedClassnames = (0, Text_utilities_1.generateTextClassNames)({
+        variant,
+        color,
+        fontWeight,
+        fontStyle,
+        twClassName,
+    });
+    return (<react_native_1.Text accessibilityRole="text" {...props} style={[tw `${mergedClassnames}`, style]}>
+      {children}
+    </react_native_1.Text>);
+};
+exports.default = Text;
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAA8C;AAE9C,qDAA4E;AAE5E,6CAAqD;AACrD,qDAA0D;AAE1D,MAAM,IAAI,GAAwB,CAAC,EACjC,OAAO,GAAG,qCAAoB,EAC9B,KAAK,GAAG,mCAAkB,EAC1B,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,uBAAU,CAAC,MAAM,EAC9B,SAAS,GAAG,sBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,IAAA,uCAAsB,EAAC;QAC9C,OAAO;QACP,KAAK;QACL,UAAU;QACV,SAAS;QACT,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,mBAAM,CACL,iBAAiB,CAAC,MAAM,CACxB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,gBAAgB,EAAE,EAAE,KAAK,CAAC,CAAC,CAExC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { Text as RNText } from 'react-native';\n\nimport { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';\nimport type { TextProps } from './Text.types';\nimport { FontWeight, FontStyle } from './Text.types';\nimport { generateTextClassNames } from './Text.utilities';\n\nconst Text: React.FC<TextProps> = ({\n  variant = DEFAULT_TEXT_VARIANT,\n  color = DEFAULT_TEXT_COLOR,\n  style,\n  children,\n  fontWeight = FontWeight.Normal,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n  ...props\n}) => {\n  const tw = useTailwind();\n  const mergedClassnames = generateTextClassNames({\n    variant,\n    color,\n    fontWeight,\n    fontStyle,\n    twClassName,\n  });\n\n  return (\n    <RNText\n      accessibilityRole=\"text\"\n      {...props}\n      style={[tw`${mergedClassnames}`, style]}\n    >\n      {children}\n    </RNText>\n  );\n};\n\nexport default Text;\n"]}

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

@@ -0,0 +1,110 @@
+import type { TextProps as RNTextProps } from 'react-native';
+/**
+ * Text component variants.
+ */
+export declare enum TextVariant {
+    DisplayMd = "display-md",
+    HeadingLg = "heading-lg",
+    HeadingMd = "heading-md",
+    HeadingSm = "heading-sm",
+    BodyLg = "body-lg",
+    BodyMd = "body-md",
+    BodySm = "body-sm",
+    BodyXs = "body-xs"
+}
+/**
+ * Text colors
+ */
+export declare enum TextColor {
+    /** For default neutral text. */
+    TextDefault = "text-text-default",
+    /** For softer contrast neutral text */
+    TextAlternative = "text-text-alternative",
+    /** For the softest contrast neutral text (not accessible) */
+    TextMuted = "text-text-muted",
+    /** For elements used on top of overlay/alternative. */
+    OverlayInverse = "text-overlay-inverse",
+    /** For interactive, active, and selected semantics. */
+    PrimaryDefault = "text-primary-default",
+    /** For softer variants of primary text. */
+    PrimaryAlternative = "text-primary-alternative",
+    /** For elements used on top of primary/default. */
+    PrimaryInverse = "text-primary-inverse",
+    /** For primary text in a pressed state. */
+    PrimaryDefaultPressed = "text-primary-defaultPressed",
+    /** For critical alert text. */
+    ErrorDefault = "text-error-default",
+    /** For stronger contrast error text. */
+    ErrorAlternative = "text-error-alternative",
+    /** For elements used on top of error/default. */
+    ErrorInverse = "text-error-inverse",
+    /** For critical alert text in a pressed state. */
+    ErrorDefaultPressed = "text-error-defaultPressed",
+    /** For caution alert text. */
+    WarningDefault = "text-warning-default",
+    /** For elements used on top of warning/default. */
+    WarningInverse = "text-warning-inverse",
+    /** For caution text in a pressed state. */
+    WarningDefaultPressed = "text-warning-defaultPressed",
+    /** For positive semantic text. */
+    SuccessDefault = "text-success-default",
+    /** For elements used on top of success/default. */
+    SuccessInverse = "text-success-inverse",
+    /** For positive text in a pressed state. */
+    SuccessDefaultPressed = "text-success-defaultPressed",
+    /** For informational read-only text. */
+    InfoDefault = "text-info-default",
+    /** For elements used on top of info/default. */
+    InfoInverse = "text-info-inverse",
+    /** Make the text color transparent. */
+    Transparent = "text-transparent"
+}
+export declare enum FontWeight {
+    /**
+     * Weight - 700
+     */
+    Bold = "700",
+    /**
+     * Weight - 500
+     */
+    Medium = "500",
+    /**
+     * Weight - 400
+     */
+    Normal = "400"
+}
+export declare enum FontStyle {
+    Italic = "italic",
+    Normal = "normal"
+}
+/**
+ * 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 adjust the weight of the font.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Optional prop to adjust the style of the font.
+     */
+    fontStyle?: FontStyle;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & RNTextProps;
+//# sourceMappingURL=Text.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D;;GAEG;AACH,oBAAY,WAAW;IAErB,SAAS,eAAe;IAGxB,SAAS,eAAe;IACxB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;CACnB;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,gCAAgC;IAChC,WAAW,sBAAsB;IACjC,uCAAuC;IACvC,eAAe,0BAA0B;IACzC,6DAA6D;IAC7D,SAAS,oBAAoB;IAC7B,uDAAuD;IACvD,cAAc,yBAAyB;IACvC,uDAAuD;IACvD,cAAc,yBAAyB;IACvC,2CAA2C;IAC3C,kBAAkB,6BAA6B;IAC/C,mDAAmD;IACnD,cAAc,yBAAyB;IACvC,2CAA2C;IAC3C,qBAAqB,gCAAgC;IACrD,+BAA+B;IAC/B,YAAY,uBAAuB;IACnC,wCAAwC;IACxC,gBAAgB,2BAA2B;IAC3C,iDAAiD;IACjD,YAAY,uBAAuB;IACnC,kDAAkD;IAClD,mBAAmB,8BAA8B;IACjD,8BAA8B;IAC9B,cAAc,yBAAyB;IACvC,mDAAmD;IACnD,cAAc,yBAAyB;IACvC,2CAA2C;IAC3C,qBAAqB,gCAAgC;IACrD,kCAAkC;IAClC,cAAc,yBAAyB;IACvC,mDAAmD;IACnD,cAAc,yBAAyB;IACvC,4CAA4C;IAC5C,qBAAqB,gCAAgC;IACrD,wCAAwC;IACxC,WAAW,sBAAsB;IACjC,gDAAgD;IAChD,WAAW,sBAAsB;IACjC,uCAAuC;IACvC,WAAW,qBAAqB;CACjC;AAED,oBAAY,UAAU;IACpB;;OAEG;IACH,IAAI,QAAQ;IACZ;;OAEG;IACH,MAAM,QAAQ;IACd;;OAEG;IACH,MAAM,QAAQ;CACf;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;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"}

package/dist/components/Text/Text.types.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontStyle = exports.FontWeight = exports.TextColor = exports.TextVariant = void 0;
+/**
+ * Text component variants.
+ */
+var TextVariant;
+(function (TextVariant) {
+    // Display Sizes
+    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";
+})(TextVariant || (exports.TextVariant = TextVariant = {}));
+/**
+ * Text colors
+ */
+var TextColor;
+(function (TextColor) {
+    /** For default neutral text. */
+    TextColor["TextDefault"] = "text-text-default";
+    /** For softer contrast neutral text */
+    TextColor["TextAlternative"] = "text-text-alternative";
+    /** For the softest contrast neutral text (not accessible) */
+    TextColor["TextMuted"] = "text-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-defaultPressed";
+    /** 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-defaultPressed";
+    /** 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-defaultPressed";
+    /** 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-defaultPressed";
+    /** 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 = {}));
+var FontWeight;
+(function (FontWeight) {
+    /**
+     * Weight - 700
+     */
+    FontWeight["Bold"] = "700";
+    /**
+     * Weight - 500
+     */
+    FontWeight["Medium"] = "500";
+    /**
+     * Weight - 400
+     */
+    FontWeight["Normal"] = "400";
+})(FontWeight || (exports.FontWeight = FontWeight = {}));
+var FontStyle;
+(function (FontStyle) {
+    FontStyle["Italic"] = "italic";
+    FontStyle["Normal"] = "normal";
+})(FontStyle || (exports.FontStyle = FontStyle = {}));
+//# sourceMappingURL=Text.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../../src/components/Text/Text.types.ts"],"names":[],"mappings":";;;AAIA;;GAEG;AACH,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,2BAAX,WAAW,QActB;AAED;;GAEG;AACH,IAAY,SA2CX;AA3CD,WAAY,SAAS;IACnB,gCAAgC;IAChC,8CAAiC,CAAA;IACjC,uCAAuC;IACvC,sDAAyC,CAAA;IACzC,6DAA6D;IAC7D,0CAA6B,CAAA;IAC7B,uDAAuD;IACvD,oDAAuC,CAAA;IACvC,uDAAuD;IACvD,oDAAuC,CAAA;IACvC,2CAA2C;IAC3C,4DAA+C,CAAA;IAC/C,mDAAmD;IACnD,oDAAuC,CAAA;IACvC,2CAA2C;IAC3C,kEAAqD,CAAA;IACrD,+BAA+B;IAC/B,gDAAmC,CAAA;IACnC,wCAAwC;IACxC,wDAA2C,CAAA;IAC3C,iDAAiD;IACjD,gDAAmC,CAAA;IACnC,kDAAkD;IAClD,8DAAiD,CAAA;IACjD,8BAA8B;IAC9B,oDAAuC,CAAA;IACvC,mDAAmD;IACnD,oDAAuC,CAAA;IACvC,2CAA2C;IAC3C,kEAAqD,CAAA;IACrD,kCAAkC;IAClC,oDAAuC,CAAA;IACvC,mDAAmD;IACnD,oDAAuC,CAAA;IACvC,4CAA4C;IAC5C,kEAAqD,CAAA;IACrD,wCAAwC;IACxC,8CAAiC,CAAA;IACjC,gDAAgD;IAChD,8CAAiC,CAAA;IACjC,uCAAuC;IACvC,6CAAgC,CAAA;AAClC,CAAC,EA3CW,SAAS,yBAAT,SAAS,QA2CpB;AAED,IAAY,UAaX;AAbD,WAAY,UAAU;IACpB;;OAEG;IACH,0BAAY,CAAA;IACZ;;OAEG;IACH,4BAAc,CAAA;IACd;;OAEG;IACH,4BAAc,CAAA;AAChB,CAAC,EAbW,UAAU,0BAAV,UAAU,QAarB;AAED,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,8BAAiB,CAAA;IACjB,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,yBAAT,SAAS,QAGpB","sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow */\n// Third party dependencies.\nimport type { TextProps as RNTextProps } from 'react-native';\n\n/**\n * Text component variants.\n */\nexport enum TextVariant {\n  // Display Sizes\n  DisplayMd = 'display-md',\n\n  // Heading Sizes\n  HeadingLg = 'heading-lg',\n  HeadingMd = 'heading-md',\n  HeadingSm = 'heading-sm',\n\n  // Body Sizes\n  BodyLg = 'body-lg',\n  BodyMd = 'body-md',\n  BodySm = 'body-sm',\n  BodyXs = 'body-xs',\n}\n\n/**\n * Text colors\n */\nexport enum TextColor {\n  /** For default neutral text. */\n  TextDefault = 'text-text-default',\n  /** For softer contrast neutral text */\n  TextAlternative = 'text-text-alternative',\n  /** For the softest contrast neutral text (not accessible) */\n  TextMuted = 'text-text-muted',\n  /** For elements used on top of overlay/alternative. */\n  OverlayInverse = 'text-overlay-inverse',\n  /** For interactive, active, and selected semantics. */\n  PrimaryDefault = 'text-primary-default',\n  /** For softer variants of primary text. */\n  PrimaryAlternative = 'text-primary-alternative',\n  /** For elements used on top of primary/default. */\n  PrimaryInverse = 'text-primary-inverse',\n  /** For primary text in a pressed state. */\n  PrimaryDefaultPressed = 'text-primary-defaultPressed',\n  /** For critical alert text. */\n  ErrorDefault = 'text-error-default',\n  /** For stronger contrast error text. */\n  ErrorAlternative = 'text-error-alternative',\n  /** For elements used on top of error/default. */\n  ErrorInverse = 'text-error-inverse',\n  /** For critical alert text in a pressed state. */\n  ErrorDefaultPressed = 'text-error-defaultPressed',\n  /** For caution alert text. */\n  WarningDefault = 'text-warning-default',\n  /** For elements used on top of warning/default. */\n  WarningInverse = 'text-warning-inverse',\n  /** For caution text in a pressed state. */\n  WarningDefaultPressed = 'text-warning-defaultPressed',\n  /** For positive semantic text. */\n  SuccessDefault = 'text-success-default',\n  /** For elements used on top of success/default. */\n  SuccessInverse = 'text-success-inverse',\n  /** For positive text in a pressed state. */\n  SuccessDefaultPressed = 'text-success-defaultPressed',\n  /** For informational read-only text. */\n  InfoDefault = 'text-info-default',\n  /** For elements used on top of info/default. */\n  InfoInverse = 'text-info-inverse',\n  /** Make the text color transparent. */\n  Transparent = 'text-transparent',\n}\n\nexport enum FontWeight {\n  /**\n   * Weight - 700\n   */\n  Bold = '700',\n  /**\n   * Weight - 500\n   */\n  Medium = '500',\n  /**\n   * Weight - 400\n   */\n  Normal = '400',\n}\n\nexport enum FontStyle {\n  Italic = 'italic',\n  Normal = 'normal',\n}\n/**\n * Text component props.\n */\nexport type TextProps = {\n  /**\n   * Optional enum to select between Typography variants.\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 adjust the weight of the font.\n   */\n  fontWeight?: FontWeight;\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"]}

package/dist/components/Text/Text.utilities.d.ts

@@ -0,0 +1,30 @@
+import type { TextProps } from './Text.types';
+/**
+ * Generates a combined string of Tailwind CSS class names for the Text component
+ * based on the provided props. This utility simplifies the process of combining
+ * typography, color, font weight, and style classes, ensuring consistency with the
+ * design system.
+ *
+ * @param variant - Specifies the typography variant (e.g., body, heading, display).
+ * @param color - Specifies the text color based on the design system's color tokens.
+ * @param fontWeight - Specifies the font weight (e.g., normal, bold).
+ * @param fontStyle - Specifies the font style (e.g., normal, italic).
+ * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.
+ * @returns A string of combined Tailwind CSS class names.
+ *
+ * Example:
+ * ```
+ * const classNames = generateTextClassNames({
+ *   variant: TextVariant.BodyMd,
+ *   color: TextColor.PrimaryDefault,
+ *   fontWeight: FontWeight.Bold,
+ *   fontStyle: FontStyle.Italic,
+ *   twClassName: 'text-center underline',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-body-md font-body-md-bold-italic text-primary-default text-center underline"
+ * ```
+ */
+export declare const generateTextClassNames: ({ variant, color, fontWeight, fontStyle, twClassName, }: Partial<TextProps>) => string;
+//# sourceMappingURL=Text.utilities.d.ts.map

package/dist/components/Text/Text.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,sBAAsB,4DAMhC,QAAQ,SAAS,CAAC,KAAG,MAavB,CAAC"}

package/dist/components/Text/Text.utilities.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTextClassNames = void 0;
+/* eslint-disable jsdoc/check-param-names */
+/* eslint-disable jsdoc/require-param */
+const Text_constants_1 = require("./Text.constants");
+const Text_types_1 = require("./Text.types");
+/**
+ * Generates a combined string of Tailwind CSS class names for the Text component
+ * based on the provided props. This utility simplifies the process of combining
+ * typography, color, font weight, and style classes, ensuring consistency with the
+ * design system.
+ *
+ * @param variant - Specifies the typography variant (e.g., body, heading, display).
+ * @param color - Specifies the text color based on the design system's color tokens.
+ * @param fontWeight - Specifies the font weight (e.g., normal, bold).
+ * @param fontStyle - Specifies the font style (e.g., normal, italic).
+ * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.
+ * @returns A string of combined Tailwind CSS class names.
+ *
+ * Example:
+ * ```
+ * const classNames = generateTextClassNames({
+ *   variant: TextVariant.BodyMd,
+ *   color: TextColor.PrimaryDefault,
+ *   fontWeight: FontWeight.Bold,
+ *   fontStyle: FontStyle.Italic,
+ *   twClassName: 'text-center underline',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "text-body-md font-body-md-bold-italic text-primary-default text-center underline"
+ * ```
+ */
+const generateTextClassNames = ({ variant = Text_constants_1.DEFAULT_TEXT_VARIANT, color = Text_constants_1.DEFAULT_TEXT_COLOR, fontWeight = Text_types_1.FontWeight.Normal, fontStyle = Text_types_1.FontStyle.Normal, twClassName = '', }) => {
+    const fontWeightStyleClassname = Text_constants_1.MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME[fontWeight];
+    const isItalic = fontStyle === Text_types_1.FontStyle.Italic;
+    const textClassname = `text-${variant}`;
+    const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${isItalic ? '-italic' : ''}`;
+    const textColorClassname = `${color}`;
+    const mergedClassnames = `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();
+    return mergedClassnames;
+};
+exports.generateTextClassNames = generateTextClassNames;
+//# sourceMappingURL=Text.utilities.js.map

package/dist/components/Text/Text.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.utilities.js","sourceRoot":"","sources":["../../../src/components/Text/Text.utilities.ts"],"names":[],"mappings":";;;AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,qDAI0B;AAE1B,6CAAqD;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,OAAO,GAAG,qCAAoB,EAC9B,KAAK,GAAG,mCAAkB,EAC1B,UAAU,GAAG,uBAAU,CAAC,MAAM,EAC9B,SAAS,GAAG,sBAAS,CAAC,MAAM,EAC5B,WAAW,GAAG,EAAE,GACG,EAAU,EAAE;IAC/B,MAAM,wBAAwB,GAC5B,+DAA8C,CAAC,UAAU,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,KAAK,sBAAS,CAAC,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,QAAQ,OAAO,EAAE,CAAC;IACxC,MAAM,mBAAmB,GAAG,QAAQ,OAAO,GAAG,wBAAwB,GACpE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EACzB,EAAE,CAAC;IACH,MAAM,kBAAkB,GAAG,GAAG,KAAK,EAAE,CAAC;IACtC,MAAM,gBAAgB,GACpB,GAAG,aAAa,IAAI,mBAAmB,IAAI,kBAAkB,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAExF,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAnBW,QAAA,sBAAsB,0BAmBjC","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport {\n  DEFAULT_TEXT_COLOR,\n  DEFAULT_TEXT_VARIANT,\n  MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME,\n} from './Text.constants';\nimport type { TextProps } from './Text.types';\nimport { FontWeight, FontStyle } from './Text.types';\n\n/**\n * Generates a combined string of Tailwind CSS class names for the Text component\n * based on the provided props. This utility simplifies the process of combining\n * typography, color, font weight, and style classes, ensuring consistency with the\n * design system.\n *\n * @param variant - Specifies the typography variant (e.g., body, heading, display).\n * @param color - Specifies the text color based on the design system's color tokens.\n * @param fontWeight - Specifies the font weight (e.g., normal, bold).\n * @param fontStyle - Specifies the font style (e.g., normal, italic).\n * @param twClassName - Additional custom Tailwind class names to be appended to the generated classes.\n * @returns A string of combined Tailwind CSS class names.\n *\n * Example:\n * ```\n * const classNames = generateTextClassNames({\n *   variant: TextVariant.BodyMd,\n *   color: TextColor.PrimaryDefault,\n *   fontWeight: FontWeight.Bold,\n *   fontStyle: FontStyle.Italic,\n *   twClassName: 'text-center underline',\n * });\n *\n * console.log(classNames);\n * // Output: \"text-body-md font-body-md-bold-italic text-primary-default text-center underline\"\n * ```\n */\nexport const generateTextClassNames = ({\n  variant = DEFAULT_TEXT_VARIANT,\n  color = DEFAULT_TEXT_COLOR,\n  fontWeight = FontWeight.Normal,\n  fontStyle = FontStyle.Normal,\n  twClassName = '',\n}: Partial<TextProps>): string => {\n  const fontWeightStyleClassname =\n    MAPPING_FONTWEIGHT_TO_FONTFAMILYSTYLECLASSNAME[fontWeight];\n  const isItalic = fontStyle === FontStyle.Italic;\n  const textClassname = `text-${variant}`;\n  const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${\n    isItalic ? '-italic' : ''\n  }`;\n  const textColorClassname = `${color}`;\n  const mergedClassnames =\n    `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();\n\n  return mergedClassnames;\n};\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './Text';
+export type { TextProps } from './Text.types';
+export { TextVariant, TextColor, FontWeight, FontStyle } from './Text.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Text/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontStyle = exports.FontWeight = exports.TextColor = exports.TextVariant = exports.default = void 0;
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+var Text_types_1 = require("./Text.types");
+Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return Text_types_1.TextVariant; } });
+Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return Text_types_1.TextColor; } });
+Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return Text_types_1.FontWeight; } });
+Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return Text_types_1.FontStyle; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAiC;AAAxB,gHAAA,OAAO,OAAA;AAEhB,2CAA6E;AAApE,yGAAA,WAAW,OAAA;AAAE,uGAAA,SAAS,OAAA;AAAE,wGAAA,UAAU,OAAA;AAAE,uGAAA,SAAS,OAAA","sourcesContent":["export { default } from './Text';\nexport type { TextProps } from './Text.types';\nexport { TextVariant, TextColor, FontWeight, FontStyle } from './Text.types';\n"]}

package/dist/components/TextButton/TextButton.constants.d.ts

@@ -0,0 +1,3 @@
+import type { TextButtonProps } from './TextButton.types';
+export declare const DEFAULT_TEXTBUTTON_PROPS: Required<Pick<TextButtonProps, 'textProps' | 'isLoading' | 'loadingText' | 'spinnerProps' | 'startIconProps' | 'endIconProps' | 'isDisabled' | 'isInverse'>>;
+//# sourceMappingURL=TextButton.constants.d.ts.map

package/dist/components/TextButton/TextButton.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.constants.d.ts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAC7C,IAAI,CACF,eAAe,EACb,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,cAAc,GACd,YAAY,GACZ,WAAW,CACd,CAsBF,CAAC"}

package/dist/components/TextButton/TextButton.constants.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TEXTBUTTON_PROPS = void 0;
+const Icon_1 = require("../Icon");
+const Text_1 = require("../Text");
+// Defaults
+exports.DEFAULT_TEXTBUTTON_PROPS = {
+    textProps: {
+        variant: Text_1.TextVariant.BodyMd,
+        fontWeight: Text_1.FontWeight.Medium,
+        color: Text_1.TextColor.PrimaryDefault,
+    },
+    isLoading: false,
+    loadingText: 'Loading',
+    spinnerProps: {
+        color: Icon_1.IconColor.IconDefault,
+    },
+    startIconProps: {
+        size: Icon_1.IconSize.Sm,
+        testID: 'start-icon',
+    },
+    endIconProps: {
+        size: Icon_1.IconSize.Sm,
+        testID: 'end-icon',
+    },
+    isDisabled: false,
+    isInverse: false,
+};
+//# sourceMappingURL=TextButton.constants.js.map

package/dist/components/TextButton/TextButton.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.constants.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.constants.ts"],"names":[],"mappings":";;;AAAA,kCAA8C;AAC9C,kCAA6D;AAG7D,WAAW;AACE,QAAA,wBAAwB,GAYjC;IACF,SAAS,EAAE;QACT,OAAO,EAAE,kBAAW,CAAC,MAAM;QAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;QAC7B,KAAK,EAAE,gBAAS,CAAC,cAAc;KAChC;IACD,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,gBAAS,CAAC,WAAW;KAC7B;IACD,cAAc,EAAE;QACd,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,MAAM,EAAE,YAAY;KACrB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;QACjB,MAAM,EAAE,UAAU;KACnB;IACD,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;CACjB,CAAC","sourcesContent":["import { IconSize, IconColor } from '../Icon';\nimport { TextColor, TextVariant, FontWeight } from '../Text';\nimport type { TextButtonProps } from './TextButton.types';\n\n// Defaults\nexport const DEFAULT_TEXTBUTTON_PROPS: Required<\n  Pick<\n    TextButtonProps,\n    | 'textProps'\n    | 'isLoading'\n    | 'loadingText'\n    | 'spinnerProps'\n    | 'startIconProps'\n    | 'endIconProps'\n    | 'isDisabled'\n    | 'isInverse'\n  >\n> = {\n  textProps: {\n    variant: TextVariant.BodyMd,\n    fontWeight: FontWeight.Medium,\n    color: TextColor.PrimaryDefault,\n  },\n  isLoading: false,\n  loadingText: 'Loading',\n  spinnerProps: {\n    color: IconColor.IconDefault,\n  },\n  startIconProps: {\n    size: IconSize.Sm,\n    testID: 'start-icon',\n  },\n  endIconProps: {\n    size: IconSize.Sm,\n    testID: 'end-icon',\n  },\n  isDisabled: false,\n  isInverse: false,\n};\n"]}

package/dist/components/TextButton/TextButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TextButtonProps } from './TextButton.types';
+declare const TextButton: ({ children, textProps, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isInverse, onPress, onPressIn, onPressOut, onLongPress, twClassName, accessibilityRole, accessibilityLabel, style, ...props }: TextButtonProps) => React.JSX.Element;
+export default TextButton;
+//# sourceMappingURL=TextButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAWjD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D,QAAA,MAAM,UAAU,mSAuBb,eAAe,sBAsMjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/TextButton/TextButton.js

@@ -0,0 +1,187 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Spinner_1 = __importDefault(require("../../temp-components/Spinner"));
+const Icon_1 = __importDefault(require("../Icon"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const TextButton_constants_1 = require("./TextButton.constants");
+const TextButton_utilities_1 = require("./TextButton.utilities");
+const TextButton = ({ children, textProps, isLoading = TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled = TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.isDisabled, isInverse = TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.isInverse, onPress, onPressIn, onPressOut, onLongPress, twClassName, accessibilityRole, accessibilityLabel, style, ...props }) => {
+    const [isPressed, setIsPressed] = (0, react_1.useState)(false);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    // Styling calculation for state changes
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, TextButton_utilities_1.generateTextButtonContainerClassNames)({
+            isPressed,
+            isLoading,
+            isDisabled,
+            twClassName,
+        });
+    }, [isPressed, isLoading, isDisabled, twClassName]);
+    const twTextClassNames = (0, react_1.useMemo)(() => {
+        return (0, TextButton_utilities_1.generateTextButtonTextClassNames)({
+            isPressed,
+            isInverse,
+            isLoading,
+        });
+    }, [isPressed, isInverse, isLoading]);
+    // Merging default settings for Icons with passed in props
+    const finalStartIconProps = {
+        ...TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.startIconProps,
+        ...startIconProps,
+        twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,
+    };
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconProps = {
+        ...TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.endIconProps,
+        ...endIconProps,
+        twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,
+    };
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    const finalTextProps = {
+        ...TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.textProps,
+        ...textProps,
+        twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,
+    };
+    // Merging spinner settings for Icons with passed in props
+    const finalSpinnerProps = {
+        ...TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.spinnerProps,
+        loadingText,
+        color: twTextClassNames,
+        loadingTextProps: {
+            twClassName: `${twTextClassNames} mt-[2.5px]`,
+        },
+        ...spinnerProps,
+    };
+    const onPressHandler = (event) => {
+        if (!isDisabled && !isLoading) {
+            onPress?.(event);
+        }
+    };
+    const onPressInHandler = (event) => {
+        if (!isDisabled && !isLoading) {
+            setIsPressed(true);
+            onPressIn?.(event);
+        }
+    };
+    const onPressOutHandler = (event) => {
+        if (!isDisabled && !isLoading) {
+            setIsPressed(false);
+            onPressOut?.(event);
+        }
+    };
+    const onLongPressHandler = (event) => {
+        if (!isDisabled && !isLoading) {
+            onLongPress?.(event);
+        }
+    };
+    /**
+     * Design Requirements
+     * TextButton needs to be able to be placed inline with other Texts along with
+     * accompanying icons.
+     *
+     * Limitations
+     * React Native renders Texts and components nested inside Texts very differently.
+     * In order to fulfil design requirements
+     * - TextButton needs to be built using Text wrapping the component to ensure
+     * when placed in line with other Texts, it can be properly displayed inline
+     * with other Texts.
+     * - Due to React Native Texts calculating the layout of nested components
+     * differently, there needs to be a few styling hacks applied below
+     */
+    // Get the line height of the text, which is also the height of the component
+    const finalVariant = textProps?.variant || TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.textProps.variant;
+    const { lineHeight } = tw `text-${finalVariant}`;
+    const componentHeight = Number(lineHeight);
+    // Due to React Native rendering Views slightly above Texts, any non-texts
+    // need to be moved down
+    const nonTextOffSet = 2.5;
+    // Get the final sizes of Icons to help with manual alignments
+    const finalStartIconSize = startIconProps?.size || TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.startIconProps.size;
+    const finalEndIconSize = endIconProps?.size || TextButton_constants_1.DEFAULT_TEXTBUTTON_PROPS.endIconProps.size;
+    // Offsets to vertically center the Icon
+    const finalStartIconOffset = (Number(lineHeight) - Number(finalStartIconSize)) / 2;
+    const finalEndIconOffset = (Number(lineHeight) - Number(finalEndIconSize)) / 2;
+    /**
+     * Due to Texts restricting nested components to manipulating layout with
+     * margins/paddings, we needed to add Nested Views in order to properly add
+     * additional margins/paddings. However, this causes the Text component to
+     * somehow not include the Icons as part of the calculation for displaying
+     * a change in background color onPress. Because of that, we need to mimic
+     * the behavior on the Icon wrappers by baking the margins into the Icon
+     * wrappers in order to display the background change properly
+     */
+    const marginsBetweenIconAndText = 4;
+    const startIconWrapperWidth = Number(finalStartIconSize) + marginsBetweenIconAndText;
+    const endIconWrapperWidth = Number(finalEndIconSize) + marginsBetweenIconAndText;
+    return (<Text_1.default>
+      {finalStartIconName && <Text_1.default style={tw `hidden`}> </Text_1.default>}
+      {isLoading && (<react_native_1.View style={tw `${twContainerClassNames}`}>
+          <Spinner_1.default {...finalSpinnerProps}/>
+        </react_native_1.View>)}
+      <Text_1.default onPress={onPressHandler} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} onLongPress={onLongPressHandler} accessible accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={[tw `${twContainerClassNames}`, style]} testID="text-button" suppressHighlighting {...props}>
+        {!isLoading && (<>
+            {finalStartIconName ? (
+            // This additional View is needed, otherwise things are rendered
+            // VERY funkily
+            <react_native_1.View style={tw `h-[${componentHeight}px]`}>
+                <react_native_1.View style={tw `
+                    ${twContainerClassNames} 
+                    items-start mt-[${nonTextOffSet}px] 
+                    pt-[${finalStartIconOffset}px] 
+                    h-[${componentHeight}px] 
+                    w-[${startIconWrapperWidth}px]
+                    `}>
+                  <Icon_1.default name={finalStartIconName} {...finalStartIconProps}/>
+                </react_native_1.View>
+              </react_native_1.View>) : (startAccessory)}
+            <Text_1.default {...finalTextProps}>{children}</Text_1.default>
+            {finalEndIconName ? (
+            // This additional View is needed, otherwise things are rendered
+            // VERY funkily
+            <react_native_1.View style={tw `h-[${componentHeight}px]`}>
+                <react_native_1.View style={tw `
+                    ${twContainerClassNames} 
+                    items-end 
+                    mt-[${nonTextOffSet}px] 
+                    pt-[${finalEndIconOffset}px] 
+                    h-[${componentHeight}px] w-[${endIconWrapperWidth}px]`}>
+                  <Icon_1.default name={finalEndIconName} {...finalEndIconProps}/>
+                </react_native_1.View>
+              </react_native_1.View>) : (endAccessory)}
+          </>)}
+      </Text_1.default>
+      {finalEndIconName && <Text_1.default style={tw `hidden`}> </Text_1.default>}
+    </Text_1.default>);
+};
+exports.default = TextButton;
+//# sourceMappingURL=TextButton.js.map