@butternutbox/pawprint-native 0.17.0 → 0.18.0

package/dist/index.d.cts

@@ -949,6 +949,16 @@ type DrawerRootOwnProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the drawer shows a dimming backdrop and presents as a blocking
+     * modal (default `true`). Set to `false` for a backdrop-less, pass-through
+     * drawer: it renders inline instead of in a native `Modal`, omits the
+     * overlay, and lets touches outside the panel reach the content behind it
+     * (so e.g. a calendar stays interactive while the sheet is open). In this
+     * mode the root fills the screen with `pointerEvents="box-none"` so the
+     * panel's bottom-anchored positioning still resolves against the full screen.
+     */
+    backdrop?: boolean;
     children: React.ReactNode;
 };
 type DrawerProps = DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps>;
@@ -959,6 +969,15 @@ type DrawerPortalProps = {
     children: React.ReactNode;
     topContent?: React.ReactNode;
 };
+type DrawerOverlayProviderProps = {
+    /**
+     * Component rendered on top of every modal drawer, inside the drawer's native
+     * Modal window (e.g. an app's toast/notification stack). Pass `null` to render
+     * nothing extra.
+     */
+    component: React.ComponentType | null;
+    children: React.ReactNode;
+};
 declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>> & {
     Root: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>>;
     Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<View>>;
@@ -966,6 +985,10 @@ declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<
         ({ children, topContent }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
+    OverlayProvider: {
+        ({ component, children }: DrawerOverlayProviderProps): React.ReactElement;
+        displayName: string;
+    };
     Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<View>>;
     Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<View>>;
     Grabber: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<View>>;
@@ -2432,4 +2455,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
 };
 declare const TabNavigation: TabNavigationComponent;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.d.ts

@@ -949,6 +949,16 @@ type DrawerRootOwnProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the drawer shows a dimming backdrop and presents as a blocking
+     * modal (default `true`). Set to `false` for a backdrop-less, pass-through
+     * drawer: it renders inline instead of in a native `Modal`, omits the
+     * overlay, and lets touches outside the panel reach the content behind it
+     * (so e.g. a calendar stays interactive while the sheet is open). In this
+     * mode the root fills the screen with `pointerEvents="box-none"` so the
+     * panel's bottom-anchored positioning still resolves against the full screen.
+     */
+    backdrop?: boolean;
     children: React.ReactNode;
 };
 type DrawerProps = DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps>;
@@ -959,6 +969,15 @@ type DrawerPortalProps = {
     children: React.ReactNode;
     topContent?: React.ReactNode;
 };
+type DrawerOverlayProviderProps = {
+    /**
+     * Component rendered on top of every modal drawer, inside the drawer's native
+     * Modal window (e.g. an app's toast/notification stack). Pass `null` to render
+     * nothing extra.
+     */
+    component: React.ComponentType | null;
+    children: React.ReactNode;
+};
 declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>> & {
     Root: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<ViewProps, keyof DrawerRootOwnProps> & React.RefAttributes<View>>;
     Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<View>>;
@@ -966,6 +985,10 @@ declare const Drawer: React.ForwardRefExoticComponent<DrawerRootOwnProps & Omit<
         ({ children, topContent }: DrawerPortalProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
+    OverlayProvider: {
+        ({ component, children }: DrawerOverlayProviderProps): React.ReactElement;
+        displayName: string;
+    };
     Overlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<View>>;
     Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<View>>;
     Grabber: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<View>>;
@@ -2432,4 +2455,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
 };
 declare const TabNavigation: TabNavigationComponent;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
+export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };

package/dist/index.js

@@ -5600,6 +5600,7 @@ Animated5.displayName = "Animated";
 var DrawerContext = React66.createContext({
   isOpen: false,
   modalVisible: false,
+  backdrop: true,
   openDrawer: () => {
   },
   closeDrawer: () => {
@@ -5608,10 +5609,12 @@ var DrawerContext = React66.createContext({
   }
 });
 var useDrawerContext = () => React66.useContext(DrawerContext);
+var DrawerOverlayContext = createContext(null);
+var useDrawerOverlay = () => useContext(DrawerOverlayContext);
 var FADE_DURATION = 220;
 var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
   const theme2 = useTheme();
-  const { isOpen, closeDrawer } = useDrawerContext();
+  const { isOpen, closeDrawer, backdrop } = useDrawerContext();
   const opacity = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     Animated.timing(opacity, {
@@ -5620,6 +5623,7 @@ var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
       useNativeDriver: true
     }).start();
   }, [isOpen, opacity]);
