@metamask-previews/design-system-react-native 0.11.0-preview.fa05289 → 0.13.0-preview.b4e6ece

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport {\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"]}
+{"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"]}

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

@@ -1 +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"]}
+{"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';\nimport type { PanGestureHandlerProps } from 'react-native-gesture-handler';\n\ntype BottomSheetDialogPanGestureHandlerProps = Omit<\n  PanGestureHandlerProps,\n  'enabled' | 'onGestureEvent'\n>;\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   * Optional props object passed directly to the child PanGestureHandler.\n   */\n  panGestureHandlerProps?: BottomSheetDialogPanGestureHandlerProps;\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

@@ -1,4 +1,6 @@
 import type { ViewProps } from "react-native/index.js";
+import type { PanGestureHandlerProps } from "react-native-gesture-handler";
+type BottomSheetDialogPanGestureHandlerProps = Omit<PanGestureHandlerProps, 'enabled' | 'onGestureEvent'>;
 /**
  * BottomSheetDialog component props.
  */
@@ -35,6 +37,10 @@ export type BottomSheetDialogProps = {
      * Optional callback that gets triggered when the sheet is opened.
      */
     onOpen?: (hasPendingAction?: boolean) => void;
+    /**
+     * Optional props object passed directly to the child PanGestureHandler.
+     */
+    panGestureHandlerProps?: BottomSheetDialogPanGestureHandlerProps;
     /**
      * Tailwind CSS classes for the dialog container.
      */
@@ -53,4 +59,5 @@ export type BottomSheetDialogRef = {
      */
     onOpenDialog: (callback?: () => void) => void;
 };
+export {};
 //# sourceMappingURL=BottomSheetDialog.types.d.cts.map

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

@@ -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;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"}
+{"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

@@ -1,4 +1,6 @@
 import type { ViewProps } from "react-native/index.js";
+import type { PanGestureHandlerProps } from "react-native-gesture-handler";
+type BottomSheetDialogPanGestureHandlerProps = Omit<PanGestureHandlerProps, 'enabled' | 'onGestureEvent'>;
 /**
  * BottomSheetDialog component props.
  */
@@ -35,6 +37,10 @@ export type BottomSheetDialogProps = {
      * Optional callback that gets triggered when the sheet is opened.
      */
     onOpen?: (hasPendingAction?: boolean) => void;
+    /**
+     * Optional props object passed directly to the child PanGestureHandler.
+     */
+    panGestureHandlerProps?: BottomSheetDialogPanGestureHandlerProps;
     /**
      * Tailwind CSS classes for the dialog container.
      */
@@ -53,4 +59,5 @@ export type BottomSheetDialogRef = {
      */
     onOpenDialog: (callback?: () => void) => void;
 };
+export {};
 //# sourceMappingURL=BottomSheetDialog.types.d.mts.map

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

@@ -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;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"}
+{"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/BottomSheetDialog/BottomSheetDialog.types.mjs.map

@@ -1 +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"]}
+{"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';\nimport type { PanGestureHandlerProps } from 'react-native-gesture-handler';\n\ntype BottomSheetDialogPanGestureHandlerProps = Omit<\n  PanGestureHandlerProps,\n  'enabled' | 'onGestureEvent'\n>;\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   * Optional props object passed directly to the child PanGestureHandler.\n   */\n  panGestureHandlerProps?: BottomSheetDialogPanGestureHandlerProps;\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

@@ -1,9 +1,6 @@
 "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;
+exports.BottomSheetDialog = void 0;
 var BottomSheetDialog_1 = require("./BottomSheetDialog.cjs");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BottomSheetDialog_1).default; } });
+Object.defineProperty(exports, "BottomSheetDialog", { enumerable: true, get: function () { return BottomSheetDialog_1.BottomSheetDialog; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":";;;AAAA,6DAAwD;AAA/C,sHAAA,iBAAiB,OAAA","sourcesContent":["export { BottomSheetDialog } from './BottomSheetDialog';\nexport type {\n  BottomSheetDialogProps,\n  BottomSheetDialogRef,\n} from './BottomSheetDialog.types';\n"]}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gCAA4B;AACxD,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,sCAAkC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gCAA4B;AACxD,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,sCAAkC"}

package/dist/components/BottomSheetDialog/index.mjs

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

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

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

package/dist/components/BottomSheetHeader/BottomSheetHeader.cjs

@@ -16,8 +16,8 @@ const BottomSheetHeader_constants_1 = require("./BottomSheetHeader.constants.cjs
 const BottomSheetHeader_types_1 = require("./BottomSheetHeader.types.cjs");
 const BottomSheetHeader = ({ style, twClassName, children, onBack, backButtonProps, onClose, closeButtonProps, variant = BottomSheetHeader_types_1.BottomSheetHeaderVariant.Compact, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const startAccessory = onBack ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.ArrowLeft} onPress={onBack} size={ButtonIcon_1.ButtonIconSize.Lg} {...backButtonProps}/>) : undefined;
-    const endAccessory = onClose ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.Close} onPress={onClose} size={ButtonIcon_1.ButtonIconSize.Lg} {...closeButtonProps}/>) : undefined;
+    const startAccessory = onBack ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.ArrowLeft} onPress={onBack} size={ButtonIcon_1.ButtonIconSize.Md} {...backButtonProps}/>) : undefined;
+    const endAccessory = onClose ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.Close} onPress={onClose} size={ButtonIcon_1.ButtonIconSize.Md} {...closeButtonProps}/>) : undefined;
     const headerBaseVariant = BottomSheetHeader_constants_1.BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];
     return (<HeaderBase_1.HeaderBase {...props} style={[tw.style('px-4', twClassName), style]} startAccessory={startAccessory} endAccessory={endAccessory} variant={headerBaseVariant}>
       {children}

package/dist/components/BottomSheetHeader/BottomSheetHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHeader.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAE1B,yBAAyB;AACzB,wDAA2D;AAC3D,wDAA2C;AAC3C,4CAAmC;AAEnC,yBAAyB;AACzB,mFAAgF;AAEhF,2EAAqE;AAE9D,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,OAAO,GAAG,kDAAwB,CAAC,OAAO,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,iBAAiB,GAAG,6DAA+B,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,iBAAiB,qBA4C5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\n// Internal dependencies.\nimport { BOTTOM_SHEET_HEADER_VARIANT_MAP } from './BottomSheetHeader.constants';\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n  style,\n  twClassName,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  variant = BottomSheetHeaderVariant.Compact,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const startAccessory = onBack ? (\n    <ButtonIcon\n      iconName={IconName.ArrowLeft}\n      onPress={onBack}\n      size={ButtonIconSize.Lg}\n      {...backButtonProps}\n    />\n  ) : undefined;\n\n  const endAccessory = onClose ? (\n    <ButtonIcon\n      iconName={IconName.Close}\n      onPress={onClose}\n      size={ButtonIconSize.Lg}\n      {...closeButtonProps}\n    />\n  ) : undefined;\n\n  const headerBaseVariant = BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];\n\n  return (\n    <HeaderBase\n      {...props}\n      style={[tw.style('px-4', twClassName), style]}\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      variant={headerBaseVariant}\n    >\n      {children}\n    </HeaderBase>\n  );\n};\n"]}
+{"version":3,"file":"BottomSheetHeader.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAE1B,yBAAyB;AACzB,wDAA2D;AAC3D,wDAA2C;AAC3C,4CAAmC;AAEnC,yBAAyB;AACzB,mFAAgF;AAEhF,2EAAqE;AAE9D,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,OAAO,GAAG,kDAAwB,CAAC,OAAO,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,iBAAiB,GAAG,6DAA+B,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,iBAAiB,qBA4C5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\n// Internal dependencies.\nimport { BOTTOM_SHEET_HEADER_VARIANT_MAP } from './BottomSheetHeader.constants';\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n  style,\n  twClassName,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  variant = BottomSheetHeaderVariant.Compact,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const startAccessory = onBack ? (\n    <ButtonIcon\n      iconName={IconName.ArrowLeft}\n      onPress={onBack}\n      size={ButtonIconSize.Md}\n      {...backButtonProps}\n    />\n  ) : undefined;\n\n  const endAccessory = onClose ? (\n    <ButtonIcon\n      iconName={IconName.Close}\n      onPress={onClose}\n      size={ButtonIconSize.Md}\n      {...closeButtonProps}\n    />\n  ) : undefined;\n\n  const headerBaseVariant = BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];\n\n  return (\n    <HeaderBase\n      {...props}\n      style={[tw.style('px-4', twClassName), style]}\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      variant={headerBaseVariant}\n    >\n      {children}\n    </HeaderBase>\n  );\n};\n"]}

