npm - @metamask/design-system-react-native - Versions diffs - 0.6.0 → 0.8.0 - Mend

@metamask/design-system-react-native 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/dist/components/ButtonBase/ButtonBase.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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 { 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"]}
1	+ {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+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/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"]}
1	+ {"version":3,"file":"ButtonIcon.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+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/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 CHANGED Viewed

	@@ -1 +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"}
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,sBAoDjB,CAAC"}

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

	@@ -1 +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"}
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,sBAoDjB,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,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/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"]}
1	+ {"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,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/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/Card/Card.cjs ADDED Viewed

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native/index.js");
+const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const cardStyle = [
+        tw.style('p-4 rounded border border-default bg-default', twClassName),
+        style,
+    ];
+    if (onPress) {
+        return (<react_native_1.TouchableOpacity onPress={onPress} style={cardStyle} {...touchableOpacityProps} {...props}>
+        {children}
+      </react_native_1.TouchableOpacity>);
+    }
+    return (<react_native_1.View style={cardStyle} {...props}>
+      {children}
+    </react_native_1.View>);
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAsD;AAI/C,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,+BAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,IAAI,QAiCf","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n children,\n onPress,\n twClassName,\n touchableOpacityProps,\n style,\n ...props\n}: CardProps) => {\n const tw = useTailwind();\n\n const cardStyle = [\n tw.style('p-4 rounded border border-default bg-default', twClassName),\n style,\n ];\n\n if (onPress) {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={cardStyle}\n {...touchableOpacityProps}\n {...props}\n >\n {children}\n </TouchableOpacity>\n );\n }\n\n return (\n <View style={cardStyle} {...props}>\n {children}\n </View>\n );\n};\n"]}

package/dist/components/Card/Card.d.cts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CardProps } from "./Card.types.cjs";
+export declare const Card: ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }: CardProps) => React.JSX.Element;
+//# sourceMappingURL=Card.d.cts.map

package/dist/components/Card/Card.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Card.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,+EAOd,SAAS,sBA0BX,CAAC"}

package/dist/components/Card/Card.d.mts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CardProps } from "./Card.types.mjs";
+export declare const Card: ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }: CardProps) => React.JSX.Element;
+//# sourceMappingURL=Card.d.mts.map

package/dist/components/Card/Card.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Card.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAE9C,eAAO,MAAM,IAAI,+EAOd,SAAS,sBA0BX,CAAC"}

package/dist/components/Card/Card.mjs ADDED Viewed

@@ -0,0 +1,26 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { TouchableOpacity, View } from "react-native/index.js";
+export const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }) => {
+    const tw = useTailwind();
+    const cardStyle = [
+        tw.style('p-4 rounded border border-default bg-default', twClassName),
+        style,
+    ];
+    if (onPress) {
+        return (<TouchableOpacity onPress={onPress} style={cardStyle} {...touchableOpacityProps} {...props}>
+        {children}
+      </TouchableOpacity>);
+    }
+    return (<View style={cardStyle} {...props}>
+      {children}
+    </View>);
+};
+//# sourceMappingURL=Card.mjs.map

package/dist/components/Card/Card.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAAqB;AAItD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n children,\n onPress,\n twClassName,\n touchableOpacityProps,\n style,\n ...props\n}: CardProps) => {\n const tw = useTailwind();\n\n const cardStyle = [\n tw.style('p-4 rounded border border-default bg-default', twClassName),\n style,\n ];\n\n if (onPress) {\n return (\n <TouchableOpacity\n onPress={onPress}\n style={cardStyle}\n {...touchableOpacityProps}\n {...props}\n >\n {children}\n </TouchableOpacity>\n );\n }\n\n return (\n <View style={cardStyle} {...props}>\n {children}\n </View>\n );\n};\n"]}

package/dist/components/Card/Card.types.cjs ADDED Viewed

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

package/dist/components/Card/Card.types.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.types.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n /**\n * Content to display inside the card.\n */\n children: ReactNode;\n /**\n * Optional callback when the card is pressed.\n * When provided, the card wraps content in a TouchableOpacity.\n */\n onPress?: () => void;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n */\n touchableOpacityProps?: Omit<\n TouchableOpacityProps,\n 'onPress' | 'style' | 'children'\n >;\n} & ViewProps;\n"]}

package/dist/components/Card/Card.types.d.cts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+/**
+ * Card component props.
+ */
+export type CardProps = {
+    /**
+     * Content to display inside the card.
+     */
+    children: ReactNode;
+    /**
+     * Optional callback when the card is pressed.
+     * When provided, the card wraps content in a TouchableOpacity.
+     */
+    onPress?: () => void;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
+     */
+    touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
+} & ViewProps;
+//# sourceMappingURL=Card.types.d.cts.map

