npm - @metamask-previews/design-system-react-native - Versions diffs - 0.5.0-preview.0abe95c → 0.5.1-preview.5c7a24a - Mend

@metamask-previews/design-system-react-native 0.5.0-preview.0abe95c → 0.5.1-preview.5c7a24a

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 (39) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.5.1]
+### Changed
+- Updated `@metamask/utils` peer dependency from 11.8.1 to 11.9.0 ([#867](https://github.com/MetaMask/metamask-design-system/pull/867))
+### Fixed
+- Updated `ButtonIcon` component icon sizes and border radius to match Figma design specifications ([#873](https://github.com/MetaMask/metamask-design-system/pull/873))
+  - `ButtonIcon.Sm` now uses 20px icon (previously 16px)
+  - `ButtonIcon.Md` now uses 24px icon (previously 20px)
+  - `ButtonIcon.Lg` now uses 32px icon (previously 24px)
+  - Non-floating border radius corrected to 4px (previously 2px)
 ## [0.5.0]
 ### Changed
@@ -102,7 +116,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.1...HEAD
+[0.5.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.0...@metamask/design-system-react-native@0.5.1
 [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.1...@metamask/design-system-react-native@0.5.0
 [0.4.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.0...@metamask/design-system-react-native@0.4.1
 [0.4.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.3.1...@metamask/design-system-react-native@0.4.0

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

@@ -75,62 +75,53 @@ 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 }) => {
-            // Evaluate custom className if it's a function
-            const customClassName = typeof twClassName === 'function'
+            const containerClassName = typeof twClassName === 'function'
                 ? twClassName(pressed)
                 : twClassName;
-            // 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);
+            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);
             }
             return computedStyle;
         }} {...props}>
       {({ pressed }) => (<>
-          {/* Loading spinner overlay */}
-          {isLoading && (<react_native_1.View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
-              <Spinner_1.Spinner color={textClassName
-                    ? textClassName(pressed)
-                    : Icon_1.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                    numberOfLines: 1,
-                    twClassName: textClassName ? textClassName(pressed) : '',
-                    ...spinnerProps?.loadingTextProps,
-                }} {...spinnerProps}/>
-            </react_native_1.View>)}
-          {/* Button content - opacity controlled by wrapper, no extra View needed */}
-          {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>))}
-          <TextOrChildren_1.TextOrChildren textProps={{
+          <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 ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
+                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
                 ...textProps,
             }}>
-            {children}
-          </TextOrChildren_1.TextOrChildren>
-          {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>))}
+              {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>
         </>)}
     </ButtonAnimated_1.ButtonAnimated>);
 };

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

	@@ -1 +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 // 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 by wrapper, no extra View needed */}\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 <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 {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"]}
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"]}

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

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

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

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

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

@@ -56,62 +56,53 @@ 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 }) => {
-            // Evaluate custom className if it's a function
-            const customClassName = typeof twClassName === 'function'
+            const containerClassName = typeof twClassName === 'function'
                 ? twClassName(pressed)
                 : twClassName;
-            // 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);
+            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);
             }
             return computedStyle;
         }} {...props}>
       {({ pressed }) => (<>
-          {/* Loading spinner overlay */}
-          {isLoading && (<View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
-              <Spinner color={textClassName
-                    ? textClassName(pressed)
-                    : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
-                    numberOfLines: 1,
-                    twClassName: textClassName ? textClassName(pressed) : '',
-                    ...spinnerProps?.loadingTextProps,
-                }} {...spinnerProps}/>
-            </View>)}
-          {/* Button content - opacity controlled by wrapper, no extra View needed */}
-          {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>))}
-          <TextOrChildren textProps={{
+          <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 ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
+                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
                 ...textProps,
             }}>
