@cloud-ru/ds-drawer 1.2.8-preview-ac2c37a8.0 → 1.2.8

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.2.8 (2026-10-01)
+
+**Note:** Version bump only for package @ds/drawer
+
 ## 1.2.7 (2026-10-01)
 
 **Note:** Version bump only for package @ds/drawer

package/README.md

@@ -262,8 +262,7 @@ export function NestedDrawer() {
 | `open` | `boolean` | — | Управление состоянием показан/не показан. |
 | `position` | `"bottom"` \| `"left"` \| `"right"` \| `"top"` | — | Расположение |
 | `rootClassName` | `string` | — | CSS-класс для корневого элемента |
-| `safeAreaBottom` | `boolean` | `true` | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.paddingBottom` (32px), на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
-| `safeAreaTop` | `boolean` | `true` | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.paddingTop` (32px), <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
+| `safeArea` | `boolean` | `true` | Резервировать ли место под iOS notch / home-indicator и Android nav-bar. Реализовано паддингом <br/> на `.content` через `env(safe-area-inset-*)`: на устройстве без выреза/индикатора (и на desktop) <br/> inset = 0, поэтому никакого «лишнего» отступа не появляется; на notched-устройстве — ровно нужный. <br/> Верхний отступ добавляется только когда sheet раскрыт на полный вьюпорт (его верх под notch). |
 | `showBlackout` | `boolean` | `true` | Отображение темной подложки |
 | `showButtonClosed` | `boolean` | `true` | Отображение кнопки закрытия в шапке дровера |
 | `slotAfterTitle` | `ReactNode` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
@@ -305,8 +304,7 @@ export function NestedDrawer() {
 | `open` | `boolean` | — | Управление состоянием показан/не показан. |
 | `position` | `"bottom"` \| `"left"` \| `"right"` \| `"top"` | — | Расположение |
 | `rootClassName` | `string \| undefined` | — | CSS-класс для корневого элемента |
-| `safeAreaBottom` | `boolean \| undefined` | — | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.paddingBottom` (32px), на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
-| `safeAreaTop` | `boolean \| undefined` | — | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.paddingTop` (32px), <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
+| `safeArea` | `boolean \| undefined` | — | Резервировать ли место под iOS notch / home-indicator и Android nav-bar. Реализовано паддингом <br/> на `.content` через `env(safe-area-inset-*)`: на устройстве без выреза/индикатора (и на desktop) <br/> inset = 0, поэтому никакого «лишнего» отступа не появляется; на notched-устройстве — ровно нужный. <br/> Верхний отступ добавляется только когда sheet раскрыт на полный вьюпорт (его верх под notch). |
 | `showBlackout` | `boolean \| undefined` | — | Отображение темной подложки |
 | `showButtonClosed` | `boolean \| undefined` | — | Отображение кнопки закрытия в шапке дровера |
 | `slotAfterTitle` | `string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
@@ -450,8 +448,7 @@ export function CustomComposition() {
 | `push` | `boolean \| PushConfig` | — | Смещение при открытии "вложенного" компонента |
 | `resizable` | `{ min: number; max?: number; default?: number; onResize?: ((width: number) => void) \| undefined; onResizeEnd?: ((width: number) => void) \| undefined; draggerTooltip?: string \| undefined; } \| undefined` | `'s'` | Ширина (только при position: "left" \| "right") |
 | `rootClassName` | `string` | — | CSS-класс для корневого элемента |
-| `safeAreaBottom` | `boolean` | `true` | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.paddingBottom` (32px), на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
-| `safeAreaTop` | `boolean` | `true` | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.paddingTop` (32px), <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
+| `safeArea` | `boolean` | `true` | Резервировать ли место под iOS notch / home-indicator и Android nav-bar. Реализовано паддингом <br/> на `.content` через `env(safe-area-inset-*)`: на устройстве без выреза/индикатора (и на desktop) <br/> inset = 0, поэтому никакого «лишнего» отступа не появляется; на notched-устройстве — ровно нужный. <br/> Верхний отступ добавляется только когда sheet раскрыт на полный вьюпорт (его верх под notch). |
 | `showBlackout` | `boolean` | `true` | Отображение темной подложки |
 | `showButtonClosed` | `boolean` | `true` | Отображение кнопки закрытия в шапке дровера |
 | `snapPoints` | `SnapPoint` | — | Массив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — <br/> sheet `height: auto` с одним snap'ом по высоте контента. <br/> Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает <br/> до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. <br/> Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на <br/> стороне потребителя): <br/> - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; <br/> - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут <br/> одну высоту → дубль-индекс будет недостижим свайпом); <br/> - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива <br/> фиксированных позиций его «контентная» высота не определена. |
@@ -479,8 +476,7 @@ export function CustomComposition() {
 | `push` | `boolean \| PushConfig \| undefined` | — | Смещение при открытии "вложенного" компонента |
 | `resizable` | `{ min: number; max?: number; default?: number; onResize?: (width: number) => void; onResizeEnd?: (width: number) => void; draggerTooltip?: string; } \| undefined` | — | Ширина (только при position: "left" \| "right") |
 | `rootClassName` | `string \| undefined` | — | CSS-класс для корневого элемента |
-| `safeAreaBottom` | `boolean \| undefined` | — | Нижний safe-area отступ под iOS home-indicator и Android nav-bar. Размер — токен <br/> `safeArea.paddingBottom` (32px), на устройстве с большим `env(safe-area-inset-bottom)` — значение inset. |
-| `safeAreaTop` | `boolean \| undefined` | — | Верхний safe-area отступ под iOS notch / status-bar. Размер — токен `safeArea.paddingTop` (32px), <br/> на устройстве с большим `env(safe-area-inset-top)` — значение inset. Применяется, только когда <br/> sheet раскрыт на полный вьюпорт: у неполного sheet'а верх и так не заходит под notch. |
+| `safeArea` | `boolean \| undefined` | — | Резервировать ли место под iOS notch / home-indicator и Android nav-bar. Реализовано паддингом <br/> на `.content` через `env(safe-area-inset-*)`: на устройстве без выреза/индикатора (и на desktop) <br/> inset = 0, поэтому никакого «лишнего» отступа не появляется; на notched-устройстве — ровно нужный. <br/> Верхний отступ добавляется только когда sheet раскрыт на полный вьюпорт (его верх под notch). |
 | `showBlackout` | `boolean \| undefined` | — | Отображение темной подложки |
 | `showButtonClosed` | `boolean \| undefined` | — | Отображение кнопки закрытия в шапке дровера |
 | `snapPoints` | `SnapPoint` | — | Массив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — <br/> sheet `height: auto` с одним snap'ом по высоте контента. <br/> Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает <br/> до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. <br/> Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на <br/> стороне потребителя): <br/> - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; <br/> - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут <br/> одну высоту → дубль-индекс будет недостижим свайпом); <br/> - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива <br/> фиксированных позиций его «контентная» высота не определена. |

package/dist/cjs/components/Drawer/types.d.ts

@@ -7,10 +7,10 @@ import { DrawerCustomProps } from '../DrawerCustom';
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
  *
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer`, `truncate` (на mobile игнорируются).
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeAreaTop`, `safeAreaBottom`, `withDividers`
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
  */
-export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeAreaTop' | 'safeAreaBottom'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick' | 'truncate'> & Pick<DialogBodyProps, 'content'> & {
+export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick' | 'truncate'> & Pick<DialogBodyProps, 'content'> & {
     /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
     contentRef?: Ref<HTMLElement>;
     /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */

package/dist/cjs/components/DrawerCustom/DrawerCustom.js

@@ -68,8 +68,8 @@ function DrawerFrame(props) {
 function DrawerCustom(props) {
     const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
     if ((0, adaptive_1.isMobileLayout)(layoutType)) {
-        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeAreaTop, safeAreaBottom, disableMotions, ...rest } = props;
-        return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, disableMotions: disableMotions, ...(0, utils_1.extractSupportProps)(rest), children: children }));
+        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeArea, disableMotions, ...rest } = props;
+        return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeArea: safeArea, disableMotions: disableMotions, ...(0, utils_1.extractSupportProps)(rest), children: children }));
     }
     return (0, jsx_runtime_1.jsx)(DrawerFrame, { ...props });
 }

package/dist/cjs/components/DrawerCustom/types.d.ts

@@ -68,4 +68,4 @@ export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
         /** Tooltip для элемента dragger */
         draggerTooltip?: string;
     };
-}>> & Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeAreaTop' | 'safeAreaBottom'>;
+}>> & Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeArea'>;

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.d.ts

@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types';
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeAreaTop, safeAreaBottom, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.js

@@ -10,7 +10,7 @@ const constants_1 = require("../../constants");
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeAreaTop, safeAreaBottom, withDividers = false, ...rest }) {
+function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers = false, ...rest }) {
     // Футер собирает сам `BottomSheet`.
     return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet
     // Дефолт `withDividers` в sheet'е — `true`; у Drawer'а вид исторически без разделителей.
@@ -22,5 +22,5 @@ function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle,
             approve: constants_1.TEST_IDS.footerApprove,
             cancel: constants_1.TEST_IDS.footerCancel,
             additional: constants_1.TEST_IDS.footerAdditional,
-        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, ...(0, utils_1.extractSupportProps)(rest) }));
+        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeArea: safeArea, ...(0, utils_1.extractSupportProps)(rest) }));
 }

package/dist/esm/components/Drawer/types.d.ts

@@ -7,10 +7,10 @@ import { DrawerCustomProps } from '../DrawerCustom/index.js';
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
  *
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer`, `truncate` (на mobile игнорируются).
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeAreaTop`, `safeAreaBottom`, `withDividers`
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
  */
-export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeAreaTop' | 'safeAreaBottom'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick' | 'truncate'> & Pick<DialogBodyProps, 'content'> & {
+export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick' | 'truncate'> & Pick<DialogBodyProps, 'content'> & {
     /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
     contentRef?: Ref<HTMLElement>;
     /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */

package/dist/esm/components/DrawerCustom/DrawerCustom.js

@@ -62,8 +62,8 @@ function DrawerFrame(props) {
 export function DrawerCustom(props) {
     const { layoutType } = useAdaptiveLayout();
     if (isMobileLayout(layoutType)) {
-        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeAreaTop, safeAreaBottom, disableMotions, ...rest } = props;
-        return (_jsx(BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, disableMotions: disableMotions, ...extractSupportProps(rest), children: children }));
+        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeArea, disableMotions, ...rest } = props;
+        return (_jsx(BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeArea: safeArea, disableMotions: disableMotions, ...extractSupportProps(rest), children: children }));
     }
     return _jsx(DrawerFrame, { ...props });
 }

package/dist/esm/components/DrawerCustom/types.d.ts

@@ -68,4 +68,4 @@ export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
         /** Tooltip для элемента dragger */
         draggerTooltip?: string;
     };
-}>> & Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeAreaTop' | 'safeAreaBottom'>;
+}>> & Pick<BottomSheetCustomProps, 'snapPoints' | 'swipeEnabled' | 'safeArea'>;

package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.d.ts

@@ -4,4 +4,4 @@ import { DrawerProps } from '../../components/Drawer/types.js';
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeAreaTop, safeAreaBottom, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/MobileDrawer/MobileDrawer.js

@@ -7,7 +7,7 @@ import { TEST_IDS } from '../../constants.js';
  * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
  * уходят в `...rest`.
  */
-export function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeAreaTop, safeAreaBottom, withDividers = false, ...rest }) {
+export function MobileDrawer({ content, media, title, slotAfterTitle, slotSecondTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, withDividers = false, ...rest }) {
     // Футер собирает сам `BottomSheet`.
     return (_jsx(BottomSheet
     // Дефолт `withDividers` в sheet'е — `true`; у Drawer'а вид исторически без разделителей.
@@ -19,5 +19,5 @@ export function MobileDrawer({ content, media, title, slotAfterTitle, slotSecond
             approve: TEST_IDS.footerApprove,
             cancel: TEST_IDS.footerCancel,
             additional: TEST_IDS.footerAdditional,
-        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeAreaTop: safeAreaTop, safeAreaBottom: safeAreaBottom, ...extractSupportProps(rest) }));
+        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeArea: safeArea, ...extractSupportProps(rest) }));
 }