@metamask-previews/design-system-react-native 0.9.0-preview.694a8ed → 0.11.0-preview.fa05289

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { BottomSheetDialogRef } from "./BottomSheetDialog.types.mjs";
+declare const BottomSheetDialog: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    isFullscreen?: boolean | undefined;
+    isInteractable?: boolean | undefined;
+    keyboardAvoidingViewEnabled?: boolean | undefined;
+    onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
+    twClassName?: string | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<BottomSheetDialogRef>>;
+export default BottomSheetDialog;
+//# sourceMappingURL=BottomSheetDialog.d.mts.map

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

@@ -0,0 +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,QAAA,MAAM,iBAAiB;;;;;;;;iFA4PtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs

@@ -0,0 +1,190 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { Theme, useTailwind, useTheme } from "@metamask-previews/design-system-twrnc-preset";
+import { lightTheme, darkTheme } from "@metamask-previews/design-tokens";
+import $lodash from "lodash";
+const { debounce } = $lodash;
+import $React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperativeHandle } from "react";
+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.
+import { DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION, DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD, DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION } from "./BottomSheetDialog.constants.mjs";
+const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, isInteractable = true, keyboardAvoidingViewEnabled = true, onClose, onOpen, style, twClassName, ...props }, ref) => {
+    const tw = useTailwind();
+    const currentTheme = useTheme();
+    const shadowLg = currentTheme === Theme.Light
+        ? lightTheme.shadows.size.lg
+        : darkTheme.shadows.size.lg;
+    const { top: screenTopPadding, bottom: screenBottomPadding } = useSafeAreaInsets();
+    const { y: frameY, height: screenHeight } = useSafeAreaFrame();
+    const maxSheetHeight = screenHeight - screenTopPadding;
+    // X and Y values start on top left of the DIALOG
+    // currentYOffset will be used to animate the Y position of the Dialog
+    const currentYOffset = useSharedValue(screenHeight);
+    const topOfDialogYValue = useSharedValue(0);
+    const bottomOfDialogYValue = useSharedValue(screenHeight);
+    const isMounted = useRef(false);
+    const onOpenCB = useCallback(() => {
+        onOpen?.();
+    }, [onOpen]);
+    const onCloseCB = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    const onCloseDialog = useCallback((callback) => {
+        currentYOffset.value = withTiming(bottomOfDialogYValue.value, { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION }, () => {
+            runOnJS(onCloseCB)();
+            if (callback) {
+                runOnJS(callback)();
+            }
+        });
+        // Ref values do not affect deps.
+    }, [onCloseCB]);
+    const gestureHandler = useAnimatedGestureHandler({
+        onStart: (_, ctx) => {
+            // Starts tracking vertical position of gesture
+            ctx.startY = currentYOffset.value;
+        },
+        onActive: (event, ctx) => {
+            const { translationY } = event;
+            currentYOffset.value = ctx.startY + translationY;
+            // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),
+            // which means the gesture is currently below the bottom of the dialog,
+            // sets it to bottom of Dialog Y value
+            if (currentYOffset.value >= bottomOfDialogYValue.value) {
+                currentYOffset.value = bottomOfDialogYValue.value;
+            }
+            // If gesture Y value goes below the top of Dialog Y value(top of dialog),
+            // which means the gesture is currently above the top of the dialog,
+            // sets it to top of Dialog Y value
+            if (currentYOffset.value <= topOfDialogYValue.value) {
+                currentYOffset.value = topOfDialogYValue.value;
+            }
+        },
+        onEnd: (event, ctx) => {
+            const { translationY, velocityY } = event;
+            // finalYOffset is used to animate the Y position of the Dialog after the gesture event
+            let finalYOffset;
+            // Measuring dismissing swipe action
+            const latestOffset = ctx.startY + translationY;
+            // Check if the swipe distance reach the dismiss offset threshold,
+            // which is currently 60% of sheet height
+            const hasReachedDismissOffset = latestOffset >
+                bottomOfDialogYValue.value *
+                    DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;
+            // Check if the gesture's vertical speed has reached the threshold to determine a swipe action
+            const hasReachedSwipeThreshold = Math.abs(velocityY) >
+                DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;
+            const isQuickDismissing = velocityY > 0;
+            // If user is swiping
+            if (hasReachedSwipeThreshold) {
+                // Quick swipe takes priority
+                if (isQuickDismissing) {
+                    finalYOffset = bottomOfDialogYValue.value;
+                }
+                else {
+                    finalYOffset = topOfDialogYValue.value;
+                }
+            }
+            else if (hasReachedDismissOffset) {
+                finalYOffset = bottomOfDialogYValue.value;
+            }
+            else {
+                finalYOffset = topOfDialogYValue.value;
+            }
+            const isDismissed = finalYOffset === bottomOfDialogYValue.value;
+            if (isDismissed) {
+                runOnJS(onCloseDialog)();
+            }
+            else {
+                // Only animate dialog to a certain Y position instead
+                currentYOffset.value = withTiming(finalYOffset, {
+                    duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
+                });
+            }
+        },
+    });
+    // Animate in sheet on initial render.
+    const onOpenDialog = (callback) => {
+        // Starts setting the Y position of the dialog to the bottom of the dialog
+        currentYOffset.value = bottomOfDialogYValue.value;
+        // Animate the Y position to the top of the dialog, then call onOpenCB
+        currentYOffset.value = withTiming(topOfDialogYValue.value, {
+            duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,
+        }, () => {
+            runOnJS(onOpenCB)();
+            if (callback) {
+                runOnJS(callback)();
+            }
+        });
+    };
+    const onDebouncedCloseDialog = useMemo(
+    // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.
+    () => debounce(onCloseDialog, 2000, { leading: true }), [onCloseDialog]);
+    useEffect(() => 
+    // Automatically handles animation when content changes
+    // Disable for now since network switches causes the screen to hang with this on.
+    // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    onDebouncedCloseDialog.cancel(), [children, onDebouncedCloseDialog]);
+    const updateSheetHeight = (e) => {
+        const { height } = e.nativeEvent.layout;
+        bottomOfDialogYValue.value = height;
+        if (!isMounted.current) {
+            isMounted.current = true;
+            onOpenDialog();
+        }
+    };
+    const animatedSheetStyle = useAnimatedStyle(() => ({
+        transform: [
+            {
+                translateY: currentYOffset.value,
+            },
+        ],
+    }));
+    const sheetStyle = useMemo(() => [
+        tw.style('bg-default rounded-t-3xl overflow-hidden border border-muted', twClassName),
+        {
+            maxHeight: maxSheetHeight,
+            paddingBottom: Platform.select({
+                ios: screenBottomPadding,
+                macos: screenBottomPadding,
+                default: screenBottomPadding + 16,
+            }),
+            ...(isFullscreen && { height: maxSheetHeight }),
+            ...shadowLg,
+        },
+        style,
+    ], [
+        tw,
+        maxSheetHeight,
+        screenBottomPadding,
+        isFullscreen,
+        shadowLg,
+        style,
+        twClassName,
+    ]);
+    const combinedSheetStyle = useMemo(() => [...sheetStyle, animatedSheetStyle], [sheetStyle]);
+    useImperativeHandle(ref, () => ({
+        onOpenDialog,
+        onCloseDialog,
+    }));
+    return (<KeyboardAvoidingView style={tw.style('absolute bottom-0 inset-x-0')} behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={Platform.OS === 'ios' ? -screenBottomPadding : frameY} enabled={keyboardAvoidingViewEnabled} {...props}>
+        <PanGestureHandler enabled={isInteractable} onGestureEvent={gestureHandler}>
+          <Animated.View onLayout={updateSheetHeight} style={combinedSheetStyle}>
+            {isInteractable && (<View style={tw.style('self-stretch items-center p-1')}>
+                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')}/>
+              </View>)}
+            {children}
+          </Animated.View>
+        </PanGestureHandler>
+      </KeyboardAvoidingView>);
+});
+export default BottomSheetDialog;
+//# sourceMappingURL=BottomSheetDialog.mjs.map

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

