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

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'
 };

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

@@ -1,3 +1,2 @@
-export { useThemeContext } from './useThemeContext';
 export { useSheetSwipe } from './useSheetSwipe';
 export { useSheet } from './useSheet';

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

@@ -1,7 +1,6 @@
 export var handleTransition = function handleTransition(transition) {
   return function (props) {
-    var lowPerformance = props.theme.lowPerformance,
-      withTransition = props.withTransition;
-    return !withTransition || lowPerformance ? 'unset' : transition;
+    var withTransition = props.withTransition;
+    return !withTransition ? 'unset' : transition;
   };
 };

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

@@ -1 +1,2 @@
-export { handleTransition } from './handleTransition';
+export { handleTransition } from './handleTransition';
+export var DEFAULT_Z_INDEX = '0';

package/styled-components/es/components/Sheet/variations/_view/tokens.json

@@ -1,3 +1,6 @@
 [
-    "--plasma-sheet-overlay-background-color, --plasma-sheet-content-background-color, --plasma-sheet-handle-background-color"
+    "--plasma-sheet-overlay-color",
+    "--plasma-sheet-overlay-with-blur-color",
+    "--plasma-sheet-content-background-color",
+    "--plasma-sheet-handle-background-color"
 ]

package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":var(--overlay-soft);", ":var(--text-primary);"], sheetTokens.contentBackgroundColor, sheetTokens.overlayBackgroundColor, sheetTokens.handleColor)
+      "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleColor)
     }
   }
 };

package/styled-components/es/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/es/examples/plasma_web/components/Sheet/Sheet.config.js

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

package/styled-components/es/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/types/components/Sheet/Sheet.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { RootProps } from '../../engines';
 import { SheetProps } from './Sheet.types';
 /**
+ * Sheet
  * Открывает окно-шторку поверх основного экрана.
  */
 export declare const sheetRoot: (Root: RootProps<HTMLDivElement, SheetProps>) => React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;

package/types/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAY3C;;GAEG;AAEH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAkDhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApDQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAiEpE,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAe3C;;;GAGG;AAEH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAuEhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAzEQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAsFpE,CAAC"}