package/dist/components/Card/Card.types.d.cts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.types.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}

package/dist/components/Card/Card.types.d.mts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+/**
+ * Card component props.
+ */
+export type CardProps = {
+    /**
+     * Content to display inside the card.
+     */
+    children: ReactNode;
+    /**
+     * Optional callback when the card is pressed.
+     * When provided, the card wraps content in a TouchableOpacity.
+     */
+    onPress?: () => void;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
+     */
+    touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
+} & ViewProps;
+//# sourceMappingURL=Card.types.d.mts.map

package/dist/components/Card/Card.types.d.mts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.types.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}

package/dist/components/Card/Card.types.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=Card.types.mjs.map

package/dist/components/Card/Card.types.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Card.types.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n /**\n * Content to display inside the card.\n */\n children: ReactNode;\n /**\n * Optional callback when the card is pressed.\n * When provided, the card wraps content in a TouchableOpacity.\n */\n onPress?: () => void;\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n /**\n * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n */\n touchableOpacityProps?: Omit<\n TouchableOpacityProps,\n 'onPress' | 'style' | 'children'\n >;\n} & ViewProps;\n"]}

package/dist/components/Card/index.cjs ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+var Card_1 = require("./Card.cjs");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Card/index.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":";;;AAAA,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { Card } from './Card';\nexport type { CardProps } from './Card.types';\n"]}

package/dist/components/Card/index.d.cts ADDED Viewed

@@ -0,0 +1,3 @@
+export { Card } from "./Card.cjs";
+export type { CardProps } from "./Card.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Card/index.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/Card/index.d.mts ADDED Viewed

@@ -0,0 +1,3 @@
+export { Card } from "./Card.mjs";
+export type { CardProps } from "./Card.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Card/index.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/Card/index.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Card } from "./Card.mjs";
2	+ //# sourceMappingURL=index.mjs.map

package/dist/components/Card/index.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { Card } from './Card';\nexport type { CardProps } from './Card.types';\n"]}

package/dist/components/Checkbox/Checkbox.cjs CHANGED Viewed

@@ -30,7 +30,7 @@ const react_native_1 = require("react-native/index.js");
 const Icon_1 = require("../Icon/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
 const AnimatedView = react_native_1.Animated.View;
-exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, isInvalid = false, label = '', labelProps, onChange, checkboxContainerProps, checkedIconProps, twClassName = '', style, ...props }, ref) => {
+exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, isInvalid = false, label = '', labelProps, onChange, checkboxContainerProps, checkedIconProps, twClassName, style, ...props }, ref) => {
     // Animation values
     const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const iconAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isSelected ? 1 : 0)).current;
@@ -70,7 +70,7 @@ exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, is
     };
     (0, react_1.useImperativeHandle)(ref, () => ({ toggle: handlePress }), [handlePress]);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = tw `flex-row items-center ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`;
