@metamask/design-system-react-native 0.24.0 → 0.26.0

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAE3C,8DAAiD;AACjD,kDAAyC;AACzC,kDAAwD;AAIxD,2BAA2B;AAC3B,gDAAgD;AACzC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EACvC,CAAC,OAAgB,EAAU,EAAE;QAC3B,MAAM,YAAY,GAChB,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAEzE,MAAM,WAAW,GAAG;UAChB,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU;UACtD,YAAY;OACf,CAAC;QAEF,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC;YAC7D,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,mCAAmC;oBACrC,CAAC,CAAC,2BAA2B,CAAC;SACnC;aAAM,IAAI,QAAQ,EAAE;YACnB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACrE,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,4BAA4B;oBAC9B,CAAC,CAAC,oBAAoB,CAAC;SAC5B;aAAM,IAAI,SAAS,EAAE;YACpB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW,GAAG,wBAAwB,CAAC;SACxC;aAAM;YACL,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,oBAAoB,CAAC;SAC5B;QAED,OAAO,GAAG,eAAe,IAAI,WAAW,IAAI,WAAW,EAAE,CAAC;IAC5D,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAC9C,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAClC,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,QAAQ,EAAE;YACZ,OAAO,OAAO,IAAI,SAAS;gBACzB,CAAC,CAAC,4BAA4B;gBAC9B,CAAC,CAAC,oBAAoB,CAAC;SAC1B;QACD,IAAI,SAAS,EAAE;YACb,OAAO,sBAAsB,CAAC;SAC/B;QACD,oEAAoE;QACpE,OAAO,cAAc,CAAC;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;SACb,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;SAChB,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,qBAAqB,CAAC,CACnC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAxGW,QAAA,cAAc,kBAwGzB","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\n// Internal Button variant.\n// Consumers should use `Button` with `variant`.\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const classNameStr =\n        typeof twClassName === 'function' ? twClassName(pressed) : twClassName;\n\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${classNameStr}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      }\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      // Use neutral text color for all states (default, pressed, loading)\n      return 'text-default';\n    },\n    [isDanger, isInverse, isLoading],\n  );\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n      }}\n      spinnerProps={{\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n      }}\n      isLoading={isLoading}\n      twClassName={getContainerClassName}\n      textClassName={getTextClassName}\n      iconClassName={getTextClassName}\n      style={style}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\n// Internal Button variant.\n// Consumers should use `Button` with `variant`.\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const classNameStr =\n        typeof twClassName === 'function' ? twClassName(pressed) : twClassName;\n\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${classNameStr}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      }\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      // Use neutral text color for all states (default, pressed, loading)\n      return 'text-default';\n    },\n    [isDanger, isInverse, isLoading],\n  );\n\n  return (\n    <ButtonBase\n      textProps={textProps}\n      spinnerProps={spinnerProps}\n      startIconProps={startIconProps}\n      endIconProps={endIconProps}\n      isLoading={isLoading}\n      twClassName={getContainerClassName}\n      textClassName={getTextClassName}\n      iconClassName={getTextClassName}\n      style={style}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAM3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA4FrB,CAAC"}
+{"version":3,"file":"ButtonTertiary.d.cts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAI3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA8ErB,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAM3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA4FrB,CAAC"}
+{"version":3,"file":"ButtonTertiary.d.mts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,cAAc;AAI3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,sIAYxB,mBAAmB,sBA8ErB,CAAC"}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs

@@ -7,8 +7,6 @@ function $importDefault(module) {
 import $React, { useCallback } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../../../ButtonBase/index.mjs";
-import { IconSize } from "../../../Icon/index.mjs";
-import { TextVariant, FontWeight } from "../../../Text/index.mjs";
 // Internal Button variant.
 // Consumers should use `Button` with `variant`.
 export const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse = false, isLoading = false, twClassName = '', style, ...props }) => {
@@ -63,21 +61,7 @@ export const ButtonTertiary = ({ children, textProps, spinnerProps, startIconPro
         // Use neutral text color for all states (default, pressed, loading)
         return 'text-default';
     }, [isDanger, isInverse, isLoading]);
-    return (<ButtonBase textProps={{
-            variant: TextVariant.BodyMd,
-            fontWeight: FontWeight.Medium,
-            numberOfLines: 1,
-            ellipsizeMode: 'clip',
-            ...textProps,
-        }} spinnerProps={{
-            ...spinnerProps,
-        }} startIconProps={{
-            size: IconSize.Sm,
-            ...startIconProps,
-        }} endIconProps={{
-            size: IconSize.Sm,
-            ...endIconProps,
-        }} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
+    return (<ButtonBase textProps={textProps} spinnerProps={spinnerProps} startIconProps={startIconProps} endIconProps={endIconProps} isLoading={isLoading} twClassName={getContainerClassName} textClassName={getTextClassName} iconClassName={getTextClassName} style={style} {...props}>
       {children}
     </ButtonBase>);
 };

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAE3C,OAAO,EAAE,UAAU,EAAE,sCAA4B;AACjD,OAAO,EAAE,QAAQ,EAAE,gCAAsB;AACzC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,gCAAsB;AAIxD,2BAA2B;AAC3B,gDAAgD;AAChD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,OAAgB,EAAU,EAAE;QAC3B,MAAM,YAAY,GAChB,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAEzE,MAAM,WAAW,GAAG;UAChB,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU;UACtD,YAAY;OACf,CAAC;QAEF,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,WAAW,GAAG,EAAE,CAAC;QAErB,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC;YAC7D,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,mCAAmC;oBACrC,CAAC,CAAC,2BAA2B,CAAC;SACnC;aAAM,IAAI,QAAQ,EAAE;YACnB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACrE,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,4BAA4B;oBAC9B,CAAC,CAAC,oBAAoB,CAAC;SAC5B;aAAM,IAAI,SAAS,EAAE;YACpB,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW,GAAG,wBAAwB,CAAC;SACxC;aAAM;YACL,eAAe;gBACb,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW;gBACT,OAAO,IAAI,SAAS;oBAClB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,oBAAoB,CAAC;SAC5B;QAED,OAAO,GAAG,eAAe,IAAI,WAAW,IAAI,WAAW,EAAE,CAAC;IAC5D,CAAC,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAC9C,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,QAAQ,EAAE;YACZ,OAAO,OAAO,IAAI,SAAS;gBACzB,CAAC,CAAC,4BAA4B;gBAC9B,CAAC,CAAC,oBAAoB,CAAC;SAC1B;QACD,IAAI,SAAS,EAAE;YACb,OAAO,sBAAsB,CAAC;SAC/B;QACD,oEAAoE;QACpE,OAAO,cAAc,CAAC;IACxB,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;SACb,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,QAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;SAChB,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,qBAAqB,CAAC,CACnC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAChC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\n// Internal Button variant.\n// Consumers should use `Button` with `variant`.\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const classNameStr =\n        typeof twClassName === 'function' ? twClassName(pressed) : twClassName;\n\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${classNameStr}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      }\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      // Use neutral text color for all states (default, pressed, loading)\n      return 'text-default';\n    },\n    [isDanger, isInverse, isLoading],\n  );\n\n  return (\n    <ButtonBase\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        numberOfLines: 1,\n        ellipsizeMode: 'clip',\n        ...textProps,\n      }}\n      spinnerProps={{\n        ...spinnerProps,\n      }}\n      startIconProps={{\n        size: IconSize.Sm,\n        ...startIconProps,\n      }}\n      endIconProps={{\n        size: IconSize.Sm,\n        ...endIconProps,\n      }}\n      isLoading={isLoading}\n      twClassName={getContainerClassName}\n      textClassName={getTextClassName}\n      iconClassName={getTextClassName}\n      style={style}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\n// Internal Button variant.\n// Consumers should use `Button` with `variant`.\nexport const ButtonTertiary = ({\n  children,\n  textProps,\n  spinnerProps,\n  startIconProps,\n  endIconProps,\n  isDanger = false,\n  isInverse = false,\n  isLoading = false,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonTertiaryProps) => {\n  const getContainerClassName = useCallback(\n    (pressed: boolean): string => {\n      const classNameStr =\n        typeof twClassName === 'function' ? twClassName(pressed) : twClassName;\n\n      const baseClasses = `\n        ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n        ${classNameStr}\n      `;\n\n      let backgroundClass = '';\n      let borderClass = '';\n\n      if (isInverse && isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-default-pressed' : 'bg-default';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-default-pressed'\n            : 'border-background-default';\n      } else if (isDanger) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-error-muted-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-error-muted-pressed'\n            : 'border-transparent';\n      } else if (isInverse) {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass = 'border-primary-inverse';\n      } else {\n        backgroundClass =\n          pressed || isLoading ? 'bg-pressed' : 'bg-transparent';\n        borderClass =\n          pressed || isLoading\n            ? 'border-background-pressed'\n            : 'border-transparent';\n      }\n\n      return `${backgroundClass} ${borderClass} ${baseClasses}`;\n    },\n    [isInverse, isDanger, isLoading, twClassName],\n  );\n\n  const getTextClassName = useCallback(\n    (pressed: boolean): string => {\n      if (isDanger) {\n        return pressed || isLoading\n          ? 'text-error-default-pressed'\n          : 'text-error-default';\n      }\n      if (isInverse) {\n        return 'text-primary-inverse';\n      }\n      // Use neutral text color for all states (default, pressed, loading)\n      return 'text-default';\n    },\n    [isDanger, isInverse, isLoading],\n  );\n\n  return (\n    <ButtonBase\n      textProps={textProps}\n      spinnerProps={spinnerProps}\n      startIconProps={startIconProps}\n      endIconProps={endIconProps}\n      isLoading={isLoading}\n      twClassName={getContainerClassName}\n      textClassName={getTextClassName}\n      iconClassName={getTextClassName}\n      style={style}\n      {...props}\n    >\n      {children}\n    </ButtonBase>\n  );\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.cjs

@@ -27,16 +27,21 @@ exports.ButtonBase = void 0;
 const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native/index.js");
+const Box_1 = require("../Box/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const ButtonAnimated_1 = require("../temp-components/ButtonAnimated/index.cjs");
 const Spinner_1 = require("../temp-components/Spinner/index.cjs");
-const Text_1 = require("../Text/index.cjs");
 const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
-const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
+const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const finalStartIconName = startIconName ?? startIconProps?.name;
     const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Generate accessibility label if not provided
     const finalAccessibilityLabel = (0, react_1.useMemo)(() => {
         if (accessibilityLabel) {
@@ -81,9 +86,11 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
             // Build button container styles
             const buttonStyles = tw.style(
             // Base layout - flex container for button content
-            'flex-row items-center justify-center gap-x-2', 
+            'flex-row items-center justify-center', 
             // Visual styling
-            'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden', 
+            'bg-muted overflow-hidden', 
+            // Conditional Border Radius and Horizontal Spacing based on requirements
+            (0, ButtonBase_constants_1.getButtonBaseBorderRadiusTwClass)(size), (0, ButtonBase_constants_1.getButtonBaseHorizontalPaddingTwClasses)(size, hasStart, hasEnd), 
             // Size
             ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
             // State-based opacity
@@ -100,31 +107,38 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
             }
             return computedStyle;
         }} {...props}>
-      {({ pressed }) => (<>
-          {/* Loading spinner overlay */}
-          {isLoading && (<react_native_1.View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
-              <Spinner_1.Spinner color={textClassName
-                    ? textClassName(pressed)
-                    : Icon_1.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                    numberOfLines: 1,
-                    twClassName: textClassName ? textClassName(pressed) : '',
-                    ...spinnerProps?.loadingTextProps,
-                }} {...spinnerProps}/>
-            </react_native_1.View>)}
-
-          {/* Button content - opacity controlled individually on each child */}
-          {finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory && (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>
-                {startAccessory}
-              </react_native_1.View>))}
+      {({ pressed }) => {
+            const { twClassName: loadingWrapperTw, ...restLoadingWrapper } = loadingWrapperProps ?? {};
+            const { twClassName: contentWrapperTw, ...restContentWrapper } = contentWrapperProps ?? {};
+            return (<>
+            {/* Loading spinner overlay */}
+            {isLoading && (<Box_1.Box {...restLoadingWrapper} twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}>
+                <Spinner_1.Spinner color={textClassName
+                        ? textClassName(pressed)
+                        : Icon_1.IconColor.IconDefault} loadingText={loadingText} {...spinnerProps} spinnerIconProps={{
+                        size: iconSize,
+                        ...spinnerProps?.spinnerIconProps,
+                    }} loadingTextProps={{
+                        numberOfLines: 1,
+                        variant: labelTextVariant,
+                        twClassName: textClassName ? textClassName(pressed) : '',
+                        ...spinnerProps?.loadingTextProps,
+                    }}/>
+              </Box_1.Box>)}
 
-          {typeof children === 'string' ? (<Text_1.Text variant={Text_1.TextVariant.BodyMd} fontWeight={Text_1.FontWeight.Medium} color={Text_1.TextColor.TextDefault} {...textProps} twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}>
+            <BoxRow_1.BoxRow {...restContentWrapper} twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)} textProps={{
+                    variant: labelTextVariant,
+                    fontWeight: design_system_shared_1.FontWeight.Medium,
+                    color: design_system_shared_1.TextColor.TextDefault,
+                    numberOfLines: 1,
+                    ellipsizeMode: 'clip',
+                    ...textProps,
+                    twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,
+                }}>
               {children}
-            </Text_1.Text>) : (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>{children}</react_native_1.View>)}
-
-          {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>
-                {endAccessory}
-              </react_native_1.View>))}
-        </>)}
+            </BoxRow_1.BoxRow>
+          </>);
+        }}
     </ButtonAnimated_1.ButtonAnimated>);
 };
 exports.ButtonBase = ButtonBase;