@@ -0,0 +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\nconst 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 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          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\nexport default BottomSheetDialog;\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetDialog.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n  /**\n   * Optional content to display inside the dialog.\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional prop to toggle full screen state of BottomSheetDialog.\n   *\n   * @default false\n   */\n  isFullscreen?: boolean;\n  /**\n   * Optional boolean that indicates if the sheet is swippable.\n   * This affects whether or not tapping on the overlay will dismiss\n   * the sheet as well, and whether the drag handle indicator is shown.\n   *\n   * @default true\n   */\n  isInteractable?: boolean;\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n  /**\n   * Optional callback that gets triggered when the sheet is closed.\n   */\n  onClose?: (hasPendingAction?: boolean) => void;\n  /**\n   * Optional callback that gets triggered when the sheet is opened.\n   */\n  onOpen?: (hasPendingAction?: boolean) => void;\n  /**\n   * Tailwind CSS classes for the dialog container.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n  /**\n   * Imperatively close the dialog with an optional callback after animation completes.\n   */\n  onCloseDialog: (callback?: () => void) => void;\n  /**\n   * Imperatively open the dialog with an optional callback after animation completes.\n   */\n  onOpenDialog: (callback?: () => void) => void;\n};\n"]}

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

@@ -0,0 +1,56 @@
+import type { ViewProps } from "react-native/index.js";
+/**
+ * BottomSheetDialog component props.
+ */
+export type BottomSheetDialogProps = {
+    /**
+     * Optional content to display inside the dialog.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional prop to toggle full screen state of BottomSheetDialog.
+     *
+     * @default false
+     */
+    isFullscreen?: boolean;
+    /**
+     * Optional boolean that indicates if the sheet is swippable.
+     * This affects whether or not tapping on the overlay will dismiss
+     * the sheet as well, and whether the drag handle indicator is shown.
+     *
+     * @default true
+     */
+    isInteractable?: boolean;
+    /**
+     * Optional boolean that indicates if the KeyboardAvoidingView is enabled.
+     *
+     * @default true
+     */
+    keyboardAvoidingViewEnabled?: boolean;
+    /**
+     * Optional callback that gets triggered when the sheet is closed.
+     */
+    onClose?: (hasPendingAction?: boolean) => void;
+    /**
+     * Optional callback that gets triggered when the sheet is opened.
+     */
+    onOpen?: (hasPendingAction?: boolean) => void;
+    /**
+     * Tailwind CSS classes for the dialog container.
+     */
+    twClassName?: string;
+} & ViewProps;
+/**
+ * Ref handle for imperative control of the BottomSheetDialog.
+ */
+export type BottomSheetDialogRef = {
+    /**
+     * Imperatively close the dialog with an optional callback after animation completes.
+     */
+    onCloseDialog: (callback?: () => void) => void;
+    /**
+     * Imperatively open the dialog with an optional callback after animation completes.
+     */
+    onOpenDialog: (callback?: () => void) => void;
+};
+//# sourceMappingURL=BottomSheetDialog.types.d.cts.map

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

