npm - @metamask-previews/design-system-react-native - Versions diffs - 0.18.0-preview.9d477a9 → 0.19.0-preview.1679aa9 - Mend

@metamask-previews/design-system-react-native 0.18.0-preview.9d477a9 → 0.19.0-preview.1679aa9

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

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

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

package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts CHANGED Viewed

@@ -9,17 +9,22 @@ export declare const BottomSheetDialog: React.ForwardRefExoticComponent<{
     onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
     panGestureHandlerProps?: {
         children?: React.ReactNode;
-        hitSlop?: import("react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon").HitSlop | undefined;
+        hitSlop?: import("react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon").HitSlop;
         id?: string | undefined;
         testID?: string | undefined;
-        activeOffsetY?: number | number[] | undefined;
-        activeOffsetX?: number | number[] | undefined;
-        failOffsetY?: number | number[] | undefined;
-        failOffsetX?: number | number[] | undefined;
+        activeOffsetY?: number | [activeOffsetYStart: number, activeOffsetYEnd: number] | undefined;
+        activeOffsetX?: number | [activeOffsetXStart: number, activeOffsetXEnd: number] | undefined;
+        failOffsetY?: number | [failOffsetYStart: number, failOffsetYEnd: number] | undefined;
+        failOffsetX?: number | [failOffsetXStart: number, failOffsetXEnd: number] | undefined;
         shouldCancelWhenOutside?: boolean | undefined;
         userSelect?: import("react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon").UserSelect | undefined;
+        activeCursor?: import("react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon").ActiveCursor | undefined;
+        mouseButton?: import("react-native-gesture-handler").MouseButton | undefined;
+        enableContextMenu?: boolean | undefined;
+        touchAction?: import("react-native-gesture-handler/lib/typescript/handlers/gestureHandlerCommon").TouchAction | undefined;
         waitFor?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
         simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
+        blocksHandlers?: React.Ref<unknown> | React.Ref<unknown>[] | undefined;
         cancelsTouchesInView?: boolean | undefined;
         onBegan?: ((event: import("react-native-gesture-handler").HandlerStateChangeEvent<Record<string, unknown>>) => void) | undefined;
         onFailed?: ((event: import("react-native-gesture-handler").HandlerStateChangeEvent<Record<string, unknown>>) => void) | undefined;

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

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

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

@@ -12,7 +12,6 @@ import $React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperat
 const React = $importDefault($React);
 import { View, Platform, KeyboardAvoidingView } from "react-native/index.js";
 import { PanGestureHandler } from "react-native-gesture-handler";
-// eslint-disable-next-line import-x/default
 import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context";
 // Internal dependencies.
@@ -149,7 +148,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
         ],
     }));
     const sheetStyle = useMemo(() => [
-        tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
+        tw.style('bg-section rounded-t-3xl overflow-hidden border border-muted', twClassName),
         {
             maxHeight: maxSheetHeight,
             paddingBottom: Platform.select({

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 {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\n// eslint-disable-next-line import-x/default\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\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 panGestureHandlerProps,\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 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 = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >({\n onStart: (_, ctx) => {\n // Starts tracking vertical position of gesture\n ctx.startY = currentYOffset.value;\n },\n onActive: (event, ctx) => {\n const { translationY } = event;\n currentYOffset.value = ctx.startY + 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, ctx) => {\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 = ctx.startY + 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\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 transform: [\n {\n translateY: currentYOffset.value,\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 <PanGestureHandler\n {...panGestureHandlerProps}\n enabled={isInteractable}\n onGestureEvent={gestureHandler}\n >\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 </PanGestureHandler>\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 {\n PanGestureHandler,\n PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n runOnJS,\n useAnimatedGestureHandler,\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 panGestureHandlerProps,\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 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 = useAnimatedGestureHandler<\n PanGestureHandlerGestureEvent,\n { startY: number }\n >({\n onStart: (_, ctx) => {\n // Starts tracking vertical position of gesture\n ctx.startY = currentYOffset.value;\n },\n onActive: (event, ctx) => {\n const { translationY } = event;\n currentYOffset.value = ctx.startY + 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, ctx) => {\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 = ctx.startY + 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\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 transform: [\n {\n translateY: currentYOffset.value,\n },\n ],\n }));\n\n const sheetStyle = useMemo(\n () => [\n tw.style(\n 'bg-section 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 <PanGestureHandler\n {...panGestureHandlerProps}\n enabled={isInteractable}\n onGestureEvent={gestureHandler}\n >\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 </PanGestureHandler>\n </KeyboardAvoidingView>\n );\n },\n);\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ViewProps } from "react-native/index.js";
 import type { PanGestureHandlerProps } from "react-native-gesture-handler";
 type BottomSheetDialogPanGestureHandlerProps = Omit<PanGestureHandlerProps, 'enabled' | 'onGestureEvent'>;

package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,qCAAqC;AAE3E,KAAK,uCAAuC,GAAG,IAAI,CACjD,sBAAsB,EACtB,SAAS,GAAG,gBAAgB,CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,sBAAsB,CAAC,EAAE,uCAAuC,CAAC;IACjE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
1	+ {"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,qCAAqC;AAE3E,KAAK,uCAAuC,GAAG,IAAI,CACjD,sBAAsB,EACtB,SAAS,GAAG,gBAAgB,CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,sBAAsB,CAAC,EAAE,uCAAuC,CAAC;IACjE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}

package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ViewProps } from "react-native/index.js";
 import type { PanGestureHandlerProps } from "react-native-gesture-handler";
 type BottomSheetDialogPanGestureHandlerProps = Omit<PanGestureHandlerProps, 'enabled' | 'onGestureEvent'>;

package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,qCAAqC;AAE3E,KAAK,uCAAuC,GAAG,IAAI,CACjD,sBAAsB,EACtB,SAAS,GAAG,gBAAgB,CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,sBAAsB,CAAC,EAAE,uCAAuC,CAAC;IACjE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
1	+ {"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,qCAAqC;AAE3E,KAAK,uCAAuC,GAAG,IAAI,CACjD,sBAAsB,EACtB,SAAS,GAAG,gBAAgB,CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,sBAAsB,CAAC,EAAE,uCAAuC,CAAC;IACjE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
 import type { ButtonBaseSize } from "../../types/index.cjs";
 import type { IconProps, IconName } from "../Icon/index.cjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACN,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}
1	+ {"version":3,"file":"ButtonBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACN,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PressableProps, StyleProp, ViewStyle } from "react-native/index.js";
 import type { ButtonBaseSize } from "../../types/index.mjs";
 import type { IconProps, IconName } from "../Icon/index.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACN,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}
1	+ {"version":3,"file":"ButtonBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEzE,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAoB;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,6CAAmC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IACjD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;IACpE;;;OAGG;IACH,oBAAoB,CAAC,EAAE;QACrB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,EAAE,CAAC;IACJ;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC9B,WAAW,EAAE;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;KACrC,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CACN,cAAc,EACZ,mBAAmB,GACnB,oBAAoB,GACpB,mBAAmB,GACnB,sBAAsB,GACtB,uBAAuB,CAC1B,CAAC"}

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderRoot = void 0;
 // Third party dependencies.
-const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const react_1 = __importDefault(require("react"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 // External dependencies.
@@ -15,10 +14,6 @@ const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const hasRenderableChildren = (0, design_system_shared_1.isReactNodeRenderable)(children);
-    const hasTitleContent = title !== false &&
-        ((0, design_system_shared_1.isReactNodeRenderable)(title) || (0, design_system_shared_1.isReactNodeRenderable)(titleAccessory));
-    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
     const endSectionContent = (() => {
         if (endAccessory) {
             return endAccessory;
@@ -31,27 +26,23 @@ const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory,
         }
         return null;
     })();
-    const hasEndSection = Boolean(endSectionContent);
     const renderLeftSection = () => {
-        if (hasRenderableChildren) {
+        if (children) {
             return children;
         }
-        if (shouldRenderTitleRow) {
-            const titleNode = (0, design_system_shared_1.isReactNodeRenderable)(title) && title !== '' ? title : null;
+        if (title) {
             return (<BoxRow_1.BoxRow endAccessory={titleAccessory} textProps={{
                     variant: Text_1.TextVariant.HeadingLg,
                     ...titleProps,
-                }}>
-          {titleNode}
+                }} twClassName="flex-1">
+          {title}
         </BoxRow_1.BoxRow>);
         }
         return null;
     };
     return (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
-      <Box_1.Box alignItems={Box_1.BoxAlignItems.Start} style={{ flex: 1 }}>
-        {renderLeftSection()}
-      </Box_1.Box>
-      {hasEndSection ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2}>
+      {renderLeftSection()}
+      {endSectionContent ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}
         </Box_1.Box>) : null}
     </Box_1.Box>);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,~~kFAAgF;AAChF,~~kDAA0B;AAC1B,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA8D;AAC9D,gDAAmC;AACnC,wDAA2D;AAC3D,4CAAsC;AAK/B,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC,MAAM,qBAAqB,GAAG,IAAA,4CAAqB,EAAC,QAAQ,CAAC,CAAC;IAE9D,MAAM,eAAe,GACnB,KAAK,KAAK,KAAK;QACf,CAAC,IAAA,4CAAqB,EAAC,KAAK,CAAC,IAAI,IAAA,4CAAqB,EAAC,cAAc,CAAC,CAAC,CAAC;IAE1E,MAAM,oBAAoB,GAAG,CAAC,qBAAqB,IAAI,eAAe,CAAC;IAEvE,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;iBACzD,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrD,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,~~aAAa,GAAG,OAAO,CAAC,~~iBAAiB,~~CAAC,CAAC;IAEjD,MAAM,iBAAiB,~~GAAG,GAAG,EAAE;QAC7B,IAAI,~~qBAAqB~~,EAAE;~~YACzB~~,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,~~oBAAoB,EAAE;YACxB,MAAM,SAAS,GACb,IAAA,4CAAqB,EAAC,~~KAAK,~~CAAC,IAAI,KAAK,KAAK,~~EAAE~~,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC~~;~~YAC9D~~,OAAO,CACL,CAAC,eAAM,CACL,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,~~CAEF~~;UAAA,CAAC,~~SAAS~~,~~CACZ~~;QAAA,EAAE,eAAM,CAAC,CACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,YAAY,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,~~SAAG,CAAC,UAAU,CAAC,CAAC,mBAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACvD;QAAA,CAAC,~~iBAAiB,EAAE,~~CACtB~~;MAAA,~~EAAE,SAAG,CACL;MAAA,~~CAAC,~~aAAa~~,CAAC,CAAC,CAAC,~~CACf~~,CAAC,SAAG,CAAC,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,~~CAC/C~~;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;~~AAxFW~~,QAAA,UAAU,~~cAwFrB~~;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["// Third party dependencies.\nimport ~~{ isReactNodeRenderable } from '@metamask-previews/design-system-shared';\nimport~~ React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n children,\n title,\n titleProps,\n titleAccessory,\n endAccessory,\n endButtonIconProps,\n includesTopInset = false,\n style,\n testID,\n twClassName,\n ...viewProps\n}: HeaderRootProps) => {\n const insets = useSafeAreaInsets();\n\n const hasRenderableChildren = isReactNodeRenderable(children);\n\n const hasTitleContent =\n title !== false &&\n (isReactNodeRenderable(title) \|\| isReactNodeRenderable(titleAccessory));\n\n const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\n\n const endSectionContent = (() => {\n if (endAccessory) {\n return endAccessory;\n }\n if (endButtonIconProps && endButtonIconProps.length > 0) {\n const reversedProps = endButtonIconProps\n .map((props, originalIndex) => ({ props, originalIndex }))\n .reverse();\n return reversedProps.map(({ props, originalIndex }) => (\n <ButtonIcon\n key={`end-button-icon-${originalIndex}`}\n size={ButtonIconSize.Md}\n {...props}\n />\n ));\n }\n return null;\n })();\n\n const ~~hasEndSection = Boolean(endSectionContent);\n\n const~~ renderLeftSection = () => {\n if (~~hasRenderableChildren~~) {\n return children;\n }\n if (~~shouldRenderTitleRow~~) {\n ~~const titleNode =\n isReactNodeRenderable(title) && title !== '' ? title : null;\n~~ return (\n <BoxRow\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingLg,\n ...titleProps,\n }}\n >\n {~~titleNode~~}\n </BoxRow>\n );\n }\n return null;\n };\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={4}\n paddingLeft={4}\n paddingRight={2}\n twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n style={[includesTopInset && { marginTop: insets.top }, style]}\n testID={testID}\n {...viewProps}\n >\n ~~<Box alignItems=~~{~~BoxAlignItems.Start} style={{ flex: 1 }}>\n {~~renderLeftSection()}\n ~~</Box>\n~~ {~~hasEndSection~~ ? (\n <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n {endSectionContent}\n </Box>\n ) : null}\n </Box>\n );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
1	+ {"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,kDAA0B;AAC1B,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA8D;AAC9D,gDAAmC;AACnC,wDAA2D;AAC3D,4CAAsC;AAK/B,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;iBACzD,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrD,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,eAAM,CACL,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,CACF,WAAW,CAAC,QAAQ,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,YAAY,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,iBAAiB,EAAE,CACpB;MAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACnB,CAAC,SAAG,CAAC,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CACrE;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA3EW,QAAA,UAAU,cA2ErB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n children,\n title,\n titleProps,\n titleAccessory,\n endAccessory,\n endButtonIconProps,\n includesTopInset = false,\n style,\n testID,\n twClassName,\n ...viewProps\n}: HeaderRootProps) => {\n const insets = useSafeAreaInsets();\n\n const endSectionContent = (() => {\n if (endAccessory) {\n return endAccessory;\n }\n if (endButtonIconProps && endButtonIconProps.length > 0) {\n const reversedProps = endButtonIconProps\n .map((props, originalIndex) => ({ props, originalIndex }))\n .reverse();\n return reversedProps.map(({ props, originalIndex }) => (\n <ButtonIcon\n key={`end-button-icon-${originalIndex}`}\n size={ButtonIconSize.Md}\n {...props}\n />\n ));\n }\n return null;\n })();\n\n const renderLeftSection = () => {\n if (children) {\n return children;\n }\n if (title) {\n return (\n <BoxRow\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingLg,\n ...titleProps,\n }}\n twClassName=\"flex-1\"\n >\n {title}\n </BoxRow>\n );\n }\n return null;\n };\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={4}\n paddingLeft={4}\n paddingRight={2}\n twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n style={[includesTopInset && { marginTop: insets.top }, style]}\n testID={testID}\n {...viewProps}\n >\n {renderLeftSection()}\n {endSectionContent ? (\n <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n {endSectionContent}\n </Box>\n ) : null}\n </Box>\n );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;~~CA4EjB~~,CAAC"}
1	+ {"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;~~CA4EjB~~,CAAC"}
1	+ {"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

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

@@ -5,7 +5,6 @@ function $importDefault(module) {
     return module;
 }
 // Third party dependencies.
-import { isReactNodeRenderable } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -16,10 +15,6 @@ import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
 import { TextVariant } from "../Text/index.mjs";
 export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
     const insets = useSafeAreaInsets();
-    const hasRenderableChildren = isReactNodeRenderable(children);
-    const hasTitleContent = title !== false &&
-        (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));
-    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
     const endSectionContent = (() => {
         if (endAccessory) {
             return endAccessory;
@@ -32,27 +27,23 @@ export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAcc
         }
         return null;
     })();
-    const hasEndSection = Boolean(endSectionContent);
     const renderLeftSection = () => {
-        if (hasRenderableChildren) {
+        if (children) {
             return children;
         }
-        if (shouldRenderTitleRow) {
-            const titleNode = isReactNodeRenderable(title) && title !== '' ? title : null;
+        if (title) {
             return (<BoxRow endAccessory={titleAccessory} textProps={{
                     variant: TextVariant.HeadingLg,
                     ...titleProps,
-                }}>
-          {titleNode}
+                }} twClassName="flex-1">
+          {title}
         </BoxRow>);
         }
         return null;
     };
     return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
-      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>
-        {renderLeftSection()}
-      </Box>
-      {hasEndSection ? (<Box flexDirection={BoxFlexDirection.Row} gap={2}>
+      {renderLeftSection()}
+      {endSectionContent ? (<Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}
         </Box>) : null}
     </Box>);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,~~EAAE,qBAAqB,EAAE,gDAAgD;AAChF,OAAO,~~MAAK,cAAc;;AAC1B,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;AAEnE,yBAAyB;AACzB,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,gBAAgB,EAAE,yBAAe;AAC9D,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAKtC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IAEnC,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAE9D,MAAM,eAAe,GACnB,KAAK,KAAK,KAAK;QACf,CAAC,qBAAqB,CAAC,KAAK,CAAC,IAAI,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC;IAE1E,MAAM,oBAAoB,GAAG,CAAC,qBAAqB,IAAI,eAAe,CAAC;IAEvE,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;iBACzD,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrD,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,~~aAAa,GAAG,OAAO,CAAC,~~iBAAiB,~~CAAC,CAAC;IAEjD,MAAM,iBAAiB,~~GAAG,GAAG,EAAE;QAC7B,IAAI,~~qBAAqB~~,EAAE;~~YACzB~~,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,~~oBAAoB,EAAE;YACxB,MAAM,SAAS,GACb,qBAAqB,CAAC,~~KAAK,~~CAAC,IAAI,KAAK,KAAK,~~EAAE~~,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC~~;~~YAC9D~~,OAAO,CACL,CAAC,MAAM,CACL,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,~~CAEF~~;UAAA,CAAC,~~SAAS~~,~~CACZ~~;QAAA,EAAE,MAAM,CAAC,CACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,YAAY,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,~~GAAG,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACvD;QAAA,CAAC,~~iBAAiB,EAAE,~~CACtB~~;MAAA,~~EAAE,GAAG,CACL;MAAA,~~CAAC,~~aAAa~~,CAAC,CAAC,CAAC,~~CACf~~,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,~~CAC/C~~;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["// Third party dependencies.\nimport ~~{ isReactNodeRenderable } from '@metamask-previews/design-system-shared';\nimport~~ React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n children,\n title,\n titleProps,\n titleAccessory,\n endAccessory,\n endButtonIconProps,\n includesTopInset = false,\n style,\n testID,\n twClassName,\n ...viewProps\n}: HeaderRootProps) => {\n const insets = useSafeAreaInsets();\n\n const hasRenderableChildren = isReactNodeRenderable(children);\n\n const hasTitleContent =\n title !== false &&\n (isReactNodeRenderable(title) \|\| isReactNodeRenderable(titleAccessory));\n\n const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\n\n const endSectionContent = (() => {\n if (endAccessory) {\n return endAccessory;\n }\n if (endButtonIconProps && endButtonIconProps.length > 0) {\n const reversedProps = endButtonIconProps\n .map((props, originalIndex) => ({ props, originalIndex }))\n .reverse();\n return reversedProps.map(({ props, originalIndex }) => (\n <ButtonIcon\n key={`end-button-icon-${originalIndex}`}\n size={ButtonIconSize.Md}\n {...props}\n />\n ));\n }\n return null;\n })();\n\n const ~~hasEndSection = Boolean(endSectionContent);\n\n const~~ renderLeftSection = () => {\n if (~~hasRenderableChildren~~) {\n return children;\n }\n if (~~shouldRenderTitleRow~~) {\n ~~const titleNode =\n isReactNodeRenderable(title) && title !== '' ? title : null;\n~~ return (\n <BoxRow\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingLg,\n ...titleProps,\n }}\n >\n {~~titleNode~~}\n </BoxRow>\n );\n }\n return null;\n };\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={4}\n paddingLeft={4}\n paddingRight={2}\n twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n style={[includesTopInset && { marginTop: insets.top }, style]}\n testID={testID}\n {...viewProps}\n >\n ~~<Box alignItems=~~{~~BoxAlignItems.Start} style={{ flex: 1 }}>\n {~~renderLeftSection()}\n ~~</Box>\n~~ {~~hasEndSection~~ ? (\n <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n {endSectionContent}\n </Box>\n ) : null}\n </Box>\n );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
1	+ {"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n children,\n title,\n titleProps,\n titleAccessory,\n endAccessory,\n endButtonIconProps,\n includesTopInset = false,\n style,\n testID,\n twClassName,\n ...viewProps\n}: HeaderRootProps) => {\n const insets = useSafeAreaInsets();\n\n const endSectionContent = (() => {\n if (endAccessory) {\n return endAccessory;\n }\n if (endButtonIconProps && endButtonIconProps.length > 0) {\n const reversedProps = endButtonIconProps\n .map((props, originalIndex) => ({ props, originalIndex }))\n .reverse();\n return reversedProps.map(({ props, originalIndex }) => (\n <ButtonIcon\n key={`end-button-icon-${originalIndex}`}\n size={ButtonIconSize.Md}\n {...props}\n />\n ));\n }\n return null;\n })();\n\n const renderLeftSection = () => {\n if (children) {\n return children;\n }\n if (title) {\n return (\n <BoxRow\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingLg,\n ...titleProps,\n }}\n twClassName=\"flex-1\"\n >\n {title}\n </BoxRow>\n );\n }\n return null;\n };\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n gap={4}\n paddingLeft={4}\n paddingRight={2}\n twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n style={[includesTopInset && { marginTop: insets.top }, style]}\n testID={testID}\n {...viewProps}\n >\n {renderLeftSection()}\n {endSectionContent ? (\n <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n {endSectionContent}\n </Box>\n ) : null}\n </Box>\n );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}