package/dist/components/BottomSheetHeader/BottomSheetHeader.mjs

@@ -17,8 +17,8 @@ import { BOTTOM_SHEET_HEADER_VARIANT_MAP } from "./BottomSheetHeader.constants.m
 import { BottomSheetHeaderVariant } from "./BottomSheetHeader.types.mjs";
 export const BottomSheetHeader = ({ style, twClassName, children, onBack, backButtonProps, onClose, closeButtonProps, variant = BottomSheetHeaderVariant.Compact, ...props }) => {
     const tw = useTailwind();
-    const startAccessory = onBack ? (<ButtonIcon iconName={IconName.ArrowLeft} onPress={onBack} size={ButtonIconSize.Lg} {...backButtonProps}/>) : undefined;
-    const endAccessory = onClose ? (<ButtonIcon iconName={IconName.Close} onPress={onClose} size={ButtonIconSize.Lg} {...closeButtonProps}/>) : undefined;
+    const startAccessory = onBack ? (<ButtonIcon iconName={IconName.ArrowLeft} onPress={onBack} size={ButtonIconSize.Md} {...backButtonProps}/>) : undefined;
+    const endAccessory = onClose ? (<ButtonIcon iconName={IconName.Close} onPress={onClose} size={ButtonIconSize.Md} {...closeButtonProps}/>) : undefined;
     const headerBaseVariant = BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];
     return (<HeaderBase {...props} style={[tw.style('px-4', twClassName), style]} startAccessory={startAccessory} endAccessory={endAccessory} variant={headerBaseVariant}>
       {children}

package/dist/components/BottomSheetHeader/BottomSheetHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetHeader.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,yBAAyB;AACzB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,yBAAyB;AACzB,OAAO,EAAE,+BAA+B,EAAE,0CAAsC;AAEhF,OAAO,EAAE,wBAAwB,EAAE,sCAAkC;AAErE,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,OAAO,GAAG,wBAAwB,CAAC,OAAO,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,iBAAiB,GAAG,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,CAAC,UAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\n// Internal dependencies.\nimport { BOTTOM_SHEET_HEADER_VARIANT_MAP } from './BottomSheetHeader.constants';\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n  style,\n  twClassName,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  variant = BottomSheetHeaderVariant.Compact,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const startAccessory = onBack ? (\n    <ButtonIcon\n      iconName={IconName.ArrowLeft}\n      onPress={onBack}\n      size={ButtonIconSize.Lg}\n      {...backButtonProps}\n    />\n  ) : undefined;\n\n  const endAccessory = onClose ? (\n    <ButtonIcon\n      iconName={IconName.Close}\n      onPress={onClose}\n      size={ButtonIconSize.Lg}\n      {...closeButtonProps}\n    />\n  ) : undefined;\n\n  const headerBaseVariant = BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];\n\n  return (\n    <HeaderBase\n      {...props}\n      style={[tw.style('px-4', twClassName), style]}\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      variant={headerBaseVariant}\n    >\n      {children}\n    </HeaderBase>\n  );\n};\n"]}
+{"version":3,"file":"BottomSheetHeader.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,yBAAyB;AACzB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,yBAAyB;AACzB,OAAO,EAAE,+BAA+B,EAAE,0CAAsC;AAEhF,OAAO,EAAE,wBAAwB,EAAE,sCAAkC;AAErE,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,OAAO,GAAG,wBAAwB,CAAC,OAAO,EAC1C,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,iBAAiB,GAAG,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,CAAC,UAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\n// Internal dependencies.\nimport { BOTTOM_SHEET_HEADER_VARIANT_MAP } from './BottomSheetHeader.constants';\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\nimport { BottomSheetHeaderVariant } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n  style,\n  twClassName,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  variant = BottomSheetHeaderVariant.Compact,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const startAccessory = onBack ? (\n    <ButtonIcon\n      iconName={IconName.ArrowLeft}\n      onPress={onBack}\n      size={ButtonIconSize.Md}\n      {...backButtonProps}\n    />\n  ) : undefined;\n\n  const endAccessory = onClose ? (\n    <ButtonIcon\n      iconName={IconName.Close}\n      onPress={onClose}\n      size={ButtonIconSize.Md}\n      {...closeButtonProps}\n    />\n  ) : undefined;\n\n  const headerBaseVariant = BOTTOM_SHEET_HEADER_VARIANT_MAP[variant];\n\n  return (\n    <HeaderBase\n      {...props}\n      style={[tw.style('px-4', twClassName), style]}\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      variant={headerBaseVariant}\n    >\n      {children}\n    </HeaderBase>\n  );\n};\n"]}