@@ -0,0 +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;AAE9C;;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,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

@@ -0,0 +1,56 @@
+import type { ViewProps } from "react-native/index.js";
+/**
+ * BottomSheetDialog component props.
+ */
+export type BottomSheetDialogProps = {
+    /**
+     * Optional content to display inside the dialog.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional prop to toggle full screen state of BottomSheetDialog.
+     *
+     * @default false
+     */
+    isFullscreen?: boolean;
+    /**
+     * Optional boolean that indicates if the sheet is swippable.
+     * This affects whether or not tapping on the overlay will dismiss
+     * the sheet as well, and whether the drag handle indicator is shown.
+     *
+     * @default true
+     */
+    isInteractable?: boolean;
+    /**
+     * Optional boolean that indicates if the KeyboardAvoidingView is enabled.
+     *
+     * @default true
+     */
+    keyboardAvoidingViewEnabled?: boolean;
+    /**
+     * Optional callback that gets triggered when the sheet is closed.
+     */
+    onClose?: (hasPendingAction?: boolean) => void;
+    /**
+     * Optional callback that gets triggered when the sheet is opened.
+     */
+    onOpen?: (hasPendingAction?: boolean) => void;
+    /**
+     * Tailwind CSS classes for the dialog container.
+     */
+    twClassName?: string;
+} & ViewProps;
+/**
+ * Ref handle for imperative control of the BottomSheetDialog.
+ */
+export type BottomSheetDialogRef = {
+    /**
+     * Imperatively close the dialog with an optional callback after animation completes.
+     */
+    onCloseDialog: (callback?: () => void) => void;
+    /**
+     * Imperatively open the dialog with an optional callback after animation completes.
+     */
+    onOpenDialog: (callback?: () => void) => void;
+};
+//# sourceMappingURL=BottomSheetDialog.types.d.mts.map

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