-            {children}
-          </TextOrChildren>
-          {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>))}
+              {children}
+            </TextOrChildren>
+            {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (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-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 by wrapper, no extra View needed */}\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 <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 {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"]}
1	+ {"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 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"]}

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

@@ -44,7 +44,7 @@ const ButtonIcon = ({ size = types_1.ButtonIconSize.Md, iconName, iconProps, isD
     const twContainerClassNames = `
     items-center justify-center
     ${ButtonIcon_constants_1.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
-    ${isFloating ? 'rounded-full' : 'rounded-sm'}
+    ${isFloating ? 'rounded-full' : 'rounded-lg'}
     ${backgroundColor}
     ${isDisabled ? 'opacity-50' : 'opacity-100'}
     ${twClassName}`;

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,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-sm'}\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,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"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.cjs CHANGED Viewed

@@ -10,8 +10,8 @@ exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
     [types_1.ButtonIconSize.Lg]: 'h-10 w-10',
 };
 exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
-    [types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Sm,
-    [types_1.ButtonIconSize.Md]: Icon_1.IconSize.Md,
-    [types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Lg,
+    [types_1.ButtonIconSize.Sm]: Icon_1.IconSize.Md,
+    [types_1.ButtonIconSize.Md]: Icon_1.IconSize.Lg,
+    [types_1.ButtonIconSize.Lg]: Icon_1.IconSize.Xl,
 };
 //# sourceMappingURL=ButtonIcon.constants.cjs.map

package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAmC;AAEnC,WAAW;AACE,QAAA,oCAAoC,GAAG;IAClD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Sm,\n [ButtonIconSize.Md]: IconSize.Md,\n [ButtonIconSize.Lg]: IconSize.Lg,\n};\n"]}
1	+ {"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAC7C,4CAAmC;AAEnC,WAAW;AACE,QAAA,oCAAoC,GAAG;IAClD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}

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

@@ -7,8 +7,8 @@ export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
     [ButtonIconSize.Lg]: 'h-10 w-10',
 };
 export const MAP_BUTTONICON_SIZE_ICONSIZE = {
-    [ButtonIconSize.Sm]: IconSize.Sm,
-    [ButtonIconSize.Md]: IconSize.Md,
-    [ButtonIconSize.Lg]: IconSize.Lg,
+    [ButtonIconSize.Sm]: IconSize.Md,
+    [ButtonIconSize.Md]: IconSize.Lg,
+    [ButtonIconSize.Lg]: IconSize.Xl,
 };
 //# sourceMappingURL=ButtonIcon.constants.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Sm,\n [ButtonIconSize.Md]: IconSize.Md,\n [ButtonIconSize.Lg]: IconSize.Lg,\n};\n"]}
1	+ {"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAC7C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize } from '../../types';\nimport { IconSize } from '../Icon';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}

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

@@ -25,7 +25,7 @@ export const ButtonIcon = ({ size = ButtonIconSize.Md, iconName, iconProps, isDi
     const twContainerClassNames = `
     items-center justify-center
     ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
-    ${isFloating ? 'rounded-full' : 'rounded-sm'}
+    ${isFloating ? 'rounded-full' : 'rounded-lg'}
     ${backgroundColor}
     ${isDisabled ? 'opacity-50' : 'opacity-100'}
     ${twClassName}`;

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,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-sm'}\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,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"]}

package/dist/components/Icon/Icon.assets.cjs CHANGED Viewed

@@ -15,6 +15,7 @@ const add_card_svg_1 = __importDefault(require("./assets/add-card.svg"));
 const add_circle_svg_1 = __importDefault(require("./assets/add-circle.svg"));
 const add_square_svg_1 = __importDefault(require("./assets/add-square.svg"));
 const add_svg_1 = __importDefault(require("./assets/add.svg"));
+const after_hours_svg_1 = __importDefault(require("./assets/after-hours.svg"));
 const ai_svg_1 = __importDefault(require("./assets/ai.svg"));
 const alternate_email_svg_1 = __importDefault(require("./assets/alternate-email.svg"));
 const apple_logo_svg_1 = __importDefault(require("./assets/apple-logo.svg"));
@@ -295,6 +296,7 @@ exports.assetByIconName = {
     [types_1.IconName.AddCircle]: add_circle_svg_1.default,
     [types_1.IconName.AddSquare]: add_square_svg_1.default,
     [types_1.IconName.Add]: add_svg_1.default,
+    [types_1.IconName.AfterHours]: after_hours_svg_1.default,
     [types_1.IconName.Ai]: ai_svg_1.default,
     [types_1.IconName.AlternateEmail]: alternate_email_svg_1.default,
     [types_1.IconName.AppleLogo]: apple_logo_svg_1.default,