package/dist/components/BoxHorizontal/BoxHorizontal.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxHorizontal = void 0;
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../types/index.cjs");
+const Box_1 = require("../Box/index.cjs");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+const BoxHorizontal = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Row} alignItems={types_1.BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
+    {startAccessory}
+    <TextOrChildren_1.TextOrChildren textProps={textProps}>{children}</TextOrChildren_1.TextOrChildren>
+    {endAccessory}
+  </Box_1.Box>);
+exports.BoxHorizontal = BoxHorizontal;
+exports.BoxHorizontal.displayName = 'BoxHorizontal';
+//# sourceMappingURL=BoxHorizontal.cjs.map

package/dist/components/BoxHorizontal/BoxHorizontal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.cjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA8D;AAC9D,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,wBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,qBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,cAAc,CACf;IAAA,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,+BAAc,CAChE;IAAA,CAAC,YAAY,CACf;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AAnBW,QAAA,aAAa,iBAmBxB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxAlignItems, BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Row}\n    alignItems={BoxAlignItems.Center}\n    gap={1}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {startAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {endAccessory}\n  </Box>\n);\n\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}

package/dist/components/BoxHorizontal/BoxHorizontal.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxHorizontalProps } from "./BoxHorizontal.types.cjs";
+export declare const BoxHorizontal: {
+    ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }: BoxHorizontalProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxHorizontal.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.d.cts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}