+    const twContainerClassNames = tw.style('flex-row items-center', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
     const getCheckboxContainerStyle = (0, react_1.useCallback)((pressed) => {
         const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';
         let baseBorder = 'border-default';
@@ -97,10 +97,10 @@ exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, is
     return (<react_native_1.Pressable onPress={handlePress} accessible accessibilityRole="checkbox" accessibilityState={{
             checked: isSelected,
             disabled: isDisabled,
-        }} accessibilityLabel={typeof label === 'string' ? label : undefined} style={(state) => [
+        }} accessibilityLabel={typeof label === 'string' ? label : undefined} disabled={isDisabled} {...props} style={(state) => [
             twContainerClassNames,
             typeof style === 'function' ? style(state) : style,
-        ]} disabled={isDisabled} {...props}>
+        ]}>
         {({ pressed }) => (<>
             <AnimatedView {...checkboxContainerProps} style={[
                 tw `${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,

package/dist/components/Checkbox/Checkbox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+CAMe;AAEf,wDAA2D;AAE3D,4CAA8D;AAC9D,gFAAmE;AAInE,MAAM,YAAY,GAAG,uBAAQ,CAAC,IAAI,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EACE,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,UAAU,EACV,QAAQ,EACR,sBAAsB,EACtB,gBAAgB,EAChB,WAAW,~~GAAG~~,~~EAAE,EAChB,~~KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,mBAAmB;IACnB,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAExE,+CAA+C;IAC/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,uBAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,qBAAM,CAAC,IAAI;YACnB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,8BAA8B;IAC9B,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACpC,uBAAQ,CAAC,QAAQ,CAAC;YAChB,uBAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,qBAAM,CAAC,IAAI;gBACnB,eAAe,EAAE,IAAI;aACtB,CAAC;YACF,uBAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,qBAAM,CAAC,IAAI;gBACnB,eAAe,EAAE,IAAI;aACtB,CAAC;SACH,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,4CAA4C;IAC5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;QACxB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,EAAE,~~CAAA~~,~~yBAC9B~~,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,~~aAC9B~~,~~IAAI~~,WAAW,~~EAAE~~,CAAC;~~IAElB~~,MAAM,yBAAyB,GAAG,IAAA,mBAAW,EAC3C,CAAC,OAAgB,EAAU,EAAE;QAC3B,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC;QAChE,IAAI,UAAU,GAAG,gBAAgB,CAAC;QAClC,IAAI,UAAU,EAAE;YACd,UAAU,GAAG,wBAAwB,CAAC;SACvC;aAAM,IAAI,SAAS,EAAE;YACpB,UAAU,GAAG,sBAAsB,CAAC;SACrC;QACD,MAAM,SAAS,GAAG,UAAU;YAC1B,CAAC,CAAC,4BAA4B;YAC9B,CAAC,CAAC,oBAAoB,CAAC;QACzB,IAAI,aAAa,GAAG,gBAAgB,CAAC;QACrC,IAAI,UAAU,EAAE;YACd,aAAa,GAAG,gCAAgC,CAAC;SAClD;aAAM,IAAI,SAAS,EAAE;YACpB,aAAa,GAAG,sBAAsB,CAAC;SACxC;QACD,OAAO,OAAO;YACZ,CAAC,CAAC,GAAG,SAAS,IAAI,aAAa,EAAE;YACjC,CAAC,CAAC,GAAG,MAAM,IAAI,UAAU,EAAE,CAAC;IAChC,CAAC,EACD,CAAC,UAAU,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,CAAC,wBAAS,CACR,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,UAAU,CACV,iBAAiB,CAAC,UAAU,CAC5B,kBAAkB,CAAC,CAAC;YAClB,OAAO,EAAE,UAAU;YACnB,QAAQ,EAAE,UAAU;SACrB,CAAC,CACF,kBAAkB,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,KAAK,CAAC,CAAC,CAAC,KAAiC,EAAE,EAAE,CAAC;YAC5C,qBAAqB;YACrB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;SACnD,CAAC,~~CACF,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,IAAI,KAAK,CAAC,CAEV~~;QAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;YAAA,CAAC,YAAY,CACX,IAAI,sBAAsB,CAAC,CAC3B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAA,GAAG,yBAAyB,CAAC,OAAO,CAAC,gEAAgE;gBACvG,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE;aACtC,CAAC,CAEF;cAAA,CAAC,oDAAoD,CACrD;cAAA,CAAC,uBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAC1C;gBAAA,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACrB,KAAK,CAAC,CAAC,gBAAS,CAAC,cAAc,CAAC,CAChC,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,gBAAgB,CAAC,EAEzB;cAAA,EAAE,uBAAQ,CAAC,IAAI,CACjB;YAAA,EAAE,YAAY,CACd;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC,EAAE,GAAG,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAElD;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,+BAAc,CAAC,CAClB,CAAC,CAAC,CAAC,IAAI,CACV;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useRef,\n useImperativeHandle,\n useCallback,\n useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label = '',\n labelProps,\n onChange,\n checkboxContainerProps,\n checkedIconProps,\n twClassName ~~= ''~~,\n style,\n ...props\n },\n ref,\n ) => {\n // Animation values\n const scaleAnim = useRef(new Animated.Value(1)).current;\n const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n // Sync icon opacity whenever selection changes\n useEffect(() => {\n Animated.timing(iconAnim, {\n toValue: isSelected ? 1 : 0,\n duration: 300,\n easing: Easing.ease,\n useNativeDriver: true,\n }).start();\n }, [isSelected, iconAnim]);\n\n // Bounce effect when toggling\n const animateScale = useCallback(() => {\n Animated.sequence([\n Animated.timing(scaleAnim, {\n toValue: 1.15,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n Animated.timing(scaleAnim, {\n toValue: 1,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n ]).start();\n }, [scaleAnim]);\n\n // Press handler: notify parent, then bounce\n const handlePress = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n animateScale();\n };\n\n useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n const tw = useTailwind();\n const twContainerClassNames = tw`flex-row items-center ~~${\~~n isDisabled ? 'opacity-50' : 'opacity-100'\n ~~} ${~~twClassName~~}`;\~~n\n const getCheckboxContainerStyle = useCallback(\n (pressed: boolean): string => {\n const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-primary-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n const pressedBg = isSelected\n ? 'bg-primary-default-pressed'\n : 'bg-default-pressed';\n let pressedBorder = 'border-default';\n if (isSelected) {\n pressedBorder = 'border-primary-default-pressed';\n } else if (isInvalid) {\n pressedBorder = 'border-error-default';\n }\n return pressed\n ? `${pressedBg} ${pressedBorder}`\n : `${baseBg} ${baseBorder}`;\n },\n [isSelected, isInvalid],\n );\n\n return (\n <Pressable\n onPress={handlePress}\n accessible\n accessibilityRole=\"checkbox\"\n accessibilityState={{\n checked: isSelected,\n disabled: isDisabled,\n }}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n style={(state: PressableStateCallbackType) => [\n twContainerClassNames,\n typeof style === 'function' ? style(state) : style,\n ]}\n ~~disabled={isDisabled}\n {...props}\n~~ >\n {({ pressed }) => (\n <>\n <AnimatedView\n {...checkboxContainerProps}\n style={[\n tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n { transform: [{ scale: scaleAnim }] },\n ]}\n >\n {/* Always render icon, opacity driven by iconAnim */}\n <Animated.View style={{ opacity: iconAnim }}>\n <Icon\n name={IconName.Check}\n color={IconColor.PrimaryInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n />\n </Animated.View>\n </AnimatedView>\n {label ? (\n <TextOrChildren\n textProps={{ ...labelProps, twClassName: 'ml-3' }}\n >\n {label}\n </TextOrChildren>\n ) : null}\n </>\n )}\n </Pressable>\n );\n },\n);\n"]}
1	+ {"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useRef,\n useImperativeHandle,\n useCallback,\n useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label = '',\n labelProps,\n onChange,\n checkboxContainerProps,\n checkedIconProps,\n twClassName,\n style,\n ...props\n },\n ref,\n ) => {\n // Animation values\n const scaleAnim = useRef(new Animated.Value(1)).current;\n const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n // Sync icon opacity whenever selection changes\n useEffect(() => {\n Animated.timing(iconAnim, {\n toValue: isSelected ? 1 : 0,\n duration: 300,\n easing: Easing.ease,\n useNativeDriver: true,\n }).start();\n }, [isSelected, iconAnim]);\n\n // Bounce effect when toggling\n const animateScale = useCallback(() => {\n Animated.sequence([\n Animated.timing(scaleAnim, {\n toValue: 1.15,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n Animated.timing(scaleAnim, {\n toValue: 1,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n ]).start();\n }, [scaleAnim]);\n\n // Press handler: notify parent, then bounce\n const handlePress = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n animateScale();\n };\n\n useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n const tw = useTailwind();\n const twContainerClassNames = tw.style(\n 'flex-row items-center',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n );\n\n const getCheckboxContainerStyle = useCallback(\n (pressed: boolean): string => {\n const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n let baseBorder = 'border-default';\n if (isSelected) {\n baseBorder = 'border-primary-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n const pressedBg = isSelected\n ? 'bg-primary-default-pressed'\n : 'bg-default-pressed';\n let pressedBorder = 'border-default';\n if (isSelected) {\n pressedBorder = 'border-primary-default-pressed';\n } else if (isInvalid) {\n pressedBorder = 'border-error-default';\n }\n return pressed\n ? `${pressedBg} ${pressedBorder}`\n : `${baseBg} ${baseBorder}`;\n },\n [isSelected, isInvalid],\n );\n\n return (\n <Pressable\n onPress={handlePress}\n accessible\n accessibilityRole=\"checkbox\"\n accessibilityState={{\n checked: isSelected,\n disabled: isDisabled,\n }}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n disabled={isDisabled}\n {...props}\n style={(state: PressableStateCallbackType) => [\n twContainerClassNames,\n typeof style === 'function' ? style(state) : style,\n ]}\n >\n {({ pressed }) => (\n <>\n <AnimatedView\n {...checkboxContainerProps}\n style={[\n tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n { transform: [{ scale: scaleAnim }] },\n ]}\n >\n {/* Always render icon, opacity driven by iconAnim */}\n <Animated.View style={{ opacity: iconAnim }}>\n <Icon\n name={IconName.Check}\n color={IconColor.PrimaryInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n />\n </Animated.View>\n </AnimatedView>\n {label ? (\n <TextOrChildren\n textProps={{ ...labelProps, twClassName: 'ml-3' }}\n >\n {label}\n </TextOrChildren>\n ) : null}\n </>\n )}\n </Pressable>\n );\n },\n);\n"]}

package/dist/components/Checkbox/Checkbox.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,8BAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;YAAwB,MAAM,IAAI;~~GA0ItD~~,CAAC"}
1	+ {"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,8BAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}