@salutejs/plasma-new-hope 0.88.0-canary.1225.9348142616.0 → 0.88.0-canary.1225.9415530810.0

package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 import { Body1 } from '@salutejs/plasma-core';
+import styled from 'styled-components';
 
 import { Button } from '../Button/Button';
 import { WithTheme } from '../../../_helpers';
@@ -11,14 +12,37 @@ import { Sheet } from './Sheet';
 const meta: Meta<typeof Sheet> = {
     title: 'plasma_b2c/Sheet',
     decorators: [WithTheme],
-    parameters: { viewport: { defaultViewport: '860' } },
+    args: {
+        withBlur: false,
+        withOverlay: true,
+        withTransition: true,
+        hasHandle: true,
+        isHeaderFixed: false,
+        isFooterFixed: false,
+    },
 };
 
 export default meta;
 
-type StorySheetProps = ComponentProps<typeof Sheet>;
+type StorySheetProps = ComponentProps<typeof Sheet> & {
+    hasHeader: boolean;
+    hasFooter: boolean;
+};
+
+const StyledBody = styled(Body1)`
+    padding-bottom: 300px;
+`;
 
-const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryDefault = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -29,33 +53,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
-                <p>Вложенные кнопки</p>
-                <div
-                    style={{
-                        height: '75px',
-                        overflow: 'scroll',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '1rem',
-                    }}
-                >
-                    <Button>Кнопка 1</Button>
-                    <Button>Кнопка 2</Button>
-                    <Button>Кнопка 3</Button>
-                    <Button>Кнопка 4</Button>
-                    <Button>Кнопка 5</Button>
-                    <Button>Кнопка 6</Button>
-                    <Button>Кнопка 7</Button>
-                    <Button>Кнопка 8</Button>
-                </div>
-                <Body1>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                    consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
-                    fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
-                    placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
-                    dolorem labore quaerat vero maxime ab ipsa nihil.
-                </Body1>
+                <StyledBody>body</StyledBody>
             </Sheet>
         </>
     );
@@ -63,8 +80,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
 
 export const Default: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -76,13 +93,13 @@ const StoryWithoutOverlay = () => {
         <>
             <Button onClick={() => setIsOpen(true)}>Открыть</Button>
             <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
-                <Body1>
+                <StyledBody>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
                     consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
                     fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
                     placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
                     dolorem labore quaerat vero maxime ab ipsa nihil.
-                </Body1>
+                </StyledBody>
             </Sheet>
         </>
     );
@@ -92,7 +109,16 @@ export const WithoutOverlay: StoryObj = {
     render: () => <StoryWithoutOverlay />,
 };
 
-const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -103,6 +129,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +172,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
 };
 
 export const WithScroll: StoryObj<StorySheetProps> = {
+    args: {
+        hasHeader: true,
+        hasFooter: true,
+    },
     render: (args) => <StoryWithScroll {...args} />,
 };
 
-const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithInsideScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -142,6 +199,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -170,13 +245,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
 
 export const WithInsideScroll: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryWithInsideScroll {...args} />,
 };
 
-const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithDoubleScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -187,6 +271,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +334,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
 
 export const WithDoubleScroll: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryWithDoubleScroll {...args} />,
 };

package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js

@@ -12,7 +12,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-overlay);", ":var(--plasma-colors-white);"], _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.overlayBackgroundColor, _Sheet.sheetTokens.handleColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], _Sheet.sheetTokens.sheetOverlayColor, _Sheet.sheetTokens.sheetOverlayWithBlurColor, _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.handleColor)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 import { Body1 } from '@salutejs/plasma-core';
+import styled from 'styled-components';
 
 import { Button } from '../Button/Button';
 import { WithTheme } from '../../../_helpers';
@@ -16,9 +17,25 @@ const meta: Meta<typeof Sheet> = {
 
 export default meta;
 
-type StorySheetProps = ComponentProps<typeof Sheet>;
+type StorySheetProps = ComponentProps<typeof Sheet> & {
+    hasHeader: boolean;
+    hasFooter: boolean;
+};
+
+const StyledBody = styled(Body1)`
+    padding-bottom: 300px;
+`;
 
-const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryDefault = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -29,33 +46,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
-                <p>Вложенные кнопки</p>
-                <div
-                    style={{
-                        height: '75px',
-                        overflow: 'scroll',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '1rem',
-                    }}
-                >
-                    <Button>Кнопка 1</Button>
-                    <Button>Кнопка 2</Button>
-                    <Button>Кнопка 3</Button>
-                    <Button>Кнопка 4</Button>
-                    <Button>Кнопка 5</Button>
-                    <Button>Кнопка 6</Button>
-                    <Button>Кнопка 7</Button>
-                    <Button>Кнопка 8</Button>
-                </div>
-                <Body1>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                    consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
-                    fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
-                    placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
-                    dolorem labore quaerat vero maxime ab ipsa nihil.
-                </Body1>
+                <StyledBody>body</StyledBody>
             </Sheet>
         </>
     );
@@ -63,8 +73,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
 
 export const Default: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -76,13 +86,13 @@ const StoryWithoutOverlay = () => {
         <>
             <Button onClick={() => setIsOpen(true)}>Открыть</Button>
             <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
-                <Body1>
+                <StyledBody>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
                     consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
                     fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
                     placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
                     dolorem labore quaerat vero maxime ab ipsa nihil.
-                </Body1>
+                </StyledBody>
             </Sheet>
         </>
     );