package/dist/components/BoxHorizontal/BoxHorizontal.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxHorizontalProps } from "./BoxHorizontal.types.mjs";
+export declare const BoxHorizontal: {
+    ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }: BoxHorizontalProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxHorizontal.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.d.mts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}

package/dist/components/BoxHorizontal/BoxHorizontal.mjs

@@ -0,0 +1,18 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { BoxAlignItems, BoxFlexDirection } from "../../types/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
+export const BoxHorizontal = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
+    {startAccessory}
+    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>
+    {endAccessory}
+  </Box>);
+BoxHorizontal.displayName = 'BoxHorizontal';
+//# sourceMappingURL=BoxHorizontal.mjs.map

package/dist/components/BoxHorizontal/BoxHorizontal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.mjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,8BAAoB;AAC9D,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,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,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,cAAc,CACf;IAAA,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,CAChE;IAAA,CAAC,YAAY,CACf;EAAA,EAAE,GAAG,CAAC,CACP,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxAlignItems, BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Row}\n    alignItems={BoxAlignItems.Center}\n    gap={1}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {startAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {endAccessory}\n  </Box>\n);\n\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}

package/dist/components/BoxHorizontal/BoxHorizontal.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.types.cjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxHorizontalPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxHorizontal component props.\n */\nexport type BoxHorizontalProps = BoxHorizontalPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}

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