@@ -0,0 +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;AAE9C;;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,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.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetDialog.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n  /**\n   * Optional content to display inside the dialog.\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional prop to toggle full screen state of BottomSheetDialog.\n   *\n   * @default false\n   */\n  isFullscreen?: boolean;\n  /**\n   * Optional boolean that indicates if the sheet is swippable.\n   * This affects whether or not tapping on the overlay will dismiss\n   * the sheet as well, and whether the drag handle indicator is shown.\n   *\n   * @default true\n   */\n  isInteractable?: boolean;\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n  /**\n   * Optional callback that gets triggered when the sheet is closed.\n   */\n  onClose?: (hasPendingAction?: boolean) => void;\n  /**\n   * Optional callback that gets triggered when the sheet is opened.\n   */\n  onOpen?: (hasPendingAction?: boolean) => void;\n  /**\n   * Tailwind CSS classes for the dialog container.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n  /**\n   * Imperatively close the dialog with an optional callback after animation completes.\n   */\n  onCloseDialog: (callback?: () => void) => void;\n  /**\n   * Imperatively open the dialog with an optional callback after animation completes.\n   */\n  onOpenDialog: (callback?: () => void) => void;\n};\n"]}

package/dist/components/BottomSheetDialog/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var BottomSheetDialog_1 = require("./BottomSheetDialog.cjs");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BottomSheetDialog_1).default; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":";;;;;;AAAA,6DAA8C;AAArC,6HAAA,OAAO,OAAA","sourcesContent":["export { default } from './BottomSheetDialog';\nexport type {\n  BottomSheetDialogProps,\n  BottomSheetDialogRef,\n} from './BottomSheetDialog.types';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gCAA4B;AAC9C,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,sCAAkC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gCAA4B;AAC9C,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,sCAAkC"}

package/dist/components/BottomSheetDialog/index.mjs

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

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

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

package/dist/components/ButtonBase/ButtonBase.cjs

@@ -31,7 +31,6 @@ const types_1 = require("../../types/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const ButtonAnimated_1 = require("../temp-components/ButtonAnimated/index.cjs");
 const Spinner_1 = require("../temp-components/Spinner/index.cjs");
-const TextOrChildren_1 = require("../temp-components/TextOrChildren/TextOrChildren.cjs");
 const Text_1 = require("../Text/index.cjs");
 const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
 const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
@@ -118,15 +117,9 @@ const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isL
                 {startAccessory}
               </react_native_1.View>))}
 