@@ -92,7 +102,16 @@ export const WithoutOverlay: StoryObj = {
     render: () => <StoryWithoutOverlay />,
 };
 
-const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -103,6 +122,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +165,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
 };
 
 export const WithScroll: StoryObj<StorySheetProps> = {
+    args: {
+        hasHeader: true,
+        hasFooter: true,
+    },
     render: (args) => <StoryWithScroll {...args} />,
 };
 
-const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithInsideScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -142,6 +192,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -170,13 +238,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
 
 export const WithInsideScroll: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryWithInsideScroll {...args} />,
 };
 
-const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryWithDoubleScroll = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -187,6 +264,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h4>header</h4>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>footer</p>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +327,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
 
 export const WithDoubleScroll: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryWithDoubleScroll {...args} />,
 };

package/styled-components/es/components/Sheet/Sheet.js

@@ -1,15 +1,18 @@
-var _excluded = ["isOpen", "children", "onClose", "withOverlay", "withTransition", "throttleMs", "className", "view"];
+var _excluded = ["isOpen", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef } from 'react';
 import { cx } from '../../utils';
-import { useSheet, useSheetSwipe, useThemeContext } from './hooks';
-import { classes } from './Sheet.tokens';
-import { StyledContentWrapper, StyledOverlay, StyledSheetContent, StyledSheetHandle, StyledWrapper } from './Sheet.styles';
+import { Overlay } from '../Overlay';
+import { useSheet, useSheetSwipe } from './hooks';
+import { classes, tokens } from './Sheet.tokens';
+import { StyledContentWrapper, StyledSheetBody, StyledSheetContent, StyledSheetFooter, StyledSheetHandle, StyledSheetHeader, StyledWrapper } from './Sheet.styles';
 import { base as viewCSS } from './variations/_view/base';
+import { DEFAULT_Z_INDEX } from './utils';
 
 /**
+ * Sheet
  * Открывает окно-шторку поверх основного экрана.
  */
 
@@ -18,8 +21,18 @@ export var sheetRoot = function sheetRoot(Root) {
     var isOpen = _ref.isOpen,
       children = _ref.children,
       onClose = _ref.onClose,
+      _ref$hasHandle = _ref.hasHandle,
+      hasHandle = _ref$hasHandle === void 0 ? true : _ref$hasHandle,
+      contentHeader = _ref.contentHeader,
+      _ref$isHeaderFixed = _ref.isHeaderFixed,
+      isHeaderFixed = _ref$isHeaderFixed === void 0 ? false : _ref$isHeaderFixed,
+      contentFooter = _ref.contentFooter,
+      _ref$isFooterFixed = _ref.isFooterFixed,
+      isFooterFixed = _ref$isFooterFixed === void 0 ? false : _ref$isFooterFixed,
       _ref$withOverlay = _ref.withOverlay,
       withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
+      _ref$withBlur = _ref.withBlur,
+      withBlur = _ref$withBlur === void 0 ? false : _ref$withBlur,
       _ref$withTransition = _ref.withTransition,
       withTransition = _ref$withTransition === void 0 ? true : _ref$withTransition,
       throttleMs = _ref.throttleMs,
@@ -29,7 +42,6 @@ export var sheetRoot = function sheetRoot(Root) {
     var contentWrapperRef = React.useRef(null);
     var contentRef = React.useRef(null);
     var handleRef = React.useRef(null);
-    var theme = useThemeContext();
     useSheet({
       isOpen: isOpen
     });
@@ -40,9 +52,11 @@ export var sheetRoot = function sheetRoot(Root) {
       throttleMs: throttleMs,
       onClose: onClose
     });
+    var hasHeader = !!contentHeader;
+    var hasFooter = !!contentFooter;
     var isClosedClass = isOpen ? undefined : "".concat(classes.isClosed);
+    var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
     return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
-      theme: theme,
       isOpen: isOpen,
       withTransition: withTransition,
       className: cx(isClosedClass, className)
@@ -52,17 +66,25 @@ export var sheetRoot = function sheetRoot(Root) {
       view: view,
       ref: rootRef
     }, /*#__PURE__*/React.createElement(StyledContentWrapper, {
-      theme: theme,
       isOpen: isOpen,
       withTransition: withTransition,
       ref: contentWrapperRef
-    }, /*#__PURE__*/React.createElement(StyledSheetHandle, {
+    }, hasHandle && /*#__PURE__*/React.createElement(StyledSheetHandle, {
       ref: handleRef
     }), /*#__PURE__*/React.createElement(StyledSheetContent, {
+      hasHeader: hasHeader,
+      hasFooter: hasFooter,
       ref: contentRef
-    }, children)), /*#__PURE__*/React.createElement(StyledOverlay, {
-      withOverlay: withOverlay,
-      onClick: onClose
+    }, hasHeader && /*#__PURE__*/React.createElement(StyledSheetHeader, {
+      isHeaderFixed: isHeaderFixed
+    }, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
+      isFooterFixed: isFooterFixed
+    }, contentFooter))), withOverlay && /*#__PURE__*/React.createElement(Overlay, {
+      zIndex: DEFAULT_Z_INDEX,
+      backgroundColorProperty: overlayBackgroundToken,
+      withBlur: withBlur,
+      isClickable: true,
+      onOverlayClick: onClose
     })));
   });
 };