@@ -0,0 +1,13 @@
+import type { BoxHorizontalPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * BoxHorizontal component props.
+ */
+export type BoxHorizontalProps = BoxHorizontalPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxHorizontal.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.types.d.cts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AAExF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}

package/dist/components/BoxHorizontal/BoxHorizontal.types.d.mts

@@ -0,0 +1,13 @@
+import type { BoxHorizontalPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * BoxHorizontal component props.
+ */
+export type BoxHorizontalProps = BoxHorizontalPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxHorizontal.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.types.d.mts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AAExF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}

package/dist/components/BoxHorizontal/BoxHorizontal.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxHorizontal.types.mjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxHorizontalPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxHorizontal component props.\n */\nexport type BoxHorizontalProps = BoxHorizontalPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}

package/dist/components/BoxHorizontal/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxHorizontal = void 0;
+var BoxHorizontal_1 = require("./BoxHorizontal.cjs");
+Object.defineProperty(exports, "BoxHorizontal", { enumerable: true, get: function () { return BoxHorizontal_1.BoxHorizontal; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/index.ts"],"names":[],"mappings":";;;AAAA,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { BoxHorizontal } from './BoxHorizontal';\nexport type { BoxHorizontalProps } from './BoxHorizontal.types';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/BoxHorizontal/index.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { BoxHorizontal } from './BoxHorizontal';\nexport type { BoxHorizontalProps } from './BoxHorizontal.types';\n"]}

package/dist/components/BoxVertical/BoxVertical.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxVertical = void 0;
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../types/index.cjs");
+const Box_1 = require("../Box/index.cjs");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+const BoxVertical = ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Column} twClassName={twClassName} {...rest}>
+    {topAccessory}
+    <TextOrChildren_1.TextOrChildren textProps={textProps}>{children}</TextOrChildren_1.TextOrChildren>
+    {bottomAccessory}
+  </Box_1.Box>);
+exports.BoxVertical = BoxVertical;
+exports.BoxVertical.displayName = 'BoxVertical';
+//# sourceMappingURL=BoxVertical.cjs.map

package/dist/components/BoxVertical/BoxVertical.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.cjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA+C;AAC/C,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,wBAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,+BAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AAjBW,QAAA,WAAW,eAiBtB;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}

package/dist/components/BoxVertical/BoxVertical.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxVerticalProps } from "./BoxVertical.types.cjs";
+export declare const BoxVertical: {
+    ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }: BoxVerticalProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxVertical.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.d.cts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}

package/dist/components/BoxVertical/BoxVertical.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxVerticalProps } from "./BoxVertical.types.mjs";
+export declare const BoxVertical: {
+    ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }: BoxVerticalProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxVertical.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.d.mts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}

package/dist/components/BoxVertical/BoxVertical.mjs

@@ -0,0 +1,18 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { BoxFlexDirection } from "../../types/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
+export const BoxVertical = ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }) => (<Box flexDirection={BoxFlexDirection.Column} twClassName={twClassName} {...rest}>
+    {topAccessory}
+    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>
+    {bottomAccessory}
+  </Box>);
+BoxVertical.displayName = 'BoxVertical';
+//# sourceMappingURL=BoxVertical.mjs.map

package/dist/components/BoxVertical/BoxVertical.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.mjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,gBAAgB,EAAE,8BAAoB;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,GAAG,CAAC,CACP,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}

package/dist/components/BoxVertical/BoxVertical.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.types.cjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxVerticalPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxVertical component props.\n */\nexport type BoxVerticalProps = BoxVerticalPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}

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

@@ -0,0 +1,13 @@
+import type { BoxVerticalPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * BoxVertical component props.
+ */
+export type BoxVerticalProps = BoxVerticalPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxVertical.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.types.d.cts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AAEtF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}

package/dist/components/BoxVertical/BoxVertical.types.d.mts

@@ -0,0 +1,13 @@
+import type { BoxVerticalPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * BoxVertical component props.
+ */
+export type BoxVerticalProps = BoxVerticalPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxVertical.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxVertical.types.d.mts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AAEtF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}