+  if (!backdrop) return null;
   return /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -5647,6 +5651,8 @@ var DrawerDragContext = React66.createContext(null);
 var useDrawerDragContext = () => React66.useContext(DrawerDragContext);
 var DrawerMeasureContext = createContext(null);
 var useDrawerMeasureContext = () => useContext(DrawerMeasureContext);
+var DrawerBodyMaxContext = createContext(null);
+var useDrawerBodyMax = () => useContext(DrawerBodyMaxContext);
 var DrawerFooterContext = React66.createContext(false);
 var useDrawerFooterContext = () => React66.useContext(DrawerFooterContext);
 var DrawerHeaderContext = React66.createContext(null);
@@ -5660,17 +5666,17 @@ var StyledPanel2 = styled51(View)(
     panelBorderRadius,
     panelBgColor,
     panelMaxWidth,
+    panelMaxHeight,
     panelBorderWidth,
     panelBorderColor,
     panelShadowColor,
     panelShadowOffsetY,
-    panelShadowBlur,
-    panelFlex
-  }) => __spreadProps(__spreadValues({
+    panelShadowBlur
+  }) => ({
     width: "100%",
     maxWidth: panelMaxWidth,
-    alignSelf: "center"
-  }, panelFlex != null ? { flex: panelFlex } : void 0), {
+    maxHeight: panelMaxHeight,
+    alignSelf: "center",
     borderTopLeftRadius: panelBorderRadius,
     borderTopRightRadius: panelBorderRadius,
     borderTopWidth: panelBorderWidth,
@@ -5696,7 +5702,8 @@ var DrawerContent = React66.forwardRef(
     const { isOpen, closeDrawer, onExitComplete } = useDrawerContext();
     const { height: windowHeight } = useWindowDimensions();
     const maxHeight = windowHeight * 0.9;
-    const bodyMaxHeight = windowHeight - 300;
+    const topBorder = parseTokenValue23(dimensions3.borderWidth.sm);
+    const noFooterBodyPadding = parseTokenValue23(dimensions3.spacing["2xl"]);
     const closeDrawerRef = useRef(closeDrawer);
     useEffect(() => {
       closeDrawerRef.current = closeDrawer;
@@ -5707,10 +5714,12 @@ var DrawerContent = React66.forwardRef(
     const entryRanRef = useRef(false);
     const isOpenRef = useRef(isOpen);
     const activeAnim = useRef(null);
-    const [panelHeight, setPanelHeight] = useState(0);
-    const chromeRef = useRef(0);
-    const bodyContentRef = useRef(0);
-    const firstNaturalRef = useRef(0);
+    const [bodyMax, setBodyMax] = useState(null);
+    const bodyMaxRef = useRef(null);
+    const headerHeightRef = useRef(0);
+    const footerHeightRef = useRef(0);
+    const hasHeaderRef = useRef(false);
+    const hasFooterRef = useRef(false);
     useEffect(() => {
       const id = translateY.addListener(({ value }) => {
         translateYValue.current = value;
@@ -5718,8 +5727,7 @@ var DrawerContent = React66.forwardRef(
       return () => translateY.removeListener(id);
     }, [translateY]);
     useEffect(() => {
-      if (panelHeightRef.current > 0 && panelHeightRef.current > maxHeight) {
-        setPanelHeight(maxHeight);
+      if (panelHeightRef.current > maxHeight) {
         panelHeightRef.current = maxHeight;
       }
     }, [maxHeight]);
@@ -5769,59 +5777,56 @@ var DrawerContent = React66.forwardRef(
         runExit();
       }
     }, [isOpen, runEntry, runExit]);
-    const applyRefit = useCallback(() => {
-      const chrome = chromeRef.current;
-      const content = bodyContentRef.current;
-      if (chrome <= 0 || content <= 0) return;
-      const desired = Math.min(
-        chrome + Math.min(content, bodyMaxHeight),
-        maxHeight
-      );
-      if (Math.abs(desired - panelHeightRef.current) > 1) {
-        panelHeightRef.current = desired;
-        setPanelHeight(desired);
+    const measureChrome = useCallback(() => {
+      if (hasHeaderRef.current && headerHeightRef.current <= 0) return 0;
+      if (hasFooterRef.current && footerHeightRef.current <= 0) return 0;
+      const header = hasHeaderRef.current ? headerHeightRef.current : 0;
+      const footer = hasFooterRef.current ? footerHeightRef.current : 0;
+      const bodyBottomPad = hasFooterRef.current ? 0 : noFooterBodyPadding;
+      return header + footer + topBorder + bodyBottomPad;
+    }, [noFooterBodyPadding, topBorder]);
+    const applyBodyMax = useCallback(() => {
+      var _a3;
+      const chrome = measureChrome();
+      if (chrome <= 0) return;
+      const availableBody = Math.max(0, maxHeight - chrome);
+      if (Math.abs(availableBody - ((_a3 = bodyMaxRef.current) != null ? _a3 : -1)) > 1) {
+        bodyMaxRef.current = availableBody;
+        setBodyMax(availableBody);
       }
-    }, [bodyMaxHeight, maxHeight]);
-    const lockChrome = useCallback(() => {
-      if (chromeRef.current > 0) return;
-      const natural = firstNaturalRef.current;
-      const content = bodyContentRef.current;
-      if (natural <= 0 || content <= 0) return;
-      chromeRef.current = natural - Math.min(content, bodyMaxHeight);
-    }, [bodyMaxHeight]);
-    const setBodyContentHeight = useCallback(
+    }, [measureChrome, maxHeight]);
+    const setHeaderHeight = useCallback(
+      (height) => {
+        if (height <= 0 || Math.abs(height - headerHeightRef.current) < 1)
+          return;
+        headerHeightRef.current = height;
+        applyBodyMax();
+      },
+      [applyBodyMax]
+    );
+    const setFooterHeight = useCallback(
       (height) => {
-        if (height <= 0) return;
-        bodyContentRef.current = height;
-        lockChrome();
-        applyRefit();
+        if (height <= 0 || Math.abs(height - footerHeightRef.current) < 1)
+          return;
+        footerHeightRef.current = height;
+        applyBodyMax();
       },
-      [lockChrome, applyRefit]
+      [applyBodyMax]
     );
     const measureContextValue = useMemo(
-      () => ({ setBodyContentHeight }),
-      [setBodyContentHeight]
+      () => ({ setHeaderHeight, setFooterHeight }),
+      [setHeaderHeight, setFooterHeight]
     );
     const onLayout = useCallback(
       ({ nativeEvent }) => {
-        const h = nativeEvent.layout.height;
-        const capped = Math.min(h, maxHeight);
+        const capped = Math.min(nativeEvent.layout.height, maxHeight);
         if (capped <= 0) return;
-        if (entryRanRef.current) return;
-        if (chromeRef.current <= 0) {
-          firstNaturalRef.current = h;
-          lockChrome();
-        }
-        if (capped !== panelHeightRef.current) {
-          panelHeightRef.current = capped;
-          setPanelHeight(capped);
-        }
-        if (isOpenRef.current) {
+        panelHeightRef.current = capped;
+        if (!entryRanRef.current && isOpenRef.current) {
           runEntry();
         }
-        applyRefit();
       },
-      [runEntry, maxHeight, lockChrome, applyRefit]
+      [runEntry, maxHeight]
     );
     const panResponder = useRef(
       PanResponder.create({
@@ -5887,6 +5892,8 @@ var DrawerContent = React66.forwardRef(
     const headerChild = React66.Children.toArray(children).find(
       (child) => React66.isValidElement(child) && child.type.displayName === "Drawer.Header"
     );
+    hasHeaderRef.current = headerChild != null;
+    hasFooterRef.current = hasFooter;
     const headerContextValue = headerChild != null ? {
       variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
     } : null;
@@ -5895,7 +5902,6 @@ var DrawerContent = React66.forwardRef(
       {
         style: [
           styles.animatedWrapper,
-          panelHeight > 0 ? { height: panelHeight } : void 0,
           { transform: [{ translateY }] }
         ],
         children: /* @__PURE__ */ jsx(
@@ -5906,7 +5912,7 @@ var DrawerContent = React66.forwardRef(
             panelBorderRadius: parseTokenValue23(drawer.borderRadius.top),
             panelBgColor: colour.background.container.default,
             panelMaxWidth: parseTokenValue23(drawer.size.maxWidth),
-            panelFlex: panelHeight > 0 ? 1 : void 0,
+            panelMaxHeight: maxHeight,
             panelBorderWidth: parseTokenValue23(dimensions3.borderWidth.sm),
             panelBorderColor: colour.border.default,
             panelShadowColor: modal.shadow.color,
@@ -5916,7 +5922,7 @@ var DrawerContent = React66.forwardRef(
             accessibilityRole: "none",
             accessibilityViewIsModal: true
           }, props), {
-            children
+            children: /* @__PURE__ */ jsx(DrawerBodyMaxContext.Provider, { value: bodyMax, children })
           })
         )
       }
@@ -6100,12 +6106,20 @@ function splitChildren(children) {
 }
 var DrawerHeader = React66.forwardRef(
   (_a, ref) => {
-    var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
+    var _b = _a, { variant = "titleAndText", imageSource, children, onLayout } = _b, props = __objRest(_b, ["variant", "imageSource", "children", "onLayout"]);
     var _a2, _b2, _c, _d, _e, _f;
     const theme2 = useTheme();
     const { drawer, grabber } = theme2.tokens.components;
     const { colour, dimensions: dimensions3 } = theme2.tokens.semantics;
     const dragContext = useDrawerDragContext();
+    const measureContext = useDrawerMeasureContext();
+    const handleLayout = useCallback(
+      (event) => {
+        measureContext == null ? void 0 : measureContext.setHeaderHeight(event.nativeEvent.layout.height);
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [measureContext, onLayout]
+    );
     const contextValue = useMemo(() => ({ variant }), [variant]);
     const { closeChild, otherChildren } = splitChildren(children);
     const headerSpacing = drawer.spacing.drawerHeader[variant === "image" ? "Image" : variant];
@@ -6157,7 +6171,8 @@ var DrawerHeader = React66.forwardRef(
         headerGap: parseTokenValue26(headerSpacing.gap),
         headerBorderBottomWidth: variant === "titleAndText" ? parseTokenValue26(dimensions3.borderWidth.sm) : void 0,
         headerBorderColor: variant === "titleAndText" ? colour.border.default : void 0,
-        headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0
+        headerBgColor: variant === "fullBleed" ? drawer.drawerHeader.colour.background.fullBleed : void 0,
+        onLayout: handleLayout
       }, props), {
         children: [
           /* @__PURE__ */ jsx(
@@ -6222,40 +6237,35 @@ var StyledScrollView = styled51(ScrollView)(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
-    bodyGap,
     bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
-    flex: 1,
+    // No `flex: 1`: the ScrollView self-sizes to its content (up to
+    // `maxHeight`), so the panel wraps tight around short content and scrolls
+    // only when content exceeds the chrome-aware cap.
+    flexGrow: 0,
+    flexShrink: 1,
     paddingLeft: bodyPaddingHorizontal,
     paddingRight: bodyPaddingRight,
-    gap: bodyGap,
     maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 );
 var DrawerBody = React66.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, contentContainerStyle, onContentSizeChange } = _b, props = __objRest(_b, ["children", "contentContainerStyle", "onContentSizeChange"]);
+    var _b = _a, { children, contentContainerStyle } = _b, props = __objRest(_b, ["children", "contentContainerStyle"]);
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const { buttons } = theme2.tokens.components;
     const { content } = spacing;
     const headerContext = useDrawerHeaderContext();
     const footerContext = useDrawerFooterContext();
-    const measureContext = useDrawerMeasureContext();
+    const providedMaxHeight = useDrawerBodyMax();
     const { height: windowHeight } = useWindowDimensions();
-    const handleContentSizeChange = useCallback(
-      (width, height) => {
-        measureContext == null ? void 0 : measureContext.setBodyContentHeight(height);
-        onContentSizeChange == null ? void 0 : onContentSizeChange(width, height);
-      },
-      [measureContext, onContentSizeChange]
-    );
     const gap = parseTokenValue27(content.slot.gap);
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
-    const bodyMaxHeight = windowHeight - 300;
+    const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
     const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.height) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
     return /* @__PURE__ */ jsx(
@@ -6264,10 +6274,8 @@ var DrawerBody = React66.forwardRef(
         ref,
         bodyPaddingHorizontal: horizontalPadding,
         bodyPaddingRight: paddingRight,
-        bodyGap: gap,
         bodyMaxHeight,
         bodyPaddingBottom,
-        onContentSizeChange: handleContentSizeChange,
         contentContainerStyle: [
           {
             gap,
@@ -6292,10 +6300,18 @@ var StyledFooter = styled51(View)(({ footerPaddingTop, footerPaddingHorizontal,
 }));
 var DrawerFooter = React66.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    var _b = _a, { children, onLayout } = _b, props = __objRest(_b, ["children", "onLayout"]);
     const theme2 = useTheme();
     const { spacing } = theme2.tokens.components.drawer;
     const insets = useSafeAreaInsets();
+    const measureContext = useDrawerMeasureContext();
+    const handleLayout = useCallback(
+      (event) => {
+        measureContext == null ? void 0 : measureContext.setFooterHeight(event.nativeEvent.layout.height);
+        onLayout == null ? void 0 : onLayout(event);
+      },
+      [measureContext, onLayout]
+    );
     return /* @__PURE__ */ jsx(
       StyledFooter,
       __spreadProps(__spreadValues({
@@ -6304,7 +6320,8 @@ var DrawerFooter = React66.forwardRef(
         footerPaddingHorizontal: parseTokenValue28(
           spacing.footer.horizontalPadding
         ),
-        footerPaddingBottom: parseTokenValue28(spacing.bottomPadding) + insets.bottom
+        footerPaddingBottom: parseTokenValue28(spacing.bottomPadding) + insets.bottom,
+        onLayout: handleLayout
       }, props), {
         children
       })
@@ -6318,12 +6335,18 @@ var DrawerRoot = React66.forwardRef(
       open: controlledOpen,
       defaultOpen = false,
       onOpenChange,
-      children
+      backdrop = true,
+      children,
+      style,
+      pointerEvents
     } = _b, rest = __objRest(_b, [
       "open",
       "defaultOpen",
       "onOpenChange",
-      "children"
+      "backdrop",
+      "children",
+      "style",
+      "pointerEvents"
     ]);
     const isControlled = useRef(controlledOpen !== void 0);
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
@@ -6346,10 +6369,26 @@ var DrawerRoot = React66.forwardRef(
       setModalVisible(false);
     }, []);
     const ctx = useMemo(
-      () => ({ isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete }),
-      [isOpen, modalVisible, openDrawer, closeDrawer, onExitComplete]
+      () => ({
+        isOpen,
+        modalVisible,
+        backdrop,
+        openDrawer,
+        closeDrawer,
+        onExitComplete
+      }),
+      [isOpen, modalVisible, backdrop, openDrawer, closeDrawer, onExitComplete]
     );
-    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      View,
+      __spreadProps(__spreadValues({
+        ref,
+        style: backdrop ? style : [StyleSheet.absoluteFill, style],
+        pointerEvents: backdrop ? pointerEvents : pointerEvents != null ? pointerEvents : "box-none"
+      }, rest), {
+        children
+      })
+    ) });
   }
 );
 DrawerRoot.displayName = "Drawer";
@@ -6361,8 +6400,15 @@ var DrawerTrigger = React66.forwardRef(
 );
 DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerPortal = ({ children, topContent }) => {
-  const { modalVisible, closeDrawer } = React66.useContext(DrawerContext);
+  const { modalVisible, closeDrawer, backdrop } = React66.useContext(DrawerContext);
+  const OverlayComponent = useDrawerOverlay();
   if (!modalVisible) return null;
+  if (!backdrop) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      topContent
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -6373,16 +6419,23 @@ var DrawerPortal = ({ children, topContent }) => {
       onRequestClose: closeDrawer,
       children: /* @__PURE__ */ jsxs(View, { style: styles3.modalContainer, children: [
         children,
-        topContent
+        topContent,
+        OverlayComponent ? /* @__PURE__ */ jsx(OverlayComponent, {}) : null
       ] })
     }
   );
 };
 DrawerPortal.displayName = "Drawer.Portal";
+var DrawerOverlayProvider = ({
+  component,
+  children
+}) => /* @__PURE__ */ jsx(DrawerOverlayContext.Provider, { value: component, children });
+DrawerOverlayProvider.displayName = "Drawer.OverlayProvider";
 var Drawer = Object.assign(DrawerRoot, {
   Root: DrawerRoot,
   Trigger: DrawerTrigger,
   Portal: DrawerPortal,
+  OverlayProvider: DrawerOverlayProvider,
   Overlay: DrawerOverlay,
   Content: DrawerContent,
   Grabber: DrawerGrabber,