@metamask-previews/design-system-react-native 0.5.1-preview.89a2095 → 0.6.0-preview.3dc70e1

package/dist/components/Box/Box.mjs

@@ -9,34 +9,19 @@ import $React from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
 import { TWCLASSMAP_BOX_GAP, TWCLASSMAP_BOX_MARGIN, TWCLASSMAP_BOX_MARGIN_TOP, TWCLASSMAP_BOX_MARGIN_RIGHT, TWCLASSMAP_BOX_MARGIN_BOTTOM, TWCLASSMAP_BOX_MARGIN_LEFT, TWCLASSMAP_BOX_MARGIN_HORIZONTAL, TWCLASSMAP_BOX_MARGIN_VERTICAL, TWCLASSMAP_BOX_PADDING, TWCLASSMAP_BOX_PADDING_TOP, TWCLASSMAP_BOX_PADDING_RIGHT, TWCLASSMAP_BOX_PADDING_BOTTOM, TWCLASSMAP_BOX_PADDING_LEFT, TWCLASSMAP_BOX_PADDING_HORIZONTAL, TWCLASSMAP_BOX_PADDING_VERTICAL, TWCLASSMAP_BOX_BORDER_WIDTH } from "./Box.constants.mjs";
-export const Box = ({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, twClassName = '', style, children, ...props }) => {
+export const Box = ({ flexDirection, flexWrap, gap, alignItems, justifyContent, margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical, borderWidth, borderColor, backgroundColor, twClassName, style, children, ...props }) => {
     const tw = useTailwind();
-    const twContainerClassNames = tw `
-    flex
-    ${flexDirection ?? ''} 
-    ${flexWrap ?? ''} 
-    ${gap !== undefined ? TWCLASSMAP_BOX_GAP[gap] : ''} 
-    ${alignItems ?? ''} 
-    ${justifyContent ?? ''}
-    ${margin !== undefined ? TWCLASSMAP_BOX_MARGIN[margin] : ''}
-    ${marginTop !== undefined ? TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : ''}
-    ${marginRight !== undefined ? TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : ''}
-    ${marginBottom !== undefined ? TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom] : ''}
-    ${marginLeft !== undefined ? TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : ''}
-    ${marginHorizontal !== undefined ? TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal] : ''}
-    ${marginVertical !== undefined ? TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical] : ''}
-    ${padding !== undefined ? TWCLASSMAP_BOX_PADDING[padding] : ''}
-    ${paddingTop !== undefined ? TWCLASSMAP_BOX_PADDING_TOP[paddingTop] : ''}
-    ${paddingRight !== undefined ? TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight] : ''}
-    ${paddingBottom !== undefined ? TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom] : ''}
-    ${paddingLeft !== undefined ? TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft] : ''}
-    ${paddingHorizontal !== undefined ? TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal] : ''}
-    ${paddingVertical !== undefined ? TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical] : ''}
-    ${borderWidth !== undefined ? TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : ''}
-    ${borderColor ?? ''}
-    ${backgroundColor ?? ''}
-    ${twClassName}`;
-    return (<View style={[twContainerClassNames, style]} {...props}>
+    return (<View {...props} style={[
+            tw.style('flex', flexDirection, flexWrap, gap !== undefined && TWCLASSMAP_BOX_GAP[gap], alignItems, justifyContent, margin !== undefined && TWCLASSMAP_BOX_MARGIN[margin], marginTop !== undefined && TWCLASSMAP_BOX_MARGIN_TOP[marginTop], marginRight !== undefined && TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight], marginBottom !== undefined &&
+                TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom], marginLeft !== undefined && TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft], marginHorizontal !== undefined &&
+                TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal], marginVertical !== undefined &&
+                TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical], padding !== undefined && TWCLASSMAP_BOX_PADDING[padding], paddingTop !== undefined && TWCLASSMAP_BOX_PADDING_TOP[paddingTop], paddingRight !== undefined &&
+                TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight], paddingBottom !== undefined &&
+                TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom], paddingLeft !== undefined && TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft], paddingHorizontal !== undefined &&
+                TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal], paddingVertical !== undefined &&
+                TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical], borderWidth !== undefined && TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth], borderColor, backgroundColor, twClassName),
+            style,
+        ]}>
       {children}
     </View>);
 };