package/dist/components/ButtonBase/ButtonBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { Text, TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center gap-x-2',\n          // Visual styling\n          'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          {/* Loading spinner overlay */}\n          {isLoading && (\n            <View\n              style={tw.style(\n                'absolute inset-0 flex items-center justify-center',\n              )}\n              testID=\"spinner-container\"\n            >\n              <Spinner\n                color={\n                  textClassName\n                    ? (textClassName(pressed) as IconColor)\n                    : IconColor.IconDefault\n                }\n                loadingText={loadingText}\n                loadingTextProps={{\n                  numberOfLines: 1,\n                  twClassName: textClassName ? textClassName(pressed) : '',\n                  ...spinnerProps?.loadingTextProps,\n                }}\n                {...spinnerProps}\n              />\n            </View>\n          )}\n\n          {/* Button content - opacity controlled individually on each child */}\n          {finalStartIconName ? (\n            <Icon\n              name={finalStartIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...startIconProps}\n            />\n          ) : (\n            startAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {startAccessory}\n              </View>\n            )\n          )}\n\n          {typeof children === 'string' ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextDefault}\n              {...textProps}\n              twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}\n            >\n              {children}\n            </Text>\n          ) : (\n            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>\n          )}\n\n          {finalEndIconName ? (\n            <Icon\n              name={finalEndIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...endIconProps}\n            />\n          ) : (\n            endAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {endAccessory}\n              </View>\n            )\n          )}\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAIwC;AACxC,qFAAmE;AACnE,+CAAuC;AAGvC,0CAA6B;AAC7B,gDAAmC;AACnC,4CAA0C;AAC1C,gFAAmE;AACnE,kEAAqD;AAErD,qEAMgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAAG,QAAQ,EAC5B,oBAAoB,EACpB,qBAAqB,EACrB,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,QAAQ,GAAG,OAAO,CAAC,kBAAkB,IAAI,cAAc,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,IAAI,YAAY,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,QAAQ,IAAI,MAAM,CAAC;IAE1C,MAAM,QAAQ,GAAG,mDAA4B,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,uDAAgC,CAAC,IAAI,CAAC,CAAC;IAEhE,+CAA+C;IAC/C,MAAM,uBAAuB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3C,IAAI,kBAAkB,EAAE;YACtB,OAAO,kBAAkB,CAAC;SAC3B;QAED,6DAA6D;QAC7D,IAAI,SAAS,IAAI,WAAW,EAAE;YAC5B,OAAO,WAAW,CAAC;SACpB;QAED,+CAA+C;QAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,OAAO,QAAQ,CAAC;SACjB;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3D,gEAAgE;IAChE,MAAM,sBAAsB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1C,IAAI,iBAAiB,EAAE;YACrB,OAAO,iBAAiB,CAAC;SAC1B;QAED,IAAI,SAAS,EAAE;YACb,OAAO,0CAA0C,CAAC;SACnD;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,2DAA2D;IAC3D,MAAM,kBAAkB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACtC,MAAM,KAAK,GAA2C,EAAE,CAAC;QAEzD,IAAI,UAAU,IAAI,SAAS,EAAE;YAC3B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;SACvB;QAED,IAAI,SAAS,EAAE;YACb,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAClC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,uBAAuB,CAAC,CAC5C,iBAAiB,CAAC,CAAC,sBAAsB,CAAC,CAC1C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,+CAA+C;YAC/C,MAAM,eAAe,GACnB,OAAO,WAAW,KAAK,UAAU;gBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;gBACtB,CAAC,CAAC,WAAW,CAAC;YAElB,gCAAgC;YAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK;YAC3B,kDAAkD;YAClD,sCAAsC;YACtC,iBAAiB;YACjB,0BAA0B;YAC1B,yEAAyE;YACzE,IAAA,uDAAgC,EAAC,IAAI,CAAC,EACtC,IAAA,8DAAuC,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC/D,OAAO;YACP,2DAAoC,CAAC,IAAI,CAAC;YAC1C,sBAAsB;YACtB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;YACzC,mEAAmE;YACnE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;YACrC,iBAAiB;YACjB,eAAe,CAChB,CAAC;YAEF,2CAA2C;YAC3C,MAAM,aAAa,GAA2B,CAAC,YAAY,CAAC,CAAC;YAE7D,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACrC;YAED,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACf,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,GAC5D,mBAAmB,IAAI,EAAE,CAAC;YAC5B,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,GAC5D,mBAAmB,IAAI,EAAE,CAAC;YAE5B,OAAO,CACL,EACE;YAAA,CAAC,6BAA6B,CAC9B;YAAA,CAAC,SAAS,IAAI,CACZ,CAAC,SAAG,CACF,IAAI,kBAAkB,CAAC,CACvB,WAAW,CAAC,CAAC,qDAAqD,gBAAgB,IAAI,EAAE,EAAE,CAAC,CAE3F;gBAAA,CAAC,iBAAO,CACN,KAAK,CAAC,CACJ,aAAa;wBACX,CAAC,CAAE,aAAa,CAAC,OAAO,CAAe;wBACvC,CAAC,CAAC,gBAAS,CAAC,WAAW,CAC1B,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,YAAY,CAAC,CACjB,gBAAgB,CAAC,CAAC;wBAChB,IAAI,EAAE,QAAQ;wBACd,GAAG,YAAY,EAAE,gBAAgB;qBAClC,CAAC,CACF,gBAAgB,CAAC,CAAC;wBAChB,aAAa,EAAE,CAAC;wBAChB,OAAO,EAAE,gBAAgB;wBACzB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;wBACxD,GAAG,YAAY,EAAE,gBAAgB;qBAClC,CAAC,EAEN;cAAA,EAAE,SAAG,CAAC,CACP,CAED;;YAAA,CAAC,eAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,WAAW,CAAC,CAAC,GAAG,gBAAgB,IAAI,EAAE,IAAI,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzE,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5B,cAAc,CAAC,CACb,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,WAAW,CAAC,CAAC,YAAY,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvE,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACF,CACD,YAAY,CAAC,CACX,gBAAgB,CAAC,CAAC,CAAC,CACjB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,WAAW,CAAC,CAAC,YAAY,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvE,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACF,CACD,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,gBAAgB;oBACzB,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;oBAC5B,aAAa,EAAE,CAAC;oBAChB,aAAa,EAAE,MAAM;oBACrB,GAAG,SAAS;oBACZ,WAAW,EAAE,uCAAuC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;iBAClI,CAAC,CAEF;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,eAAM,CACV;UAAA,GAAG,CACJ,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1NW,QAAA,UAAU,cA0NrB","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`}\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.constants.cjs

@@ -1,10 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
+exports.getButtonBaseHorizontalPaddingTwClasses = exports.getButtonBaseBorderRadiusTwClass = exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = exports.MAP_BUTTONBASE_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
 const design_system_shared_1 = require("@metamask/design-system-shared");
 exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [design_system_shared_1.ButtonBaseSize.Sm]: 'h-8',
     [design_system_shared_1.ButtonBaseSize.Md]: 'h-10',
     [design_system_shared_1.ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: 'rounded-lg',
+    [design_system_shared_1.ButtonBaseSize.Md]: 'rounded-xl',
+    [design_system_shared_1.ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+exports.MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.IconSize.Md,
+};
+exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.TextVariant.BodySm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.TextVariant.BodyMd,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.TextVariant.BodyMd,
+};
+const getButtonBaseBorderRadiusTwClass = (size) => exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+exports.getButtonBaseBorderRadiusTwClass = getButtonBaseBorderRadiusTwClass;
+const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== design_system_shared_1.ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
+exports.getButtonBaseHorizontalPaddingTwClasses = getButtonBaseHorizontalPaddingTwClasses;
 //# sourceMappingURL=ButtonBase.constants.cjs.map

package/dist/components/ButtonBase/ButtonBase.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,yEAAgE;AAEnD,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
+{"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,yEAIwC;AAE3B,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEW,QAAA,mCAAmC,GAG5C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACjC,CAAC;AAEW,QAAA,gCAAgC,GAGzC;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;CACxC,CAAC;AAEK,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,2CAAmC,CAAC,IAAI,CAAC,CAAC;AAF1C,QAAA,gCAAgC,oCAEU;AAEhD,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,qCAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAfW,QAAA,uCAAuC,2CAelD","sourcesContent":["import {\n  ButtonBaseSize,\n  IconSize,\n  TextVariant,\n} from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n  [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n  [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n  [ButtonBaseSize.Sm]: IconSize.Sm,\n  [ButtonBaseSize.Md]: IconSize.Sm,\n  [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n  ButtonBaseSize,\n  TextVariant\n> = {\n  [ButtonBaseSize.Sm]: TextVariant.BodySm,\n  [ButtonBaseSize.Md]: TextVariant.BodyMd,\n  [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n  size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n  buttonSize: ButtonBaseSize,\n  hasStart: boolean,\n  hasEnd: boolean,\n): string => {\n  if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {\n    return 'px-3';\n  }\n  if (!hasStart && !hasEnd) {\n    return 'px-4';\n  }\n  if (hasStart) {\n    return 'pl-3 pr-4';\n  }\n  return 'pl-4 pr-3';\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.constants.d.cts

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.cts.map

package/dist/components/ButtonBase/ButtonBase.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
+{"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,uCAAuC;AAExC,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

package/dist/components/ButtonBase/ButtonBase.constants.d.mts

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.mts.map

package/dist/components/ButtonBase/ButtonBase.constants.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
+{"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,uCAAuC;AAExC,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

package/dist/components/ButtonBase/ButtonBase.constants.mjs

@@ -1,7 +1,35 @@
-import { ButtonBaseSize } from "@metamask/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask/design-system-shared";
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [ButtonBaseSize.Sm]: 'h-8',
     [ButtonBaseSize.Md]: 'h-10',
     [ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+export const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [ButtonBaseSize.Sm]: 'rounded-lg',
+    [ButtonBaseSize.Md]: 'rounded-xl',
+    [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+export const MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [ButtonBaseSize.Sm]: IconSize.Sm,
+    [ButtonBaseSize.Md]: IconSize.Sm,
+    [ButtonBaseSize.Lg]: IconSize.Md,
+};
+export const MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [ButtonBaseSize.Sm]: TextVariant.BodySm,
+    [ButtonBaseSize.Md]: TextVariant.BodyMd,
+    [ButtonBaseSize.Lg]: TextVariant.BodyMd,
+};
+export const getButtonBaseBorderRadiusTwClass = (size) => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+export const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
 //# sourceMappingURL=ButtonBase.constants.mjs.map

package/dist/components/ButtonBase/ButtonBase.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
+{"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,uCAAuC;AAExC,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAGzC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,mCAAmC,CAAC,IAAI,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,cAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import {\n  ButtonBaseSize,\n  IconSize,\n  TextVariant,\n} from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n  [ButtonBaseSize.Md]: 'h-10', // size (40px).\n  [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n  ButtonBaseSize,\n  string\n> = {\n  [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n  [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n  [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n  [ButtonBaseSize.Sm]: IconSize.Sm,\n  [ButtonBaseSize.Md]: IconSize.Sm,\n  [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n  ButtonBaseSize,\n  TextVariant\n> = {\n  [ButtonBaseSize.Sm]: TextVariant.BodySm,\n  [ButtonBaseSize.Md]: TextVariant.BodyMd,\n  [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n  size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n  buttonSize: ButtonBaseSize,\n  hasStart: boolean,\n  hasEnd: boolean,\n): string => {\n  if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {\n    return 'px-3';\n  }\n  if (!hasStart && !hasEnd) {\n    return 'px-4';\n  }\n  if (hasStart) {\n    return 'pl-3 pr-4';\n  }\n  return 'pl-4 pr-3';\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.d.cts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonBaseProps } from "./ButtonBase.types.cjs";
-export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
+export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonBase.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAUvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBA+LjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.d.mts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ButtonBaseProps } from "./ButtonBase.types.mjs";
-export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
+export declare const ButtonBase: ({ children, textProps, size, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityActions, onAccessibilityAction, ...props }: ButtonBaseProps) => React.JSX.Element;
 //# sourceMappingURL=ButtonBase.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAUvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBA+LjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -4,20 +4,25 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize } from "@metamask/design-system-shared";
+import { ButtonBaseSize, FontWeight, TextColor } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React, { useMemo } from "react";
 const React = $importDefault($React);
-import { View } from "react-native/index.js";
-import { Icon, IconColor, IconSize } from "../Icon/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { Icon, IconColor } from "../Icon/index.mjs";
 import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
 import { Spinner } from "../temp-components/Spinner/index.mjs";
-import { Text, TextVariant, FontWeight, TextColor } from "../Text/index.mjs";
-import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
-export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
+import { MAP_BUTTONBASE_SIZE_ICONSIZE, MAP_BUTTONBASE_SIZE_TEXT_VARIANT, getButtonBaseBorderRadiusTwClass, getButtonBaseHorizontalPaddingTwClasses, TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
+export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, loadingWrapperProps, contentWrapperProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
     const tw = useTailwind();
     const finalStartIconName = startIconName ?? startIconProps?.name;
     const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Generate accessibility label if not provided
     const finalAccessibilityLabel = useMemo(() => {
         if (accessibilityLabel) {
@@ -62,9 +67,11 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
             // Build button container styles
             const buttonStyles = tw.style(
             // Base layout - flex container for button content
-            'flex-row items-center justify-center gap-x-2', 
+            'flex-row items-center justify-center', 
             // Visual styling
-            'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden', 
+            'bg-muted overflow-hidden', 
+            // Conditional Border Radius and Horizontal Spacing based on requirements
+            getButtonBaseBorderRadiusTwClass(size), getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd), 
             // Size
             TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
             // State-based opacity
@@ -81,31 +88,38 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
             }
             return computedStyle;
         }} {...props}>
-      {({ pressed }) => (<>
-          {/* Loading spinner overlay */}
-          {isLoading && (<View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
-              <Spinner color={textClassName
-                    ? textClassName(pressed)
-                    : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                    numberOfLines: 1,
-                    twClassName: textClassName ? textClassName(pressed) : '',
-                    ...spinnerProps?.loadingTextProps,
-                }} {...spinnerProps}/>
-            </View>)}
-
-          {/* Button content - opacity controlled individually on each child */}
-          {finalStartIconName ? (<Icon name={finalStartIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
-                {startAccessory}
-              </View>))}
+      {({ pressed }) => {
+            const { twClassName: loadingWrapperTw, ...restLoadingWrapper } = loadingWrapperProps ?? {};
+            const { twClassName: contentWrapperTw, ...restContentWrapper } = contentWrapperProps ?? {};
+            return (<>
+            {/* Loading spinner overlay */}
+            {isLoading && (<Box {...restLoadingWrapper} twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}>
+                <Spinner color={textClassName
+                        ? textClassName(pressed)
+                        : IconColor.IconDefault} loadingText={loadingText} {...spinnerProps} spinnerIconProps={{
+                        size: iconSize,
+                        ...spinnerProps?.spinnerIconProps,
+                    }} loadingTextProps={{
+                        numberOfLines: 1,
+                        variant: labelTextVariant,
+                        twClassName: textClassName ? textClassName(pressed) : '',
+                        ...spinnerProps?.loadingTextProps,
+                    }}/>
+              </Box>)}
 
-          {typeof children === 'string' ? (<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} color={TextColor.TextDefault} {...textProps} twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}>
+            <BoxRow {...restContentWrapper} twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)} textProps={{
+                    variant: labelTextVariant,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextDefault,
+                    numberOfLines: 1,
+                    ellipsizeMode: 'clip',
+                    ...textProps,
+                    twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,
+                }}>
               {children}
-            </Text>) : (<View style={tw.style(isLoading && 'opacity-0')}>{children}</View>)}
-
-          {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
-                {endAccessory}
-              </View>))}
-        </>)}
+            </BoxRow>
+          </>);
+        }}
     </ButtonAnimated>);
 };
 //# sourceMappingURL=ButtonBase.mjs.map