@metamask-previews/design-system-react-native 0.28.0-preview.1f40f69f → 0.30.2-preview.25db973

package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : darkTheme.shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            runOnJS(onCloseCB)();\n            if (callback) {\n              runOnJS(callback)();\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            runOnJS(onCloseDialog)();\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          runOnJS(onOpenCB)();\n          if (callback) {\n            runOnJS(callback)();\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          'bg-default rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}
+{"version":3,"file":"BottomSheetDialog.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : darkTheme.shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            runOnJS(onCloseCB)();\n            if (callback) {\n              runOnJS(callback)();\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            runOnJS(onCloseDialog)();\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          runOnJS(onOpenCB)();\n          if (callback) {\n            runOnJS(callback)();\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          'bg-default rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAON,cAAc;AAyBf,OAAO,KAAK,EACV,oBAAoB,EAErB,sCAAkC;AAEnC,eAAO,MAAM,iBAAiB;;;;;;;;iFAqQ7B,CAAC"}
+{"version":3,"file":"BottomSheetDialog.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAON,cAAc;AAyBf,OAAO,KAAK,EACV,oBAAoB,EAErB,sCAAkC;AAEnC,eAAO,MAAM,iBAAiB;;;;;;;;iFAkR7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAON,cAAc;AAyBf,OAAO,KAAK,EACV,oBAAoB,EAErB,sCAAkC;AAEnC,eAAO,MAAM,iBAAiB;;;;;;;;iFAqQ7B,CAAC"}
+{"version":3,"file":"BottomSheetDialog.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,KAON,cAAc;AAyBf,OAAO,KAAK,EACV,oBAAoB,EAErB,sCAAkC;AAEnC,eAAO,MAAM,iBAAiB;;;;;;;;iFAkR7B,CAAC"}

package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs

@@ -48,13 +48,22 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
         // Ref values do not affect deps.
     }, [onCloseCB]);
     const gestureHandler = useMemo(() => {
+        // These gesture callbacks need explicit 'worklet' directives because this
+        // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the
+        // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).
+        // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's
+        // why useAnimatedStyle below works), but its gesture auto-detection doesn't
+        // recognize that compiled namespaced form, so without these directives the
+        // callbacks run on the JS thread and slow drags lag behind the finger.
         const gesture = Gesture.Pan()
             .enabled(isInteractable)
             .onStart(() => {
+            'worklet';
             // Starts tracking vertical position of gesture.
             gestureStartYOffset.value = currentYOffset.value;
         })
             .onUpdate((event) => {
+            'worklet';
             const { translationY } = event;
             currentYOffset.value = gestureStartYOffset.value + translationY;
             // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),
@@ -71,6 +80,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
             }
         })
             .onEnd((event) => {
+            'worklet';
             const { translationY, velocityY } = event;
             // finalYOffset is used to animate the Y position of the Dialog after the gesture event
             let finalYOffset;

package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : darkTheme.shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            runOnJS(onCloseCB)();\n            if (callback) {\n              runOnJS(callback)();\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            runOnJS(onCloseDialog)();\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          runOnJS(onOpenCB)();\n          if (callback) {\n            runOnJS(callback)();\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          'bg-default rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}
+{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACT,sDAAsD;AACvD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,yCAAyC;;;AAEzE,OAAO,QAAO,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,mBAAmB,EACpB,cAAc;;AACf,OAAO,EAEL,IAAI,EACJ,QAAQ,EACR,oBAAoB,EACrB,qBAAqB;AACtB,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,qCAAqC;AACxE,OAAO,QAAQ,EAAE,EACf,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,UAAU,EACX,gCAAgC;AACjC,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EAClB,uCAAuC;AAExC,yBAAyB;AACzB,OAAO,EACL,0CAA0C,EAC1C,0CAA0C,EAC1C,iDAAiD,EAClD,0CAAsC;AAMvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAIzC,CACE,EACE,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,IAAI,EACrB,2BAA2B,GAAG,IAAI,EAClC,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAChC,MAAM,QAAQ,GACZ,YAAY,KAAK,KAAK,CAAC,KAAK;QAC1B,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC5B,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;IAEhC,MAAM,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAC1D,iBAAiB,EAAE,CAAC;IACtB,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE/D,MAAM,cAAc,GAAG,YAAY,GAAG,gBAAgB,CAAC;IACvD,iDAAiD;IACjD,sEAAsE;IACtE,MAAM,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,oBAAoB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,QAAqB,EAAE,EAAE;QACxB,cAAc,CAAC,KAAK,GAAG,UAAU,CAC/B,oBAAoB,CAAC,KAAK,EAC1B,EAAE,QAAQ,EAAE,0CAA0C,EAAE,EACxD,GAAG,EAAE;YACH,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YACrB,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;aACrB;QACH,CAAC,CACF,CAAC;QACF,iCAAiC;IACnC,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,0EAA0E;QAC1E,8EAA8E;QAC9E,+EAA+E;QAC/E,6EAA6E;QAC7E,4EAA4E;QAC5E,2EAA2E;QAC3E,uEAAuE;QACvE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;aAC1B,OAAO,CAAC,cAAc,CAAC;aACvB,OAAO,CAAC,GAAG,EAAE;YACZ,SAAS,CAAC;YAEV,gDAAgD;YAChD,mBAAmB,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;QACnD,CAAC,CAAC;aACD,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;YAClB,SAAS,CAAC;YAEV,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;YAC/B,cAAc,CAAC,KAAK,GAAG,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAAC;YAChE,gFAAgF;YAChF,uEAAuE;YACvE,sCAAsC;YACtC,IAAI,cAAc,CAAC,KAAK,IAAI,oBAAoB,CAAC,KAAK,EAAE;gBACtD,cAAc,CAAC,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC;aACnD;YACD,0EAA0E;YAC1E,oEAAoE;YACpE,mCAAmC;YACnC,IAAI,cAAc,CAAC,KAAK,IAAI,iBAAiB,CAAC,KAAK,EAAE;gBACnD,cAAc,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC;aAChD;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,SAAS,CAAC;YAEV,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;YAC1C,uFAAuF;YACvF,IAAI,YAAoB,CAAC;YACzB,oCAAoC;YACpC,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,GAAG,YAAY,CAAC;YAC9D,kEAAkE;YAClE,yCAAyC;YACzC,MAAM,uBAAuB,GAC3B,YAAY;gBACZ,oBAAoB,CAAC,KAAK;oBACxB,0CAA0C,CAAC;YAC/C,8FAA8F;YAC9F,MAAM,wBAAwB,GAC5B,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;gBACnB,iDAAiD,CAAC;YACpD,MAAM,iBAAiB,GAAG,SAAS,GAAG,CAAC,CAAC;YAExC,qBAAqB;YACrB,IAAI,wBAAwB,EAAE;gBAC5B,6BAA6B;gBAC7B,IAAI,iBAAiB,EAAE;oBACrB,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC;iBAC3C;qBAAM;oBACL,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC;iBACxC;aACF;iBAAM,IAAI,uBAAuB,EAAE;gBAClC,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC;aAC3C;iBAAM;gBACL,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC;aACxC;YAED,MAAM,WAAW,GAAG,YAAY,KAAK,oBAAoB,CAAC,KAAK,CAAC;YAEhE,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC;aAC1B;iBAAM;gBACL,sDAAsD;gBACtD,cAAc,CAAC,KAAK,GAAG,UAAU,CAAC,YAAY,EAAE;oBAC9C,QAAQ,EAAE,0CAA0C;iBACrD,CAAC,CAAC;aACJ;QACH,CAAC,CAAC,CAAC;QAEL,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE;QACD,cAAc;QACd,cAAc;QACd,mBAAmB;QACnB,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;KACd,CAAC,CAAC;IAEH,sCAAsC;IACtC,MAAM,YAAY,GAAG,CAAC,QAAqB,EAAE,EAAE;QAC7C,0EAA0E;QAC1E,cAAc,CAAC,KAAK,GAAG,oBAAoB,CAAC,KAAK,CAAC;QAClD,sEAAsE;QACtE,cAAc,CAAC,KAAK,GAAG,UAAU,CAC/B,iBAAiB,CAAC,KAAK,EACvB;YACE,QAAQ,EAAE,0CAA0C;SACrD,EACD,GAAG,EAAE;YACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpB,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;aACrB;QACH,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,OAAO;IACpC,iGAAiG;IACjG,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EACtD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,SAAS,CACP,GAAG,EAAE;IACH,uDAAuD;IACvD,iFAAiF;IACjF,wEAAwE;IACxE,sBAAsB,CAAC,MAAM,EAAE,EACjC,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CACnC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAoB,EAAE,EAAE;QACjD,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;QACxC,oBAAoB,CAAC,KAAK,GAAG,MAAM,CAAC;QAEpC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACtB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,YAAY,EAAE,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE;YACT;gBACE,UAAU,EAAE,cAAc,CAAC,KAAK;aACjC;SACF;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC;QACJ,EAAE,CAAC,KAAK,CACN,8DAA8D,EAC9D,WAAW,CACZ;QACD;YACE,SAAS,EAAE,cAAc;YACzB,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC;gBAC7B,GAAG,EAAE,mBAAmB;gBACxB,KAAK,EAAE,mBAAmB;gBAC1B,OAAO,EAAE,mBAAmB,GAAG,EAAE;aAClC,CAAC;YACF,GAAG,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;YAC/C,GAAG,QAAQ;SACZ;QACD,KAAK;KACN,EAED;QACE,EAAE;QACF,cAAc;QACd,mBAAmB;QACnB,YAAY;QACZ,QAAQ;QACR,KAAK;QACL,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC,GAAG,UAAU,EAAE,kBAAkB,CAAC,EAEzC,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,YAAY;QACZ,aAAa;KACd,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC,CAC/C,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxD,sBAAsB,CAAC,CACrB,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CACtD,CACD,OAAO,CAAC,CAAC,2BAA2B,CAAC,CACrC,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CACvC;UAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAC5B,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAE1B;YAAA,CAAC,cAAc,IAAI,CACjB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CACrD;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC,EAC/D;cAAA,EAAE,IAAI,CAAC,CACR,CACD;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,oBAAoB,CAAC,CACxB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : darkTheme.shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            runOnJS(onCloseCB)();\n            if (callback) {\n              runOnJS(callback)();\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            runOnJS(onCloseDialog)();\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          runOnJS(onOpenCB)();\n          if (callback) {\n            runOnJS(callback)();\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          'bg-default rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}

package/dist/components/ButtonBase/ButtonBase.cjs

@@ -112,7 +112,7 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
             const { twClassName: contentWrapperTw, ...restContentWrapper } = contentWrapperProps ?? {};
             return (<>
             {/* Loading spinner overlay */}
-            {isLoading && (<Box_1.Box {...restLoadingWrapper} twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}>
+            {isLoading && (<Box_1.Box {...restLoadingWrapper} twClassName={(0, design_system_shared_1.mergeTwClassName)('absolute inset-0 flex items-center justify-center', loadingWrapperTw)}>
                 <Spinner_1.Spinner color={textClassName
                         ? textClassName(pressed)
                         : Icon_1.IconColor.IconDefault} loadingText={loadingText} {...spinnerProps} spinnerIconProps={{
@@ -126,14 +126,16 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
                     }}/>
               </Box_1.Box>)}
 
-            <BoxRow_1.BoxRow {...restContentWrapper} twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)} textProps={{
+            <BoxRow_1.BoxRow {...restContentWrapper} twClassName={isLoading
+                    ? (0, design_system_shared_1.mergeTwClassName)('opacity-0', contentWrapperTw)
+                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={iconSize} twClassName={(0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={iconSize} twClassName={(0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...endIconProps}/>) : (endAccessory)} textProps={{
                     variant: labelTextVariant,
                     fontWeight: design_system_shared_1.FontWeight.Medium,
                     color: design_system_shared_1.TextColor.TextDefault,
                     numberOfLines: 1,
                     ellipsizeMode: 'clip',
                     ...textProps,
-                    twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,
+                    twClassName: (0, design_system_shared_1.mergeTwClassName)((0, design_system_shared_1.mergeTwClassName)('shrink grow-0 flex-wrap text-center', textClassName ? textClassName(pressed) : undefined), textProps?.twClassName),
                 }}>
               {children}
             </BoxRow_1.BoxRow>

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`}\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}

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

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

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

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

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize, FontWeight, TextColor } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, FontWeight, mergeTwClassName, TextColor } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useMemo } from "react";
 const React = $importDefault($React);
@@ -93,7 +93,7 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
             const { twClassName: contentWrapperTw, ...restContentWrapper } = contentWrapperProps ?? {};
             return (<>
             {/* Loading spinner overlay */}
-            {isLoading && (<Box {...restLoadingWrapper} twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}>
+            {isLoading && (<Box {...restLoadingWrapper} twClassName={mergeTwClassName('absolute inset-0 flex items-center justify-center', loadingWrapperTw)}>
                 <Spinner color={textClassName
                         ? textClassName(pressed)
                         : IconColor.IconDefault} loadingText={loadingText} {...spinnerProps} spinnerIconProps={{
@@ -107,14 +107,16 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
                     }}/>
               </Box>)}
 
-            <BoxRow {...restContentWrapper} twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)} textProps={{
+            <BoxRow {...restContentWrapper} twClassName={isLoading
+                    ? mergeTwClassName('opacity-0', contentWrapperTw)
+                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} twClassName={mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} twClassName={mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...endIconProps}/>) : (endAccessory)} textProps={{
                     variant: labelTextVariant,
                     fontWeight: FontWeight.Medium,
                     color: TextColor.TextDefault,
                     numberOfLines: 1,
                     ellipsizeMode: 'clip',
                     ...textProps,
-                    twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,
+                    twClassName: mergeTwClassName(mergeTwClassName('shrink grow-0 flex-wrap text-center', textClassName ? textClassName(pressed) : undefined), textProps?.twClassName),
                 }}>
               {children}
             </BoxRow>

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={`absolute inset-0 flex items-center justify-center ${loadingWrapperTw ?? ''}`}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={`${contentWrapperTw ?? ''} ${isLoading ? 'opacity-0' : ''}`}\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`,\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}

package/dist/components/Content/Content.cjs

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
 const BoxColumn_1 = require("../BoxColumn/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
 const Content_constants_1 = require("./Content.constants.cjs");
-const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
-    const contentRow = (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={(0, design_system_shared_1.mergeTwClassName)('min-h-[46px]', twClassName)} {...props}>
       {avatar}
       {/* Title and description Column */}
       <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
@@ -37,7 +37,7 @@ const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory,
           </BoxRow_1.BoxRow>) : null}
       </BoxColumn_1.BoxColumn>
       {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn_1.BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+      {value || subvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
                 <TextOrChildren_1.TextOrChildren textProps={{
                     variant: design_system_shared_1.TextVariant.BodySm,
                     fontWeight: design_system_shared_1.FontWeight.Medium,
@@ -47,7 +47,7 @@ const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory,
                   {subvalue}
                 </TextOrChildren_1.TextOrChildren>
               </BoxRow_1.BoxRow>) : null}>
-          {value ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+          {value ? (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren_1.TextOrChildren textProps={{
                     variant: design_system_shared_1.TextVariant.BodyMd,
                     fontWeight: design_system_shared_1.FontWeight.Medium,
@@ -58,13 +58,7 @@ const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory,
               </TextOrChildren_1.TextOrChildren>
             </BoxRow_1.BoxRow>) : null}
         </BoxColumn_1.BoxColumn>) : null}
-    </BoxRow_1.BoxRow>);
-    if (hasColumnShell) {
-        return (<BoxColumn_1.BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
-        {contentRow}
-      </BoxColumn_1.BoxColumn>);
-    }
-    return contentRow;
+    </Box_1.Box>);
 };
 exports.Content = Content;
 exports.Content.displayName = 'Content';

package/dist/components/Content/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ContentVerticalAlignment,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  startAccessory,\n  endAccessory,\n  topAccessory,\n  bottomAccessory,\n  verticalAlignment = ContentVerticalAlignment.Center,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);\n\n  const contentRow = (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()}\n      {...(hasColumnShell ? {} : props)}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodySm,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextAlternative,\n                  ...descriptionProps,\n                }}\n              >\n                {description}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {/* Value and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                twClassName=\"w-full\"\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...subvalueProps,\n                  }}\n                >\n                  {subvalue}\n                </TextOrChildren>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </BoxRow>\n  );\n\n  if (hasColumnShell) {\n    return (\n      <BoxColumn\n        gap={1}\n        topAccessory={topAccessory}\n        bottomAccessory={bottomAccessory}\n        twClassName={twClassName}\n        {...props}\n      >\n        {contentRow}\n      </BoxColumn>\n    );\n  }\n\n  return contentRow;\n};\n\nContent.displayName = 'Content';\n"]}
+{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  ContentVerticalAlignment,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  verticalAlignment = ContentVerticalAlignment.Center,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n      {...props}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodySm,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextAlternative,\n                  ...descriptionProps,\n                }}\n              >\n                {description}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {/* Value and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...subvalueProps,\n                  }}\n                >\n                  {subvalue}\n                </TextOrChildren>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </Box>\n  );\n};\n\nContent.displayName = 'Content';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}
+{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}
+{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}

package/dist/components/Content/Content.mjs

@@ -4,16 +4,16 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ContentVerticalAlignment, FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
 import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
-export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
-    const contentRow = (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={mergeTwClassName('min-h-[46px]', twClassName)} {...props}>
       {avatar}
       {/* Title and description Column */}
       <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
@@ -38,7 +38,7 @@ export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAcce
           </BoxRow>) : null}
       </BoxColumn>
       {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+      {value || subvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
                 <TextOrChildren textProps={{
                     variant: TextVariant.BodySm,
                     fontWeight: FontWeight.Medium,
@@ -48,7 +48,7 @@ export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAcce
                   {subvalue}
                 </TextOrChildren>
               </BoxRow>) : null}>
-          {value ? (<BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+          {value ? (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren textProps={{
                     variant: TextVariant.BodyMd,
                     fontWeight: FontWeight.Medium,
@@ -59,13 +59,7 @@ export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAcce
               </TextOrChildren>
             </BoxRow>) : null}
         </BoxColumn>) : null}
-    </BoxRow>);
-    if (hasColumnShell) {
-        return (<BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
-        {contentRow}
-      </BoxColumn>);
-    }
-    return contentRow;
+    </Box>);
 };
 Content.displayName = 'Content';
 //# sourceMappingURL=Content.mjs.map