package/dist/components/Box/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport {\n  TWCLASSMAP_BOX_GAP,\n  TWCLASSMAP_BOX_MARGIN,\n  TWCLASSMAP_BOX_MARGIN_TOP,\n  TWCLASSMAP_BOX_MARGIN_RIGHT,\n  TWCLASSMAP_BOX_MARGIN_BOTTOM,\n  TWCLASSMAP_BOX_MARGIN_LEFT,\n  TWCLASSMAP_BOX_MARGIN_HORIZONTAL,\n  TWCLASSMAP_BOX_MARGIN_VERTICAL,\n  TWCLASSMAP_BOX_PADDING,\n  TWCLASSMAP_BOX_PADDING_TOP,\n  TWCLASSMAP_BOX_PADDING_RIGHT,\n  TWCLASSMAP_BOX_PADDING_BOTTOM,\n  TWCLASSMAP_BOX_PADDING_LEFT,\n  TWCLASSMAP_BOX_PADDING_HORIZONTAL,\n  TWCLASSMAP_BOX_PADDING_VERTICAL,\n  TWCLASSMAP_BOX_BORDER_WIDTH,\n} from './Box.constants';\nimport type { BoxProps } from './Box.types';\n\nexport const Box = ({\n  flexDirection,\n  flexWrap,\n  gap,\n  alignItems,\n  justifyContent,\n  margin,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  marginHorizontal,\n  marginVertical,\n  padding,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  paddingHorizontal,\n  paddingVertical,\n  borderWidth,\n  borderColor,\n  backgroundColor,\n  twClassName = '',\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const tw = useTailwind();\n  const twContainerClassNames = tw`\n    flex\n    ${flexDirection ?? ''} \n    ${flexWrap ?? ''} \n    ${gap !== undefined ? TWCLASSMAP_BOX_GAP[gap] : ''} \n    ${alignItems ?? ''} \n    ${justifyContent ?? ''}\n    ${margin !== undefined ? TWCLASSMAP_BOX_MARGIN[margin] : ''}\n    ${marginTop !== undefined ? TWCLASSMAP_BOX_MARGIN_TOP[marginTop] : ''}\n    ${marginRight !== undefined ? TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight] : ''}\n    ${marginBottom !== undefined ? TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom] : ''}\n    ${marginLeft !== undefined ? TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft] : ''}\n    ${marginHorizontal !== undefined ? TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal] : ''}\n    ${marginVertical !== undefined ? TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical] : ''}\n    ${padding !== undefined ? TWCLASSMAP_BOX_PADDING[padding] : ''}\n    ${paddingTop !== undefined ? TWCLASSMAP_BOX_PADDING_TOP[paddingTop] : ''}\n    ${paddingRight !== undefined ? TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight] : ''}\n    ${paddingBottom !== undefined ? TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom] : ''}\n    ${paddingLeft !== undefined ? TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft] : ''}\n    ${paddingHorizontal !== undefined ? TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal] : ''}\n    ${paddingVertical !== undefined ? TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical] : ''}\n    ${borderWidth !== undefined ? TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth] : ''}\n    ${borderColor ?? ''}\n    ${backgroundColor ?? ''}\n    ${twClassName}`;\n\n  return (\n    <View style={[twContainerClassNames, style]} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"Box.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,sBAAsB,EACtB,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC3B,iCAAiC,EACjC,+BAA+B,EAC/B,2BAA2B,EAC5B,4BAAwB;AAGzB,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,EACb,QAAQ,EACR,GAAG,EACH,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,WAAW,EACX,eAAe,EACf,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACC,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,MAAM,EACN,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,SAAS,IAAI,kBAAkB,CAAC,GAAG,CAAC,EAC5C,UAAU,EACV,cAAc,EACd,MAAM,KAAK,SAAS,IAAI,qBAAqB,CAAC,MAAM,CAAC,EACrD,SAAS,KAAK,SAAS,IAAI,yBAAyB,CAAC,SAAS,CAAC,EAC/D,WAAW,KAAK,SAAS,IAAI,2BAA2B,CAAC,WAAW,CAAC,EACrE,YAAY,KAAK,SAAS;gBACxB,4BAA4B,CAAC,YAAY,CAAC,EAC5C,UAAU,KAAK,SAAS,IAAI,0BAA0B,CAAC,UAAU,CAAC,EAClE,gBAAgB,KAAK,SAAS;gBAC5B,gCAAgC,CAAC,gBAAgB,CAAC,EACpD,cAAc,KAAK,SAAS;gBAC1B,8BAA8B,CAAC,cAAc,CAAC,EAChD,OAAO,KAAK,SAAS,IAAI,sBAAsB,CAAC,OAAO,CAAC,EACxD,UAAU,KAAK,SAAS,IAAI,0BAA0B,CAAC,UAAU,CAAC,EAClE,YAAY,KAAK,SAAS;gBACxB,4BAA4B,CAAC,YAAY,CAAC,EAC5C,aAAa,KAAK,SAAS;gBACzB,6BAA6B,CAAC,aAAa,CAAC,EAC9C,WAAW,KAAK,SAAS,IAAI,2BAA2B,CAAC,WAAW,CAAC,EACrE,iBAAiB,KAAK,SAAS;gBAC7B,iCAAiC,CAAC,iBAAiB,CAAC,EACtD,eAAe,KAAK,SAAS;gBAC3B,+BAA+B,CAAC,eAAe,CAAC,EAClD,WAAW,KAAK,SAAS,IAAI,2BAA2B,CAAC,WAAW,CAAC,EACrE,WAAW,EACX,eAAe,EACf,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport {\n  TWCLASSMAP_BOX_GAP,\n  TWCLASSMAP_BOX_MARGIN,\n  TWCLASSMAP_BOX_MARGIN_TOP,\n  TWCLASSMAP_BOX_MARGIN_RIGHT,\n  TWCLASSMAP_BOX_MARGIN_BOTTOM,\n  TWCLASSMAP_BOX_MARGIN_LEFT,\n  TWCLASSMAP_BOX_MARGIN_HORIZONTAL,\n  TWCLASSMAP_BOX_MARGIN_VERTICAL,\n  TWCLASSMAP_BOX_PADDING,\n  TWCLASSMAP_BOX_PADDING_TOP,\n  TWCLASSMAP_BOX_PADDING_RIGHT,\n  TWCLASSMAP_BOX_PADDING_BOTTOM,\n  TWCLASSMAP_BOX_PADDING_LEFT,\n  TWCLASSMAP_BOX_PADDING_HORIZONTAL,\n  TWCLASSMAP_BOX_PADDING_VERTICAL,\n  TWCLASSMAP_BOX_BORDER_WIDTH,\n} from './Box.constants';\nimport type { BoxProps } from './Box.types';\n\nexport const Box = ({\n  flexDirection,\n  flexWrap,\n  gap,\n  alignItems,\n  justifyContent,\n  margin,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  marginHorizontal,\n  marginVertical,\n  padding,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  paddingHorizontal,\n  paddingVertical,\n  borderWidth,\n  borderColor,\n  backgroundColor,\n  twClassName,\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'flex',\n          flexDirection,\n          flexWrap,\n          gap !== undefined && TWCLASSMAP_BOX_GAP[gap],\n          alignItems,\n          justifyContent,\n          margin !== undefined && TWCLASSMAP_BOX_MARGIN[margin],\n          marginTop !== undefined && TWCLASSMAP_BOX_MARGIN_TOP[marginTop],\n          marginRight !== undefined && TWCLASSMAP_BOX_MARGIN_RIGHT[marginRight],\n          marginBottom !== undefined &&\n            TWCLASSMAP_BOX_MARGIN_BOTTOM[marginBottom],\n          marginLeft !== undefined && TWCLASSMAP_BOX_MARGIN_LEFT[marginLeft],\n          marginHorizontal !== undefined &&\n            TWCLASSMAP_BOX_MARGIN_HORIZONTAL[marginHorizontal],\n          marginVertical !== undefined &&\n            TWCLASSMAP_BOX_MARGIN_VERTICAL[marginVertical],\n          padding !== undefined && TWCLASSMAP_BOX_PADDING[padding],\n          paddingTop !== undefined && TWCLASSMAP_BOX_PADDING_TOP[paddingTop],\n          paddingRight !== undefined &&\n            TWCLASSMAP_BOX_PADDING_RIGHT[paddingRight],\n          paddingBottom !== undefined &&\n            TWCLASSMAP_BOX_PADDING_BOTTOM[paddingBottom],\n          paddingLeft !== undefined && TWCLASSMAP_BOX_PADDING_LEFT[paddingLeft],\n          paddingHorizontal !== undefined &&\n            TWCLASSMAP_BOX_PADDING_HORIZONTAL[paddingHorizontal],\n          paddingVertical !== undefined &&\n            TWCLASSMAP_BOX_PADDING_VERTICAL[paddingVertical],\n          borderWidth !== undefined && TWCLASSMAP_BOX_BORDER_WIDTH[borderWidth],\n          borderColor,\n          backgroundColor,\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      {children}\n    </View>\n  );\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.cjs

@@ -34,7 +34,7 @@ const Spinner_1 = require("../temp-components/Spinner/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/TextOrChildren.cjs");
 const Text_1 = require("../Text/index.cjs");
 const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
-const ButtonBase = ({ children, textProps, size = types_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 = types_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 tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const finalStartIconName = startIconName ?? startIconProps?.name;
     const finalEndIconName = endIconName ?? endIconProps?.name;
@@ -75,53 +75,62 @@ const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isL
         return state;
     }, [isDisabled, isLoading]);
     return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole={accessibilityRole} accessibilityLabel={finalAccessibilityLabel} accessibilityHint={finalAccessibilityHint} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityState={accessibilityState} accessible style={({ pressed }) => {
-            const containerClassName = typeof twClassName === 'function'
+            // Evaluate custom className if it's a function
+            const customClassName = typeof twClassName === 'function'
                 ? twClassName(pressed)
                 : twClassName;
-            const baseContainerClassNames = `
-          flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden
-          ${ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}
-          ${isDisabled ? 'opacity-50' : 'opacity-100'}
-          ${isFullWidth ? 'w-full' : 'w-auto'}
-          ${containerClassName}
-        `;
-            const computedStyle = [
-                tw `${baseContainerClassNames}`,
-            ];
-            if (typeof style === 'function') {
-                const additionalStyle = style({ pressed });
-                if (additionalStyle) {
-                    computedStyle.push(additionalStyle);
-                }
-            }
-            else if (style) {
-                computedStyle.push(style);
+            // Build button container styles
+            const buttonStyles = tw.style(
+            // Base layout - flex container for button content
+            'flex-row items-center justify-center gap-x-2', 
+            // Visual styling
+            'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden', 
+            // Size
+            ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
+            // State-based opacity
+            isDisabled ? 'opacity-50' : 'opacity-100', 
+            // Width - use self-start to prevent stretching when not full width
+            isFullWidth ? 'w-full' : 'self-start', 
+            // Custom classes
+            customClassName);
+            // Merge with additional styles if provided
+            const computedStyle = [buttonStyles];
+            const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
+            if (additionalStyle) {
+                computedStyle.push(additionalStyle);
             }
             return computedStyle;
         }} {...props}>
       {({ pressed }) => (<>
-          <react_native_1.View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} 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>
-          <react_native_1.View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
-            {finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)}
-            <TextOrChildren_1.TextOrChildren textProps={{
-                variant: Text_1.TextVariant.BodyMd,
-                fontWeight: Text_1.FontWeight.Medium,
-                color: Text_1.TextColor.TextDefault,
-                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
-                ...textProps,
-            }}>
+          {/* 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>))}
+
+          {typeof children === 'string' ? (<TextOrChildren_1.TextOrChildren textProps={{
+                    variant: Text_1.TextVariant.BodyMd,
+                    fontWeight: Text_1.FontWeight.Medium,
+                    color: Text_1.TextColor.TextDefault,
+                    twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
+                    ...textProps,
+                }}>
               {children}
-            </TextOrChildren_1.TextOrChildren>
-            {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)}
-          </react_native_1.View>
+            </TextOrChildren_1.TextOrChildren>) : (<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>))}
         </>)}
     </ButtonAnimated_1.ButtonAnimated>);
 };

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 { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { 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        const containerClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        const baseContainerClassNames = `\n          flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden\n          ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}\n          ${isDisabled ? 'opacity-50' : 'opacity-100'}\n          ${isFullWidth ? 'w-full' : 'w-auto'}\n          ${containerClassName}\n        `;\n\n        const computedStyle: StyleProp<ViewStyle>[] = [\n          tw`${baseContainerClassNames}`,\n        ];\n        if (typeof style === 'function') {\n          const additionalStyle = style({ pressed });\n          if (additionalStyle) {\n            computedStyle.push(additionalStyle);\n          }\n        } else if (style) {\n          computedStyle.push(style);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          <View\n            style={tw`absolute inset-0 flex items-center justify-center ${\n              isLoading ? 'opacity-100' : 'opacity-0'\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          <View\n            style={tw`flex-row items-center justify-center gap-x-2 ${\n              isLoading ? 'opacity-0' : 'opacity-100'\n            }`}\n            testID=\"content-container\"\n          >\n            {finalStartIconName ? (\n              <Icon\n                name={finalStartIconName}\n                size={IconSize.Sm}\n                twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\n            {finalEndIconName ? (\n              <Icon\n                name={finalEndIconName}\n                size={IconSize.Sm}\n                twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </View>\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAuC;AACvC,wDAAoC;AAGpC,iDAA6C;AAC7C,4CAAoD;AACpD,gFAAmE;AACnE,kEAAqD;AACrD,yFAAkF;AAClF,4CAA6D;AAE7D,qEAA8E;AAGvE,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,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,+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,8CAA8C;YAC9C,iBAAiB;YACjB,uDAAuD;YACvD,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,CAAC,CAChB,EACE;UAAA,CAAC,6BAA6B,CAC9B;UAAA,CAAC,SAAS,IAAI,CACZ,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CACb,mDAAmD,CACpD,CAAC,CACF,MAAM,CAAC,mBAAmB,CAE1B;cAAA,CAAC,iBAAO,CACN,KAAK,CAAC,CACJ,aAAa;oBACX,CAAC,CAAE,aAAa,CAAC,OAAO,CAAe;oBACvC,CAAC,CAAC,gBAAS,CAAC,WAAW,CAC1B,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC;oBAChB,aAAa,EAAE,CAAC;oBAChB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;oBACxD,GAAG,YAAY,EAAE,gBAAgB;iBAClC,CAAC,CACF,IAAI,YAAY,CAAC,EAErB;YAAA,EAAE,mBAAI,CAAC,CACR,CAED;;UAAA,CAAC,oEAAoE,CACrE;UAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvG,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,IAAI,CAChB,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAC9C;gBAAA,CAAC,cAAc,CACjB;cAAA,EAAE,mBAAI,CAAC,CACR,CACF,CAED;;UAAA,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gBAAS,CAAC,WAAW;oBAC5B,WAAW,EAAE,uCAAuC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oBACjI,GAAG,SAAS;iBACb,CAAC,CAEF;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,+BAAc,CAAC,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAAC,CACnE,CAED;;UAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAClB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvG,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,IAAI,CACd,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAC9C;gBAAA,CAAC,YAAY,CACf;cAAA,EAAE,mBAAI,CAAC,CACR,CACF,CACH;QAAA,GAAG,CACJ,CACH;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1MW,QAAA,UAAU,cA0MrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { 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            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\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"]}

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":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA8JjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBAiLjB,CAAC"}

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":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA8JjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBAiLjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -15,7 +15,7 @@ import { Spinner } from "../temp-components/Spinner/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/TextOrChildren.mjs";
 import { 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 }) => {
+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 }) => {
     const tw = useTailwind();
     const finalStartIconName = startIconName ?? startIconProps?.name;
     const finalEndIconName = endIconName ?? endIconProps?.name;
@@ -56,53 +56,62 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
         return state;
     }, [isDisabled, isLoading]);
     return (<ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole={accessibilityRole} accessibilityLabel={finalAccessibilityLabel} accessibilityHint={finalAccessibilityHint} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityState={accessibilityState} accessible style={({ pressed }) => {
-            const containerClassName = typeof twClassName === 'function'
+            // Evaluate custom className if it's a function
+            const customClassName = typeof twClassName === 'function'
                 ? twClassName(pressed)
                 : twClassName;
-            const baseContainerClassNames = `
-          flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden
-          ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}
-          ${isDisabled ? 'opacity-50' : 'opacity-100'}
-          ${isFullWidth ? 'w-full' : 'w-auto'}
-          ${containerClassName}
-        `;
-            const computedStyle = [
-                tw `${baseContainerClassNames}`,
-            ];
-            if (typeof style === 'function') {
-                const additionalStyle = style({ pressed });
-                if (additionalStyle) {
-                    computedStyle.push(additionalStyle);
-                }
-            }
-            else if (style) {
-                computedStyle.push(style);
+            // Build button container styles
+            const buttonStyles = tw.style(
+            // Base layout - flex container for button content
+            'flex-row items-center justify-center gap-x-2', 
+            // Visual styling
+            'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden', 
+            // Size
+            TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size], 
+            // State-based opacity
+            isDisabled ? 'opacity-50' : 'opacity-100', 
+            // Width - use self-start to prevent stretching when not full width
+            isFullWidth ? 'w-full' : 'self-start', 
+            // Custom classes
+            customClassName);
+            // Merge with additional styles if provided
+            const computedStyle = [buttonStyles];
+            const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
+            if (additionalStyle) {
+                computedStyle.push(additionalStyle);
             }
             return computedStyle;
         }} {...props}>
       {({ pressed }) => (<>
-          <View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} testID="spinner-container">
-            <Spinner color={textClassName
-                ? textClassName(pressed)
-                : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                numberOfLines: 1,
-                twClassName: textClassName ? textClassName(pressed) : '',
-                ...spinnerProps?.loadingTextProps,
-            }} {...spinnerProps}/>
-          </View>
-          <View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
-            {finalStartIconName ? (<Icon name={finalStartIconName} size={IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)}
-            <TextOrChildren textProps={{
-                variant: TextVariant.BodyMd,
-                fontWeight: FontWeight.Medium,
-                color: TextColor.TextDefault,
-                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
-                ...textProps,
-            }}>
+          {/* 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>))}
+
+          {typeof children === 'string' ? (<TextOrChildren textProps={{
+                    variant: TextVariant.BodyMd,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextDefault,
+                    twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
+                    ...textProps,
+                }}>
               {children}
-            </TextOrChildren>
-            {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)}
-          </View>
+            </TextOrChildren>) : (<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>))}
         </>)}
     </ButtonAnimated>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AACvC,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAGpC,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACpD,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,OAAO,EAAE,6CAAmC;AACrD,OAAO,EAAE,cAAc,EAAE,6DAAyD;AAClF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,0BAAgB;AAE7D,OAAO,EAAE,oCAAoC,EAAE,mCAA+B;AAG9E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,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,WAAW,EAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,+CAA+C;IAC/C,MAAM,uBAAuB,GAAG,OAAO,CAAC,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,OAAO,CAAC,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,OAAO,CAAC,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,cAAc,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,MAAM,kBAAkB,GACtB,OAAO,WAAW,KAAK,UAAU;gBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;gBACtB,CAAC,CAAC,WAAW,CAAC;YAElB,MAAM,uBAAuB,GAAG;;YAE5B,oCAAoC,CAAC,IAAI,CAAC;YAC1C,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;YACzC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;YACjC,kBAAkB;SACrB,CAAC;YAEF,MAAM,aAAa,GAA2B;gBAC5C,EAAE,CAAA,GAAG,uBAAuB,EAAE;aAC/B,CAAC;YACF,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;gBAC/B,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC3C,IAAI,eAAe,EAAE;oBACnB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;iBACrC;aACF;iBAAM,IAAI,KAAK,EAAE;gBAChB,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC3B;YAED,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;UAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA,qDACP,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAC9B,EAAE,CAAC,CACH,MAAM,CAAC,mBAAmB,CAE1B;YAAA,CAAC,OAAO,CACN,KAAK,CAAC,CACJ,aAAa;gBACX,CAAC,CAAE,aAAa,CAAC,OAAO,CAAe;gBACvC,CAAC,CAAC,SAAS,CAAC,WAAW,CAC1B,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC;gBAChB,aAAa,EAAE,CAAC;gBAChB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;gBACxD,GAAG,YAAY,EAAE,gBAAgB;aAClC,CAAC,CACF,IAAI,YAAY,CAAC,EAErB;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAA,gDACP,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAC5B,EAAE,CAAC,CACH,MAAM,CAAC,mBAAmB,CAE1B;YAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,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,CACD;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,WAAW,EAAE,uCAAuC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACjG,GAAG,SAAS;aACb,CAAC,CAEF;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,cAAc,CAChB;YAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAClB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,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,CACH;UAAA,EAAE,IAAI,CACR;QAAA,GAAG,CACJ,CACH;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { 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        const containerClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        const baseContainerClassNames = `\n          flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden\n          ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}\n          ${isDisabled ? 'opacity-50' : 'opacity-100'}\n          ${isFullWidth ? 'w-full' : 'w-auto'}\n          ${containerClassName}\n        `;\n\n        const computedStyle: StyleProp<ViewStyle>[] = [\n          tw`${baseContainerClassNames}`,\n        ];\n        if (typeof style === 'function') {\n          const additionalStyle = style({ pressed });\n          if (additionalStyle) {\n            computedStyle.push(additionalStyle);\n          }\n        } else if (style) {\n          computedStyle.push(style);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          <View\n            style={tw`absolute inset-0 flex items-center justify-center ${\n              isLoading ? 'opacity-100' : 'opacity-0'\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          <View\n            style={tw`flex-row items-center justify-center gap-x-2 ${\n              isLoading ? 'opacity-0' : 'opacity-100'\n            }`}\n            testID=\"content-container\"\n          >\n            {finalStartIconName ? (\n              <Icon\n                name={finalStartIconName}\n                size={IconSize.Sm}\n                twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                {...startIconProps}\n              />\n            ) : (\n              startAccessory\n            )}\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\n            {finalEndIconName ? (\n              <Icon\n                name={finalEndIconName}\n                size={IconSize.Sm}\n                twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                {...endIconProps}\n              />\n            ) : (\n              endAccessory\n            )}\n          </View>\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { 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            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\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"]}

package/dist/components/ButtonIcon/ButtonIcon.cjs

@@ -30,10 +30,9 @@ const types_1 = require("../../types/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const ButtonAnimated_1 = require("../temp-components/ButtonAnimated/index.cjs");
 const ButtonIcon_constants_1 = require("./ButtonIcon.constants.cjs");
-const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName, style, ...props }) => {
     const [isPressed, setIsPressed] = (0, react_1.useState)(false);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    // Determine background color based on state
     let backgroundColor = 'bg-transparent';
     if (isFloating) {
         backgroundColor = 'bg-icon-default';
@@ -41,13 +40,6 @@ const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isD
     else if (isPressed) {
         backgroundColor = 'bg-pressed';
     }
-    const twContainerClassNames = `
-    items-center justify-center
-    ${ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
-    ${isFloating ? 'rounded-full' : 'rounded-lg'}
-    ${backgroundColor}
-    ${isDisabled ? 'opacity-50' : 'opacity-100'}
-    ${twClassName}`;
     const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
     const onPressInHandler = (event) => {
         setIsPressed(true);
@@ -57,7 +49,10 @@ const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isD
         setIsPressed(false);
         onPressOut?.(event);
     };
-    return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
+    return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible testID="button-icon" {...props} style={[
+            tw.style('items-center justify-center', ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], isFloating ? 'rounded-full' : 'rounded-lg', backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
+            style,
+        ]}>
       <Icon_1.Icon name={iconName} color={twIconColorClassNames} size={ButtonIcon_constants_1.MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>
     </ButtonAnimated_1.ButtonAnimated>);
 };

package/dist/components/ButtonIcon/ButtonIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,iDAA6C;AAE7C,4CAA+B;AAC/B,gFAAmE;AAEnE,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,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,4CAA4C;IAC5C,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GAAG;;MAE1B,2DAAoC,CAAC,IAAI,CAAC;MAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;MAC1C,eAAe;MACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;MACzC,WAAW,EAAE,CAAC;IAElB,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA/DW,QAAA,UAAU,cA+DrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  // Determine background color based on state\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twContainerClassNames = `\n    items-center justify-center\n    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}\n    ${isFloating ? 'rounded-full' : 'rounded-lg'}\n    ${backgroundColor}\n    ${isDisabled ? 'opacity-50' : 'opacity-100'}\n    ${twClassName}`;\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-icon\"\n      {...props}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,iDAA6C;AAE7C,4CAA+B;AAC/B,gFAAmE;AAEnE,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,EACX,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,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,6BAA6B,EAC7B,2DAAoC,CAAC,IAAI,CAAC,EAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC1C,eAAe,EACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAhEW,QAAA,UAAU,cAgErB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      testID=\"button-icon\"\n      {...props}\n      style={[\n        tw.style(\n          'items-center justify-center',\n          TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n          isFloating ? 'rounded-full' : 'rounded-lg',\n          backgroundColor,\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAmDjB,CAAC"}
+{"version":3,"file":"ButtonIcon.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAoDjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAmDjB,CAAC"}
+{"version":3,"file":"ButtonIcon.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAYxC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,0HAYpB,eAAe,sBAoDjB,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.mjs

@@ -11,10 +11,9 @@ import { ButtonIconSize } from "../../types/index.mjs";
 import { Icon } from "../Icon/index.mjs";
 import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
 import { MAP_BUTTONICON_SIZE_ICONSIZE, TWCLASSMAP_BUTTONICON_SIZE_DIMENSION } from "./ButtonIcon.constants.mjs";
-export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
+export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDisabled = false, isInverse = false, isFloating = false, onPressIn, onPressOut, twClassName, style, ...props }) => {
     const [isPressed, setIsPressed] = useState(false);
     const tw = useTailwind();
-    // Determine background color based on state
     let backgroundColor = 'bg-transparent';
     if (isFloating) {
         backgroundColor = 'bg-icon-default';
@@ -22,13 +21,6 @@ export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDi
     else if (isPressed) {
         backgroundColor = 'bg-pressed';
     }
-    const twContainerClassNames = `
-    items-center justify-center
-    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
-    ${isFloating ? 'rounded-full' : 'rounded-lg'}
-    ${backgroundColor}
-    ${isDisabled ? 'opacity-50' : 'opacity-100'}
-    ${twClassName}`;
     const twIconColorClassNames = isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';
     const onPressInHandler = (event) => {
         setIsPressed(true);
@@ -38,7 +30,10 @@ export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDi
         setIsPressed(false);
         onPressOut?.(event);
     };
-    return (<ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible style={[tw `${twContainerClassNames}`, style]} testID="button-icon" {...props}>
+    return (<ButtonAnimated disabled={isDisabled} onPressIn={onPressInHandler} onPressOut={onPressOutHandler} accessible testID="button-icon" {...props} style={[
+            tw.style('items-center justify-center', TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size], isFloating ? 'rounded-full' : 'rounded-lg', backgroundColor, isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
+            style,
+        ]}>
       <Icon name={iconName} color={twIconColorClassNames} size={MAP_BUTTONICON_SIZE_ICONSIZE[size]} {...iconProps}/>
     </ButtonAnimated>);
 };

package/dist/components/ButtonIcon/ButtonIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,4CAA4C;IAC5C,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GAAG;;MAE1B,oCAAoC,CAAC,IAAI,CAAC;MAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY;MAC1C,eAAe;MACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;MACzC,WAAW,EAAE,CAAC;IAElB,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName = '',\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  // Determine background color based on state\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twContainerClassNames = `\n    items-center justify-center\n    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}\n    ${isFloating ? 'rounded-full' : 'rounded-lg'}\n    ${backgroundColor}\n    ${isDisabled ? 'opacity-50' : 'opacity-100'}\n    ${twClassName}`;\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      style={[tw`${twContainerClassNames}`, style]}\n      testID=\"button-icon\"\n      {...props}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EACL,4BAA4B,EAC5B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,IAAI,eAAe,GAAG,gBAAgB,CAAC;IACvC,IAAI,UAAU,EAAE;QACd,eAAe,GAAG,iBAAiB,CAAC;KACrC;SAAM,IAAI,SAAS,EAAE;QACpB,eAAe,GAAG,YAAY,CAAC;KAChC;IAED,MAAM,qBAAqB,GACzB,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAEzE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,UAAU,CACV,MAAM,CAAC,aAAa,CACpB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,6BAA6B,EAC7B,oCAAoC,CAAC,IAAI,CAAC,EAC1C,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC1C,eAAe,EACf,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,qBAAkC,CAAC,CAC1C,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonIconSize } from '../../types';\nimport type { IconColor } from '../Icon';\nimport { Icon } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\n\nimport {\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = ({\n  size = ButtonIconSize.Md,\n  iconName,\n  iconProps,\n  isDisabled = false,\n  isInverse = false,\n  isFloating = false,\n  onPressIn,\n  onPressOut,\n  twClassName,\n  style,\n  ...props\n}: ButtonIconProps) => {\n  const [isPressed, setIsPressed] = useState(false);\n  const tw = useTailwind();\n\n  let backgroundColor = 'bg-transparent';\n  if (isFloating) {\n    backgroundColor = 'bg-icon-default';\n  } else if (isPressed) {\n    backgroundColor = 'bg-pressed';\n  }\n\n  const twIconColorClassNames =\n    isInverse || isFloating ? 'text-primary-inverse' : 'text-icon-default';\n\n  const onPressInHandler = (event: GestureResponderEvent) => {\n    setIsPressed(true);\n    onPressIn?.(event);\n  };\n\n  const onPressOutHandler = (event: GestureResponderEvent) => {\n    setIsPressed(false);\n    onPressOut?.(event);\n  };\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled}\n      onPressIn={onPressInHandler}\n      onPressOut={onPressOutHandler}\n      accessible\n      testID=\"button-icon\"\n      {...props}\n      style={[\n        tw.style(\n          'items-center justify-center',\n          TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n          isFloating ? 'rounded-full' : 'rounded-lg',\n          backgroundColor,\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Icon\n        name={iconName}\n        color={twIconColorClassNames as IconColor}\n        size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n        {...iconProps}\n      />\n    </ButtonAnimated>\n  );\n};\n"]}