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

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

@@ -11,14 +11,33 @@ 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 StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryDefault = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -29,6 +48,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -63,8 +109,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
 
 export const Default: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -92,7 +138,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 +158,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +210,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 +237,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -170,13 +292,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 +318,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +390,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

@@ -16,9 +16,21 @@ const meta: Meta<typeof Sheet> = {
 
 export default meta;
 
-type StorySheetProps = ComponentProps<typeof Sheet>;
+type StorySheetProps = ComponentProps<typeof Sheet> & {
+    hasHeader: boolean;
+    hasFooter: boolean;
+};
 
-const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
+const StoryDefault = ({
+    withOverlay,
+    withTransition,
+    hasFooter,
+    isFooterFixed,
+    hasHeader,
+    isHeaderFixed,
+    hasHandle,
+    withBlur,
+}: StorySheetProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
@@ -29,6 +41,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -63,8 +102,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
 
 export const Default: StoryObj<StorySheetProps> = {
     args: {
-        withOverlay: true,
-        withTransition: true,
+        hasHeader: true,
+        hasFooter: true,
     },
     render: (args) => <StoryDefault {...args} />,
 };
@@ -92,7 +131,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 +151,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +203,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 +230,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <p>Вложенные кнопки</p>
                 <div
@@ -170,13 +285,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 +311,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
                 withOverlay={withOverlay}
                 withTransition={withTransition}
                 onClose={() => setIsOpen(false)}
+                hasHandle={hasHandle}
+                withBlur={withBlur}
+                contentHeader={
+                    hasHeader ? (
+                        <div>
+                            <h3>
+                                Заголовок: 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?
+                            </h3>
+                        </div>
+                    ) : undefined
+                }
+                isHeaderFixed={isHeaderFixed}
+                contentFooter={
+                    hasFooter ? (
+                        <div>
+                            <p>
+                                Футер: 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?
+                            </p>
+                            <Button>Кнопка в футере</Button>
+                        </div>
+                    ) : undefined
+                }
+                isFooterFixed={isFooterFixed}
             >
                 <Body1>
                     <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +383,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
     })));
   });
 };

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

@@ -7,15 +7,42 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pj79gq-1"
 })(["position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{transform:translateY(100%);}"], /*#__PURE__*/handleTransition('transform 0.5s'), /*#__PURE__*/String(classes.isClosed));
-export var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
+export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pj79gq-2"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";"], function (_ref) {
-  var withOverlay = _ref.withOverlay;
-  return withOverlay ? "var(".concat(tokens.overlayBackgroundColor, ")") : 'transparent';
-});
+})(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleColor);
 export var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pj79gq-3"
-})(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor);
-export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
+})(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding-left:1rem;padding-right:1rem;padding-top:", ";padding-bottom:", ";max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor, function (_ref) {
+  var hasHeader = _ref.hasHeader;
+  return hasHeader ? 'unset' : '1rem';
+}, function (_ref2) {
+  var hasFooter = _ref2.hasFooter;
+  return hasFooter ? 'unset' : '1rem';
+});
+export var StyledSheetHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1pj79gq-4"
-})(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleColor);
+})(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
+  var isHeaderFixed = _ref3.isHeaderFixed;
+  return isHeaderFixed ? 'sticky' : 'static';
+}, function (_ref4) {
+  var isHeaderFixed = _ref4.isHeaderFixed;
+  return isHeaderFixed ? '0' : 'unset';
+}, function (_ref5) {
+  var isHeaderFixed = _ref5.isHeaderFixed;
+  return isHeaderFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
+});
+export var StyledSheetBody = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1pj79gq-5"
+})([""]);
+export var StyledSheetFooter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-1pj79gq-6"
+})(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
+  var isFooterFixed = _ref6.isFooterFixed;
+  return isFooterFixed ? 'sticky' : 'static';
+}, function (_ref7) {
+  var isFooterFixed = _ref7.isFooterFixed;
+  return isFooterFixed ? '0' : 'unset';
+}, function (_ref8) {
+  var isFooterFixed = _ref8.isFooterFixed;
+  return isFooterFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
+});

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

@@ -2,7 +2,8 @@ export var classes = {
   isClosed: 'is-closed'
 };
 export var tokens = {
-  overlayBackgroundColor: '--plasma-sheet-overlay-background-color',
+  sheetOverlayColor: '--plasma-sheet-overlay-color',
+  sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
   contentBackgroundColor: '--plasma-sheet-content-background-color',
   handleColor: '--plasma-sheet-handle-background-color'
 };