npm - @metamask-previews/design-system-react-native - Versions diffs - 0.30.2-preview.f77a5d5 → 0.32.0-preview.cf8aa2e4 - Mend

@metamask-previews/design-system-react-native 0.30.2-preview.f77a5d5 → 0.32.0-preview.cf8aa2e4

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

Files changed (97) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.32.0]
+### Added
+- Added `HardDrive` to `IconName` ([#1302](https://github.com/MetaMask/metamask-design-system/pull/1302))
+## [0.31.0]
+### Added
+- Added `children` prop to `SectionHeader` for supporting content below the title row ([#1267](https://github.com/MetaMask/metamask-design-system/pull/1267))
+- Added `BannerAlertSeverity.Neutral` for informational banners without semantic severity coloring ([#1287](https://github.com/MetaMask/metamask-design-system/pull/1287))
+- Added `ButtonIconSize.Xs` (20px button dimension mapping to `IconSize.Sm`) ([#1266](https://github.com/MetaMask/metamask-design-system/pull/1266))
+- Added `FilterButtonSize`, `SegmentedControlSize`, and `ButtonSemanticSize` as component-scoped size aliases for `FilterButton`, `SegmentedControl`, and `ButtonSemantic` ([#1297](https://github.com/MetaMask/metamask-design-system/pull/1297))
+### Changed
+- **BREAKING:** Dropped Node.js 20 and 22 support for the release line; consumers must run Node 24 or newer ([#1263](https://github.com/MetaMask/metamask-design-system/pull/1263))
+- **BREAKING:** Removed `titleStartAccessory` and `titleEndAccessory` from `TitleAlert` to align with the Figma component ([#1268](https://github.com/MetaMask/metamask-design-system/pull/1268))
+  - See [Migration Guide](./MIGRATION.md#titlealert-title-accessories-removed)
+- Updated `SectionHeader` so `children` render full-width below the header row; default start and end icon size changed from `Md` to `Sm` ([#1298](https://github.com/MetaMask/metamask-design-system/pull/1298))
+- Updated `BannerBase` spacing, padding, action button margin, and close button alignment to match Figma ([#1269](https://github.com/MetaMask/metamask-design-system/pull/1269))
+- Updated `BannerAlert` to remove the severity-colored left border and inherit `BannerBase` default padding ([#1270](https://github.com/MetaMask/metamask-design-system/pull/1270))
+- Updated `MainActionButtons` vertical padding from 16px to 12px to match Figma ([#1246](https://github.com/MetaMask/metamask-design-system/pull/1246))
+- Updated `Tag` neutral variant default icon and text colors to `alternative` ([#1294](https://github.com/MetaMask/metamask-design-system/pull/1294))
+- Updated `BottomSheetHeader` default horizontal padding to match Figma and align with `HeaderStandard` ([#1264](https://github.com/MetaMask/metamask-design-system/pull/1264))
+- Updated `BottomSheetFooter` container padding to 16px horizontal and 0px vertical ([#1265](https://github.com/MetaMask/metamask-design-system/pull/1265))
 ## [0.30.2]
 ### Fixed
@@ -528,7 +556,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.32.0...HEAD
+[0.32.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.31.0...@metamask/design-system-react-native@0.32.0
+[0.31.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...@metamask/design-system-react-native@0.31.0
 [0.30.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.1...@metamask/design-system-react-native@0.30.2
 [0.30.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.0...@metamask/design-system-react-native@0.30.1
 [0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.29.0...@metamask/design-system-react-native@0.30.0

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

@@ -32,7 +32,6 @@ const react_native_1 = require("react-native");
 const react_native_gesture_handler_1 = require("react-native-gesture-handler");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const react_native_worklets_1 = require("react-native-worklets");
 // Internal dependencies.
 const BottomSheetDialog_constants_1 = require("./BottomSheetDialog.constants.cjs");
 exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
@@ -59,9 +58,9 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
     }, [onClose]);
     const onCloseDialog = (0, react_1.useCallback)((callback) => {
         currentYOffset.value = (0, react_native_reanimated_1.withTiming)(bottomOfDialogYValue.value, { duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
-            (0, react_native_worklets_1.scheduleOnRN)(onCloseCB);
+            (0, react_native_reanimated_1.runOnJS)(onCloseCB)();
             if (callback) {
-                (0, react_native_worklets_1.scheduleOnRN)(callback);
+                (0, react_native_reanimated_1.runOnJS)(callback)();
             }
         });
         // Ref values do not affect deps.
@@ -132,7 +131,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
             }
             const isDismissed = finalYOffset === bottomOfDialogYValue.value;
             if (isDismissed) {
-                (0, react_native_worklets_1.scheduleOnRN)(onCloseDialog);
+                (0, react_native_reanimated_1.runOnJS)(onCloseDialog)();
             }
             else {
                 // Only animate dialog to a certain Y position instead
@@ -158,9 +157,9 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
         currentYOffset.value = (0, react_native_reanimated_1.withTiming)(topOfDialogYValue.value, {
             duration: BottomSheetDialog_constants_1.DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
         }, () => {
-            (0, react_native_worklets_1.scheduleOnRN)(onOpenCB);
+            (0, react_native_reanimated_1.runOnJS)(onOpenCB)();
             if (callback) {
-                (0, react_native_worklets_1.scheduleOnRN)(callback);
+                (0, react_native_reanimated_1.runOnJS)(callback)();
             }
         });
     };

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

	@@ -1 +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 useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\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 scheduleOnRN(onCloseCB);\n if (callback) {\n scheduleOnRN(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 scheduleOnRN(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 scheduleOnRN(onOpenCB);\n if (callback) {\n scheduleOnRN(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"]}
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 // 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.mjs CHANGED Viewed

@@ -12,9 +12,8 @@ import $React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperat
 const React = $importDefault($React);
 import { View, Platform, KeyboardAvoidingView } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context";
-import { scheduleOnRN } from "react-native-worklets";
 // Internal dependencies.
 import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD, DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION } from "./BottomSheetDialog.constants.mjs";
 export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
@@ -41,9 +40,9 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
     }, [onClose]);
     const onCloseDialog = useCallback((callback) => {
         currentYOffset.value = withTiming(bottomOfDialogYValue.value, { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
-            scheduleOnRN(onCloseCB);
+            runOnJS(onCloseCB)();
             if (callback) {
-                scheduleOnRN(callback);
+                runOnJS(callback)();
             }
         });
         // Ref values do not affect deps.
@@ -114,7 +113,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
             }
             const isDismissed = finalYOffset === bottomOfDialogYValue.value;
             if (isDismissed) {
-                scheduleOnRN(onCloseDialog);
+                runOnJS(onCloseDialog)();
             }
             else {
                 // Only animate dialog to a certain Y position instead
@@ -140,9 +139,9 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
         currentYOffset.value = withTiming(topOfDialogYValue.value, {
             duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
         }, () => {
-            scheduleOnRN(onOpenCB);
+            runOnJS(onOpenCB)();
             if (callback) {
-                scheduleOnRN(callback);
+                runOnJS(callback)();
             }
         });
     };

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

	@@ -1 +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 useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\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 scheduleOnRN(onCloseCB);\n if (callback) {\n scheduleOnRN(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 scheduleOnRN(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 scheduleOnRN(onOpenCB);\n if (callback) {\n scheduleOnRN(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"]}
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 // 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/ButtonSemantic/index.cjs CHANGED Viewed

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonSemanticSeverity = exports.ButtonSemantic = void 0;
+exports.ButtonSemanticSeverity = exports.ButtonSemantic = exports.ButtonSemanticSize = void 0;
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "ButtonSemanticSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonSemanticSize; } });
 var ButtonSemantic_1 = require("./ButtonSemantic.cjs");
 Object.defineProperty(exports, "ButtonSemantic", { enumerable: true, get: function () { return ButtonSemantic_1.ButtonSemantic; } });
 var ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");

package/dist/components/ButtonSemantic/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,gFAA6E;AAApE,0HAAA,kBAAkB,OAAA;AAC3B,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemanticSize } from '@metamask-previews/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}

package/dist/components/ButtonSemantic/index.d.cts CHANGED Viewed

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask-previews/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.cjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.cjs";
 export type { ButtonSemanticProps } from "./ButtonSemantic.types.cjs";

package/dist/components/ButtonSemantic/index.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

package/dist/components/ButtonSemantic/index.d.mts CHANGED Viewed

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask-previews/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.mjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
 export type { ButtonSemanticProps } from "./ButtonSemantic.types.mjs";

package/dist/components/ButtonSemantic/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

package/dist/components/ButtonSemantic/index.mjs CHANGED Viewed

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask-previews/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.mjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/ButtonSemantic/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,gDAAgD;AAC7E,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemanticSize } from '@metamask-previews/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}

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

@@ -33,7 +33,7 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
     const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
     const effectiveVariant = variant ?? filterButtonGroup?.variant ?? design_system_shared_1.FilterButtonVariant.Primary;
-    const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.ButtonBaseSize.Sm;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.FilterButtonSize.Sm;
     const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAIiD;AACjD,+CAA0C;AAG1C,wDAA2C;AAC3C,4CAAoC;AACpC,4CAAoC;AAI7B,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,+CAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,0CAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,~~qCAAc~~,CAAC,EAAE,CAAC;~~IAE3E~~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","sourcesContent":["import {\n ~~ButtonBaseSize~~,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? ~~ButtonBaseSize~~.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
1	+ {"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}

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

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask-previews/design-system-shared";
+import { FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask-previews/design-system-shared";
 import $React, { useContext } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../ButtonBase/index.mjs";
@@ -14,7 +14,7 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
     const filterButtonGroup = useContext(FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
     const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
-    const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;
     const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value

package/dist/components/FilterButton/FilterButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,~~cAAc~~,~~EACd~~,mBAAmB,EACnB,wBAAwB,EACzB,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAG1C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,SAAS,EAAE,0BAAgB;AACpC,OAAO,EAAE,SAAS,EAAE,0BAAgB;AAIpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,mBAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,~~cAAc~~,CAAC,EAAE,CAAC;~~IAE3E~~,MAAM,oBAAoB,GACxB,WAAW,IAAI,iBAAiB,EAAE,YAAY,IAAI,KAAK,CAAC;IAE1D,MAAM,mBAAmB,GAAG,kBAAkB;QAC5C,CAAC,CAAC,iBAAiB,CAAC,KAAK,KAAK,KAAK;QACnC,CAAC,CAAC,UAAU,CAAC;IAEf,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,IACE,gBAAgB,KAAK,mBAAmB,CAAC,OAAO;YAChD,mBAAmB,EACnB;YACA,OAAO,sBAAsB,CAAC;SAC/B;QACD,IACE,gBAAgB,KAAK,mBAAmB,CAAC,SAAS;YAClD,mBAAmB,EACnB;YACA,OAAO,cAAc,CAAC;SACvB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA4B,EAAE,EAAE;QACnD,IACE,kBAAkB;YAClB,iBAAiB,KAAK,IAAI;YAC1B,KAAK,KAAK,SAAS;YACnB,iBAAiB,CAAC,KAAK,KAAK,KAAK,EACjC;YACA,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACnC;QACD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,WAAW,CAAC,CAAC,oBAAoB,CAAC,CAClC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,SAAS,CAAC,CAAC;YACT,GAAG,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACrE,GAAG,SAAS;SACb,CAAC,CACF,cAAc,CAAC,CAAC;YACd,GAAG,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACrE,GAAG,cAAc;SAClB,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,GAAG,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACrE,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACvB,IACE,gBAAgB,KAAK,mBAAmB,CAAC,OAAO;gBAChD,mBAAmB,EACnB;gBACA,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,IAC5E,OAAO,WAAW,KAAK,UAAU;oBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;oBACtB,CAAC,CAAC,WACN,EAAE,CAAC;aACJ;YAED,IACE,gBAAgB,KAAK,mBAAmB,CAAC,SAAS;gBAClD,mBAAmB,EACnB;gBACA,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,IAC9D,OAAO,WAAW,KAAK,UAAU;oBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;oBACtB,CAAC,CAAC,WACN,EAAE,CAAC;aACJ;YAED,OAAO,GAAG,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,aAC9D,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAC7D,EAAE,CAAC;QACL,CAAC,CAAC,CACF,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n ~~ButtonBaseSize~~,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? ~~ButtonBaseSize~~.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
1	+ {"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask-previews/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed \|\| isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}

package/dist/components/FilterButton/index.cjs CHANGED Viewed

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterButton = exports.FilterButtonVariant = void 0;
+exports.FilterButton = exports.FilterButtonVariant = exports.FilterButtonSize = void 0;
 var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "FilterButtonSize", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonSize; } });
 Object.defineProperty(exports, "FilterButtonVariant", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonVariant; } });
 var FilterButton_1 = require("./FilterButton.cjs");
 Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return FilterButton_1.FilterButton; } });

package/dist/components/FilterButton/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,~~gFAA8E~~;~~AAArE~~,2HAAA,mBAAmB,OAAA;~~AAC5B~~,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export { FilterButtonVariant } from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,wHAAA,gBAAgB,OAAA;AAChB,2HAAA,mBAAmB,OAAA;AAErB,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}

package/dist/components/FilterButton/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButtonSize, FilterButtonVariant, } from "@metamask-previews/design-system-shared";
 export { FilterButton } from "./FilterButton.cjs";
 export type { FilterButtonProps } from "./FilterButton.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/FilterButton/index.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,gDAAgD;~~AAC9E~~,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/FilterButton/index.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButtonSize, FilterButtonVariant, } from "@metamask-previews/design-system-shared";
 export { FilterButton } from "./FilterButton.mjs";
 export type { FilterButtonProps } from "./FilterButton.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/FilterButton/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,gDAAgD;~~AAC9E~~,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/FilterButton/index.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-export { FilterButtonVariant } from "@metamask-previews/design-system-shared";
+export { FilterButtonSize, FilterButtonVariant } from "@metamask-previews/design-system-shared";
 export { FilterButton } from "./FilterButton.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/FilterButton/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,gDAAgD;~~AAC9E~~,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export { FilterButtonVariant } from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACpB,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask-previews/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}

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

@@ -131,6 +131,7 @@ const global_search_svg_1 = __importDefault(require("./assets/global-search.svg"
 const global_svg_1 = __importDefault(require("./assets/global.svg"));
 const graph_svg_1 = __importDefault(require("./assets/graph.svg"));
 const group_svg_1 = __importDefault(require("./assets/group.svg"));
+const hard_drive_svg_1 = __importDefault(require("./assets/hard-drive.svg"));
 const hardware_svg_1 = __importDefault(require("./assets/hardware.svg"));
 const hash_tag_svg_1 = __importDefault(require("./assets/hash-tag.svg"));
 const heart_filled_svg_1 = __importDefault(require("./assets/heart-filled.svg"));
@@ -426,6 +427,7 @@ exports.assetByIconName = {
     Global: global_svg_1.default,
     Graph: graph_svg_1.default,
     Group: group_svg_1.default,
+    HardDrive: hard_drive_svg_1.default,
     Hardware: hardware_svg_1.default,
     HashTag: hash_tag_svg_1.default,
     HeartFilled: heart_filled_svg_1.default,