-          {typeof children === 'string' ? (<TextOrChildren_1.TextOrChildren textProps={{
-                    variant: Text_1.TextVariant.BodyMd,
-                    fontWeight: Text_1.FontWeight.Medium,
-                    color: Text_1.TextColor.TextDefault,
-                    twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
-                    ...textProps,
-                }}>
+          {typeof children === 'string' ? (<Text_1.Text variant={Text_1.TextVariant.BodyMd} fontWeight={Text_1.FontWeight.Medium} color={Text_1.TextColor.TextDefault} {...textProps} twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}>
               {children}
-            </TextOrChildren_1.TextOrChildren>) : (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>{children}</react_native_1.View>)}
+            </Text_1.Text>) : (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>{children}</react_native_1.View>)}
 
           {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>
                 {endAccessory}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAuC;AACvC,wDAAoC;AAGpC,iDAA6C;AAC7C,4CAAoD;AACpD,gFAAmE;AACnE,kEAAqD;AACrD,yFAAkF;AAClF,4CAA6D;AAE7D,qEAA8E;AAGvE,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAAG,QAAQ,EAC5B,oBAAoB,EACpB,qBAAqB,EACrB,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,+CAA+C;IAC/C,MAAM,uBAAuB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3C,IAAI,kBAAkB,EAAE;YACtB,OAAO,kBAAkB,CAAC;SAC3B;QAED,6DAA6D;QAC7D,IAAI,SAAS,IAAI,WAAW,EAAE;YAC5B,OAAO,WAAW,CAAC;SACpB;QAED,+CAA+C;QAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,OAAO,QAAQ,CAAC;SACjB;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3D,gEAAgE;IAChE,MAAM,sBAAsB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1C,IAAI,iBAAiB,EAAE;YACrB,OAAO,iBAAiB,CAAC;SAC1B;QAED,IAAI,SAAS,EAAE;YACb,OAAO,0CAA0C,CAAC;SACnD;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,2DAA2D;IAC3D,MAAM,kBAAkB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACtC,MAAM,KAAK,GAA2C,EAAE,CAAC;QAEzD,IAAI,UAAU,IAAI,SAAS,EAAE;YAC3B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;SACvB;QAED,IAAI,SAAS,EAAE;YACb,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAClC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,uBAAuB,CAAC,CAC5C,iBAAiB,CAAC,CAAC,sBAAsB,CAAC,CAC1C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,+CAA+C;YAC/C,MAAM,eAAe,GACnB,OAAO,WAAW,KAAK,UAAU;gBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;gBACtB,CAAC,CAAC,WAAW,CAAC;YAElB,gCAAgC;YAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK;YAC3B,kDAAkD;YAClD,8CAA8C;YAC9C,iBAAiB;YACjB,uDAAuD;YACvD,OAAO;YACP,2DAAoC,CAAC,IAAI,CAAC;YAC1C,sBAAsB;YACtB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;YACzC,mEAAmE;YACnE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;YACrC,iBAAiB;YACjB,eAAe,CAChB,CAAC;YAEF,2CAA2C;YAC3C,MAAM,aAAa,GAA2B,CAAC,YAAY,CAAC,CAAC;YAE7D,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACrC;YAED,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;UAAA,CAAC,6BAA6B,CAC9B;UAAA,CAAC,SAAS,IAAI,CACZ,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CACb,mDAAmD,CACpD,CAAC,CACF,MAAM,CAAC,mBAAmB,CAE1B;cAAA,CAAC,iBAAO,CACN,KAAK,CAAC,CACJ,aAAa;oBACX,CAAC,CAAE,aAAa,CAAC,OAAO,CAAe;oBACvC,CAAC,CAAC,gBAAS,CAAC,WAAW,CAC1B,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC;oBAChB,aAAa,EAAE,CAAC;oBAChB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;oBACxD,GAAG,YAAY,EAAE,gBAAgB;iBAClC,CAAC,CACF,IAAI,YAAY,CAAC,EAErB;YAAA,EAAE,mBAAI,CAAC,CACR,CAED;;UAAA,CAAC,oEAAoE,CACrE;UAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvG,IAAI,cAAc,CAAC,EACnB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,IAAI,CAChB,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAC9C;gBAAA,CAAC,cAAc,CACjB;cAAA,EAAE,mBAAI,CAAC,CACR,CACF,CAED;;UAAA,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gBAAS,CAAC,WAAW;oBAC5B,WAAW,EAAE,uCAAuC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oBACjI,GAAG,SAAS;iBACb,CAAC,CAEF;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,+BAAc,CAAC,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAAC,CACnE,CAED;;UAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAClB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACvG,IAAI,YAAY,CAAC,EACjB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,IAAI,CACd,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAC9C;gBAAA,CAAC,YAAY,CACf;cAAA,EAAE,mBAAI,CAAC,CACR,CACF,CACH;QAAA,GAAG,CACJ,CACH;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1MW,QAAA,UAAU,cA0MrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center gap-x-2',\n          // Visual styling\n          'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          {/* Loading spinner overlay */}\n          {isLoading && (\n            <View\n              style={tw.style(\n                'absolute inset-0 flex items-center justify-center',\n              )}\n              testID=\"spinner-container\"\n            >\n              <Spinner\n                color={\n                  textClassName\n                    ? (textClassName(pressed) as IconColor)\n                    : IconColor.IconDefault\n                }\n                loadingText={loadingText}\n                loadingTextProps={{\n                  numberOfLines: 1,\n                  twClassName: textClassName ? textClassName(pressed) : '',\n                  ...spinnerProps?.loadingTextProps,\n                }}\n                {...spinnerProps}\n              />\n            </View>\n          )}\n\n          {/* Button content - opacity controlled individually on each child */}\n          {finalStartIconName ? (\n            <Icon\n              name={finalStartIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...startIconProps}\n            />\n          ) : (\n            startAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {startAccessory}\n              </View>\n            )\n          )}\n\n          {typeof children === 'string' ? (\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n                ...textProps,\n              }}\n            >\n              {children}\n            </TextOrChildren>\n          ) : (\n            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>\n          )}\n\n          {finalEndIconName ? (\n            <Icon\n              name={finalEndIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...endIconProps}\n            />\n          ) : (\n            endAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {endAccessory}\n              </View>\n            )\n          )}\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { Text, TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center gap-x-2',\n          // Visual styling\n          'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => (\n        <>\n          {/* Loading spinner overlay */}\n          {isLoading && (\n            <View\n              style={tw.style(\n                'absolute inset-0 flex items-center justify-center',\n              )}\n              testID=\"spinner-container\"\n            >\n              <Spinner\n                color={\n                  textClassName\n                    ? (textClassName(pressed) as IconColor)\n                    : IconColor.IconDefault\n                }\n                loadingText={loadingText}\n                loadingTextProps={{\n                  numberOfLines: 1,\n                  twClassName: textClassName ? textClassName(pressed) : '',\n                  ...spinnerProps?.loadingTextProps,\n                }}\n                {...spinnerProps}\n              />\n            </View>\n          )}\n\n          {/* Button content - opacity controlled individually on each child */}\n          {finalStartIconName ? (\n            <Icon\n              name={finalStartIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...startIconProps}\n            />\n          ) : (\n            startAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {startAccessory}\n              </View>\n            )\n          )}\n\n          {typeof children === 'string' ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextDefault}\n              {...textProps}\n              twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}\n            >\n              {children}\n            </Text>\n          ) : (\n            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>\n          )}\n\n          {finalEndIconName ? (\n            <Icon\n              name={finalEndIconName}\n              size={IconSize.Sm}\n              twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n              {...endIconProps}\n            />\n          ) : (\n            endAccessory && (\n              <View style={tw.style(isLoading && 'opacity-0')}>\n                {endAccessory}\n              </View>\n            )\n          )}\n        </>\n      )}\n    </ButtonAnimated>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBAiLjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAWvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBAiLjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAWvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA+KjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -12,8 +12,7 @@ import { ButtonBaseSize } from "../../types/index.mjs";
 import { Icon, IconColor, IconSize } from "../Icon/index.mjs";
 import { ButtonAnimated } from "../temp-components/ButtonAnimated/index.mjs";
 import { Spinner } from "../temp-components/Spinner/index.mjs";
-import { TextOrChildren } from "../temp-components/TextOrChildren/TextOrChildren.mjs";
-import { TextVariant, FontWeight, TextColor } from "../Text/index.mjs";
+import { Text, TextVariant, FontWeight, TextColor } from "../Text/index.mjs";
 import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
 export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLoading, loadingText, spinnerProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, isDisabled, isFullWidth, twClassName, textClassName, iconClassName, style, accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityActions, onAccessibilityAction, ...props }) => {
     const tw = useTailwind();
@@ -99,15 +98,9 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
                 {startAccessory}
               </View>))}
 
-          {typeof children === 'string' ? (<TextOrChildren textProps={{
-                    variant: TextVariant.BodyMd,
-                    fontWeight: FontWeight.Medium,
-                    color: TextColor.TextDefault,
-                    twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
-                    ...textProps,
-                }}>
+          {typeof children === 'string' ? (<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} color={TextColor.TextDefault} {...textProps} twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}>
               {children}
-            </TextOrChildren>) : (<View style={tw.style(isLoading && 'opacity-0')}>{children}</View>)}
+            </Text>) : (<View style={tw.style(isLoading && 'opacity-0')}>{children}</View>)}
 
           {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
                 {endAccessory}