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

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

@@ -17,37 +17,47 @@ export declare enum TextVariant {
  */
 export declare enum TextColor {
     /** For default neutral text. */
-    TextDefault = "text-default",
+    TextDefault = "text-text-default",
     /** For softer contrast neutral text */
-    TextAlternative = "text-alternative",
+    TextAlternative = "text-text-alternative",
     /** For the softest contrast neutral text (not accessible) */
-    TextMuted = "text-muted",
-    /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    OverlayInverse = "overlay-inverse",
-    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    PrimaryDefault = "primary-default",
-    /** For elements used on top of primary/default. Used for text, icon or border */
-    PrimaryInverse = "primary-inverse",
-    /** For the critical alert semantic elements. Used for text, background, icon or border */
-    ErrorDefault = "error-default",
-    /** For the stronger contrast error semantic elements. */
-    ErrorAlternative = "error-alternative",
-    /** For elements used on top of error/default. Used for text, icon or border */
-    ErrorInverse = "error-inverse",
-    /** For the positive semantic elements. Used for text, background, icon or border */
-    SuccessDefault = "success-default",
-    /** For elements used on top of success/default. Used for text, icon or border */
-    SuccessInverse = "success-inverse",
-    /** For the caution alert semantic elements. Used for text, background, icon or border */
-    WarningDefault = "warning-default",
-    /** For elements used on top of warning/default. Used for text, icon or border */
-    WarningInverse = "warning-inverse",
-    /** For informational read-only elements. Used for text, background, icon or border */
-    InfoDefault = "info-default",
-    /** For elements used on top of info/default. Used for text, icon or border */
-    InfoInverse = "info-inverse",
-    /** Make the text color transparent */
-    Transparent = "transparent"
+    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 {
     /**

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

@@ -1 +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,iBAAiB;IAC5B,uCAAuC;IACvC,eAAe,qBAAqB;IACpC,6DAA6D;IAC7D,SAAS,eAAe;IACxB,qFAAqF;IACrF,cAAc,oBAAoB;IAClC,iGAAiG;IACjG,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,0FAA0F;IAC1F,YAAY,kBAAkB;IAC9B,yDAAyD;IACzD,gBAAgB,sBAAsB;IACtC,+EAA+E;IAC/E,YAAY,kBAAkB;IAC9B,oFAAoF;IACpF,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,yFAAyF;IACzF,cAAc,oBAAoB;IAClC,iFAAiF;IACjF,cAAc,oBAAoB;IAClC,sFAAsF;IACtF,WAAW,iBAAiB;IAC5B,8EAA8E;IAC9E,WAAW,iBAAiB;IAC5B,sCAAsC;IACtC,WAAW,gBAAgB;CAC5B;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"}
+{"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

@@ -24,37 +24,47 @@ var TextVariant;
 var TextColor;
 (function (TextColor) {
     /** For default neutral text. */
-    TextColor["TextDefault"] = "text-default";
+    TextColor["TextDefault"] = "text-text-default";
     /** For softer contrast neutral text */
-    TextColor["TextAlternative"] = "text-alternative";
+    TextColor["TextAlternative"] = "text-text-alternative";
     /** For the softest contrast neutral text (not accessible) */
-    TextColor["TextMuted"] = "text-muted";
-    /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    TextColor["OverlayInverse"] = "overlay-inverse";
-    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    TextColor["PrimaryDefault"] = "primary-default";
-    /** For elements used on top of primary/default. Used for text, icon or border */
-    TextColor["PrimaryInverse"] = "primary-inverse";
-    /** For the critical alert semantic elements. Used for text, background, icon or border */
-    TextColor["ErrorDefault"] = "error-default";
-    /** For the stronger contrast error semantic elements. */
-    TextColor["ErrorAlternative"] = "error-alternative";
-    /** For elements used on top of error/default. Used for text, icon or border */
-    TextColor["ErrorInverse"] = "error-inverse";
-    /** For the positive semantic elements. Used for text, background, icon or border */
-    TextColor["SuccessDefault"] = "success-default";
-    /** For elements used on top of success/default. Used for text, icon or border */
-    TextColor["SuccessInverse"] = "success-inverse";
-    /** For the caution alert semantic elements. Used for text, background, icon or border */
-    TextColor["WarningDefault"] = "warning-default";
-    /** For elements used on top of warning/default. Used for text, icon or border */
-    TextColor["WarningInverse"] = "warning-inverse";
-    /** For informational read-only elements. Used for text, background, icon or border */
-    TextColor["InfoDefault"] = "info-default";
-    /** For elements used on top of info/default. Used for text, icon or border */
-    TextColor["InfoInverse"] = "info-inverse";
-    /** Make the text color transparent */
-    TextColor["Transparent"] = "transparent";
+    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) {

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

@@ -1 +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,SAiCX;AAjCD,WAAY,SAAS;IACnB,gCAAgC;IAChC,yCAA4B,CAAA;IAC5B,uCAAuC;IACvC,iDAAoC,CAAA;IACpC,6DAA6D;IAC7D,qCAAwB,CAAA;IACxB,qFAAqF;IACrF,+CAAkC,CAAA;IAClC,iGAAiG;IACjG,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,0FAA0F;IAC1F,2CAA8B,CAAA;IAC9B,yDAAyD;IACzD,mDAAsC,CAAA;IACtC,+EAA+E;IAC/E,2CAA8B,CAAA;IAC9B,oFAAoF;IACpF,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,yFAAyF;IACzF,+CAAkC,CAAA;IAClC,iFAAiF;IACjF,+CAAkC,CAAA;IAClC,sFAAsF;IACtF,yCAA4B,CAAA;IAC5B,8EAA8E;IAC9E,yCAA4B,CAAA;IAC5B,sCAAsC;IACtC,wCAA2B,CAAA;AAC7B,CAAC,EAjCW,SAAS,yBAAT,SAAS,QAiCpB;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-default',\n  /** For softer contrast neutral text */\n  TextAlternative = 'text-alternative',\n  /** For the softest contrast neutral text (not accessible) */\n  TextMuted = 'text-muted',\n  /** For elements used on top of overlay/alternative. Used for text, icon or border */\n  OverlayInverse = 'overlay-inverse',\n  /** For interactive, active, and selected semantics. Used for text, background, icon or border */\n  PrimaryDefault = 'primary-default',\n  /** For elements used on top of primary/default. Used for text, icon or border */\n  PrimaryInverse = 'primary-inverse',\n  /** For the critical alert semantic elements. Used for text, background, icon or border */\n  ErrorDefault = 'error-default',\n  /** For the stronger contrast error semantic elements. */\n  ErrorAlternative = 'error-alternative',\n  /** For elements used on top of error/default. Used for text, icon or border */\n  ErrorInverse = 'error-inverse',\n  /** For the positive semantic elements. Used for text, background, icon or border */\n  SuccessDefault = 'success-default',\n  /** For elements used on top of success/default. Used for text, icon or border */\n  SuccessInverse = 'success-inverse',\n  /** For the caution alert semantic elements. Used for text, background, icon or border */\n  WarningDefault = 'warning-default',\n  /** For elements used on top of warning/default. Used for text, icon or border */\n  WarningInverse = 'warning-inverse',\n  /** For informational read-only elements. Used for text, background, icon or border */\n  InfoDefault = 'info-default',\n  /** For elements used on top of info/default. Used for text, icon or border */\n  InfoInverse = 'info-inverse',\n  /** Make the text color transparent */\n  Transparent = '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"]}
+{"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.js

@@ -37,7 +37,7 @@ const generateTextClassNames = ({ variant = Text_constants_1.DEFAULT_TEXT_VARIAN
     const isItalic = fontStyle === Text_types_1.FontStyle.Italic;
     const textClassname = `text-${variant}`;
     const fontFamilyClassname = `font-${variant}${fontWeightStyleClassname}${isItalic ? '-italic' : ''}`;
-    const textColorClassname = `text-${color}`;
+    const textColorClassname = `${color}`;
     const mergedClassnames = `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();
     return mergedClassnames;
 };

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

@@ -1 +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,QAAQ,KAAK,EAAE,CAAC;IAC3C,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 = `text-${color}`;\n  const mergedClassnames =\n    `${textClassname} ${fontFamilyClassname} ${textColorClassname} ${twClassName}`.trim();\n\n  return mergedClassnames;\n};\n"]}
+{"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

@@ -1,3 +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

@@ -1 +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,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
+{"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.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iEAAiE;AACjE,8FAA4E;AAC5E,+CAAiD;AAEjD,+CAAoC;AAGpC,4EAAoD;AAEpD,mDAA2B;AAC3B,wDAAgC;AAEhC,iEAAkE;AAElE,iEAGgC;AAEhC,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,+CAAwB,CAAC,SAAS,EAC9C,WAAW,EACX,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GAAG,+CAAwB,CAAC,UAAU,EAChD,SAAS,GAAG,+CAAwB,CAAC,SAAS,EAC9C,OAAO,EACP,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,wCAAwC;IACxC,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,OAAO,IAAA,4DAAqC,EAAC;YAC3C,SAAS;YACT,SAAS;YACT,UAAU;YACV,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,OAAO,IAAA,uDAAgC,EAAC;YACtC,SAAS;YACT,SAAS;YACT,SAAS;SACV,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtC,0DAA0D;IAC1D,MAAM,mBAAmB,GAAuB;QAC9C,GAAG,+CAAwB,CAAC,cAAc;QAC1C,GAAG,cAAc;QACjB,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;KACxE,CAAC;IACF,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IAEjE,MAAM,iBAAiB,GAAuB;QAC5C,GAAG,+CAAwB,CAAC,YAAY;QACxC,GAAG,YAAY;QACf,WAAW,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,WAAW,IAAI,EAAE,EAAE;KACtE,CAAC;IACF,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,cAAc,GAAyC;QAC3D,GAAG,+CAAwB,CAAC,SAAS;QACrC,GAAG,SAAS;QACZ,WAAW,EAAE,GAAG,gBAAgB,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;KACnE,CAAC;IAEF,0DAA0D;IAC1D,MAAM,iBAAiB,GAAiB;QACtC,GAAG,+CAAwB,CAAC,YAAY;QACxC,WAAW;QACX,KAAK,EAAE,gBAA6B;QACpC,gBAAgB,EAAE;YAChB,WAAW,EAAE,GAAG,gBAAgB,aAAa;SAC9C;QACD,GAAG,YAAY;KAChB,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,KAA4B,EAAE,EAAE;QACtD,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE;YAC7B,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE;YAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAA4B,EAAE,EAAE;QAC1D,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE;YAC7B,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF;;;;;;;;;;;;;OAaG;IAEH,6EAA6E;IAC7E,MAAM,YAAY,GAChB,SAAS,EAAE,OAAO,IAAI,+CAAwB,CAAC,SAAS,CAAC,OAAO,CAAC;IACnE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,CAAA,QAAQ,YAAsB,EAAE,CAAC;IAC1D,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAE3C,0EAA0E;IAC1E,wBAAwB;IACxB,MAAM,aAAa,GAAG,GAAG,CAAC;IAE1B,8DAA8D;IAC9D,MAAM,kBAAkB,GACtB,cAAc,EAAE,IAAI,IAAI,+CAAwB,CAAC,cAAc,CAAC,IAAI,CAAC;IACvE,MAAM,gBAAgB,GACpB,YAAY,EAAE,IAAI,IAAI,+CAAwB,CAAC,YAAY,CAAC,IAAI,CAAC;IAEnE,wCAAwC;IACxC,MAAM,oBAAoB,GACxB,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC;IACxD,MAAM,kBAAkB,GACtB,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC;IAEtD;;;;;;;;OAQG;IACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;IACpC,MAAM,qBAAqB,GACzB,MAAM,CAAC,kBAAkB,CAAC,GAAG,yBAAyB,CAAC;IACzD,MAAM,mBAAmB,GACvB,MAAM,CAAC,gBAAgB,CAAC,GAAG,yBAAyB,CAAC;IAEvD,OAAO,CACL,CAAC,cAAI,CACH;MAAA,CAAC,kBAAkB,IAAI,CAAC,cAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA,QAAQ,CAAC,CAAE,CAAA,EAAE,cAAI,CAAC,CACxD;MAAA,CAAC,SAAS,IAAI,CACZ,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,CAAC,CACxC;UAAA,CAAC,iBAAO,CAAC,IAAI,iBAAiB,CAAC,EACjC;QAAA,EAAE,mBAAI,CAAC,CACR,CACD;MAAA,CAAC,cAAI,CACH,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,WAAW,CAAC,CAAC,kBAAkB,CAAC,CAChC,UAAU,CACV,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,aAAa,CACpB,oBAAoB,CACpB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,CAAC,SAAS,IAAI,CACb,EACE;YAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC;YACpB,gEAAgE;YAChE,eAAe;YACf,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA,MAAM,eAAe,KAAK,CAAC,CACxC;gBAAA,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA;sBACL,qBAAqB;sCACL,aAAa;0BACzB,oBAAoB;yBACrB,eAAe;yBACf,qBAAqB;qBACzB,CAAC,CAEJ;kBAAA,CAAC,cAAI,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC,IAAI,mBAAmB,CAAC,EAC1D;gBAAA,EAAE,mBAAI,CACR;cAAA,EAAE,mBAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACD;YAAA,CAAC,cAAI,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAI,CAC1C;YAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC;YAClB,gEAAgE;YAChE,eAAe;YACf,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA,MAAM,eAAe,KAAK,CAAC,CACxC;gBAAA,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA;sBACL,qBAAqB;;0BAEjB,aAAa;0BACb,kBAAkB;yBACnB,eAAe,UAAU,mBAAmB,KAAK,CAAC,CAEzD;kBAAA,CAAC,cAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,iBAAiB,CAAC,EACtD;gBAAA,EAAE,mBAAI,CACR;cAAA,EAAE,mBAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACH;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,cAAI,CACN;MAAA,CAAC,gBAAgB,IAAI,CAAC,cAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA,QAAQ,CAAC,CAAE,CAAA,EAAE,cAAI,CAAC,CACxD;IAAA,EAAE,cAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo, useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { SpinnerProps } from '../../temp-components/Spinner';\nimport Spinner from '../../temp-components/Spinner';\nimport type { IconProps, IconColor } from '../Icon';\nimport Icon from '../Icon';\nimport Text from '../Text/Text';\nimport type { TextProps } from '../Text/Text.types';\nimport { DEFAULT_TEXTBUTTON_PROPS } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\nimport {\n  generateTextButtonContainerClassNames,\n  generateTextButtonTextClassNames,\n} from './TextButton.utilities';\n\nconst TextButton = ({\n  children,\n  textProps,\n  isLoading = DEFAULT_TEXTBUTTON_PROPS.isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled = DEFAULT_TEXTBUTTON_PROPS.isDisabled,\n  isInverse = DEFAULT_TEXTBUTTON_PROPS.isInverse,\n  onPress,\n  onPressIn,\n  onPressOut,\n  onLongPress,\n  twClassName,\n  accessibilityRole,\n  accessibilityLabel,\n  style,\n  ...props\n}: TextButtonProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  // Styling calculation for state changes\n  const twContainerClassNames = useMemo(() => {\n    return generateTextButtonContainerClassNames({\n      isPressed,\n      isLoading,\n      isDisabled,\n      twClassName,\n    });\n  }, [isPressed, isLoading, isDisabled, twClassName]);\n\n  const twTextClassNames = useMemo(() => {\n    return generateTextButtonTextClassNames({\n      isPressed,\n      isInverse,\n      isLoading,\n    });\n  }, [isPressed, isInverse, isLoading]);\n\n  // Merging default settings for Icons with passed in props\n  const finalStartIconProps: Partial<IconProps> = {\n    ...DEFAULT_TEXTBUTTON_PROPS.startIconProps,\n    ...startIconProps,\n    twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n  };\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n\n  const finalEndIconProps: Partial<IconProps> = {\n    ...DEFAULT_TEXTBUTTON_PROPS.endIconProps,\n    ...endIconProps,\n    twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n  };\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const finalTextProps: Omit<Partial<TextProps>, 'children'> = {\n    ...DEFAULT_TEXTBUTTON_PROPS.textProps,\n    ...textProps,\n    twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n  };\n\n  // Merging spinner settings for Icons with passed in props\n  const finalSpinnerProps: SpinnerProps = {\n    ...DEFAULT_TEXTBUTTON_PROPS.spinnerProps,\n    loadingText,\n    color: twTextClassNames as IconColor,\n    loadingTextProps: {\n      twClassName: `${twTextClassNames} mt-[2.5px]`,\n    },\n    ...spinnerProps,\n  };\n  const onPressHandler = (event: GestureResponderEvent) => {\n    if (!isDisabled && !isLoading) {\n      onPress?.(event);\n    }\n  };\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    if (!isDisabled && !isLoading) {\n      setIsPressed(true);\n      onPressIn?.(event);\n    }\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    if (!isDisabled && !isLoading) {\n      setIsPressed(false);\n      onPressOut?.(event);\n    }\n  };\n\n  const onLongPressHandler = (event: GestureResponderEvent) => {\n    if (!isDisabled && !isLoading) {\n      onLongPress?.(event);\n    }\n  };\n\n  /**\n   * Design Requirements\n   * TextButton needs to be able to be placed inline with other Texts along with\n   * accompanying icons.\n   *\n   * Limitations\n   * React Native renders Texts and components nested inside Texts very differently.\n   * In order to fulfil design requirements\n   * - TextButton needs to be built using Text wrapping the component to ensure\n   * when placed in line with other Texts, it can be properly displayed inline\n   * with other Texts.\n   * - Due to React Native Texts calculating the layout of nested components\n   * differently, there needs to be a few styling hacks applied below\n   */\n\n  // Get the line height of the text, which is also the height of the component\n  const finalVariant =\n    textProps?.variant || DEFAULT_TEXTBUTTON_PROPS.textProps.variant;\n  const { lineHeight } = tw`text-${finalVariant as string}`;\n  const componentHeight = Number(lineHeight);\n\n  // Due to React Native rendering Views slightly above Texts, any non-texts\n  // need to be moved down\n  const nonTextOffSet = 2.5;\n\n  // Get the final sizes of Icons to help with manual alignments\n  const finalStartIconSize =\n    startIconProps?.size || DEFAULT_TEXTBUTTON_PROPS.startIconProps.size;\n  const finalEndIconSize =\n    endIconProps?.size || DEFAULT_TEXTBUTTON_PROPS.endIconProps.size;\n\n  // Offsets to vertically center the Icon\n  const finalStartIconOffset =\n    (Number(lineHeight) - Number(finalStartIconSize)) / 2;\n  const finalEndIconOffset =\n    (Number(lineHeight) - Number(finalEndIconSize)) / 2;\n\n  /**\n   * Due to Texts restricting nested components to manipulating layout with\n   * margins/paddings, we needed to add Nested Views in order to properly add\n   * additional margins/paddings. However, this causes the Text component to\n   * somehow not include the Icons as part of the calculation for displaying\n   * a change in background color onPress. Because of that, we need to mimic\n   * the behavior on the Icon wrappers by baking the margins into the Icon\n   * wrappers in order to display the background change properly\n   */\n  const marginsBetweenIconAndText = 4;\n  const startIconWrapperWidth =\n    Number(finalStartIconSize) + marginsBetweenIconAndText;\n  const endIconWrapperWidth =\n    Number(finalEndIconSize) + marginsBetweenIconAndText;\n\n  return (\n    <Text>\n      {finalStartIconName && <Text style={tw`hidden`}> </Text>}\n      {isLoading && (\n        <View style={tw`${twContainerClassNames}`}>\n          <Spinner {...finalSpinnerProps} />\n        </View>\n      )}\n      <Text\n        onPress={onPressHandler}\n        onPressIn={onPressInHandler}\n        onPressOut={onPressOutHandler}\n        onLongPress={onLongPressHandler}\n        accessible\n        accessibilityRole=\"button\"\n        accessibilityLabel={accessibilityLabel}\n        style={[tw`${twContainerClassNames}`, style]}\n        testID=\"text-button\"\n        suppressHighlighting\n        {...props}\n      >\n        {!isLoading && (\n          <>\n            {finalStartIconName ? (\n              // This additional View is needed, otherwise things are rendered\n              // VERY funkily\n              <View style={tw`h-[${componentHeight}px]`}>\n                <View\n                  style={tw`\n                    ${twContainerClassNames} \n                    items-start mt-[${nonTextOffSet}px] \n                    pt-[${finalStartIconOffset}px] \n                    h-[${componentHeight}px] \n                    w-[${startIconWrapperWidth}px]\n                    `}\n                >\n                  <Icon name={finalStartIconName} {...finalStartIconProps} />\n                </View>\n              </View>\n            ) : (\n              startAccessory\n            )}\n            <Text {...finalTextProps}>{children}</Text>\n            {finalEndIconName ? (\n              // This additional View is needed, otherwise things are rendered\n              // VERY funkily\n              <View style={tw`h-[${componentHeight}px]`}>\n                <View\n                  style={tw`\n                    ${twContainerClassNames} \n                    items-end \n                    mt-[${nonTextOffSet}px] \n                    pt-[${finalEndIconOffset}px] \n                    h-[${componentHeight}px] w-[${endIconWrapperWidth}px]`}\n                >\n                  <Icon name={finalEndIconName} {...finalEndIconProps} />\n                </View>\n              </View>\n            ) : (\n              endAccessory\n            )}\n          </>\n        )}\n      </Text>\n      {finalEndIconName && <Text style={tw`hidden`}> </Text>}\n    </Text>\n  );\n};\n\nexport default TextButton;\n"]}

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

@@ -0,0 +1,73 @@
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { TextProps } from 'src/components/Text/Text.types';
+import type { SpinnerProps } from '../../temp-components/Spinner';
+import type { IconProps, IconName } from '../Icon';
+/**
+ * TextButton component props.
+ */
+export type TextButtonProps = {
+    /**
+     * Required prop for the content to be rendered within the TextButton
+     */
+    children: string;
+    /**
+     * Optional props to be passed to the Text component when children is a string
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional prop that when true, shows a loading spinner
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Optional prop for text to display when button is in loading state
+     */
+    loadingText?: string;
+    /**
+     * Optional prop to pass additional properties to the end icon
+     */
+    spinnerProps?: Partial<SpinnerProps>;
+    /**
+     * Optional prop to specify an icon to show at the start of the button
+     */
+    startIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the start icon
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the start of the button
+     */
+    startAccessory?: React.ReactNode;
+    /**
+     * Optional prop to specify an icon to show at the end of the button
+     */
+    endIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the end icon
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the end of the button
+     */
+    endAccessory?: React.ReactNode;
+    /**
+     * Optional prop that when true, disables the button
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional prop to show the inverse state of the button, which is reserved for buttons on colored backgrounds.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional prop to control the style.
+     */
+    style?: StyleProp<ViewStyle>;
+} & Omit<PressableProps, 'disabled'>;
+//# sourceMappingURL=TextButton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/TextButton/TextButton.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TextButton.types.js.map