@salutejs/plasma-new-hope 0.193.0 → 0.194.0-canary.1558.11852073996.0

package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -18,6 +19,7 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
+        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
+    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <ButtonWrapper>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </ButtonWrapper>
+                    <StyledModal
+                        id="modalA"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        hasBody
+                        {...rest}
+                    >
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <ButtonWrapper>
+                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                        </ButtonWrapper>
+                        <Modal
+                            id="modalB"
+                            frame="theme-root"
+                            onClose={() => setIsOpenB(false)}
+                            opened={isOpenB}
+                            placement="left"
+                            offset={[offsetX, offsetY]}
+                            hasBody
+                            {...rest}
+                        >
+                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                Close
+                            </Button>
+                            <ButtonWrapper>
+                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                            </ButtonWrapper>
+                            <Modal
+                                id="modalC"
+                                frame="theme-root"
+                                onClose={() => setIsOpenC(false)}
+                                opened={isOpenC}
+                                placement="top"
+                                offset={[offsetX, offsetY]}
+                                hasBody
+                                {...rest}
+                            >
+                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                    Close
+                                </Button>
+                                <>Content</>
+                            </Modal>
+                        </Modal>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
+
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     );
 };
 
-export const ModalDemo: StoryObj<StoryModalProps> = {
+export const Default: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
+        hasClose: true,
+    },
+    argTypes: {
+        hasClose: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
+export const CustomModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryCustomModalDemo {...args} />,
+};
+
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {

package/emotion/es/components/Modal/Modal.js

@@ -1,4 +1,5 @@
-var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen"];
+var _IconClose;
+var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen", "hasBody", "hasClose"];
 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; }
@@ -9,10 +10,12 @@ import { popupConfig, usePopupContext } from '../Popup';
 import { Overlay } from '../Overlay';
 import { DEFAULT_Z_INDEX } from '../Popup/utils';
 import { useFocusTrap } from '../../hooks';
+import { IconClose } from '../_Icon/Icons/IconClose';
 import { classes, tokens } from './Modal.tokens';
 import { useModal } from './hooks';
 import { base as viewCSS } from './variations/_view/base';
 import { getIdLastModal } from './ModalContext';
+import { CloseButton, ModalBody, ModalContent } from './Modal.styles';
 
 // issue #823
 var Popup = /*#__PURE__*/component(popupConfig);
@@ -41,8 +44,11 @@ export var modalRoot = function modalRoot(Root) {
       view = _ref.view,
       opened = _ref.opened,
       isOpen = _ref.isOpen,
+      hasBody = _ref.hasBody,
+      hasClose = _ref.hasClose,
       rest = _objectWithoutProperties(_ref, _excluded);
     var innerIsOpen = Boolean(isOpen || opened);
+    var innerHasClose = hasClose === undefined && hasBody || hasClose;
     var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
     var popupController = usePopupContext();
     var innerRef = useForkRef(trapRef, outerRootRef);
@@ -70,6 +76,15 @@ export var modalRoot = function modalRoot(Root) {
         onClose();
       }
     }, [closeOnOverlayClick, onOverlayClick, onClose]);
+    var overlayNode = /*#__PURE__*/React.createElement(Overlay, {
+      className: classes.overlay,
+      zIndex: zIndex || DEFAULT_Z_INDEX,
+      backgroundColorProperty: overlayBackgroundToken,
+      withBlur: withBlur,
+      transparent: transparent,
+      isClickable: closeOnOverlayClick,
+      onOverlayClick: onModalOverlayKeyDown
+    });
     return /*#__PURE__*/React.createElement(Popup, _extends({
       id: innerId,
       opened: innerIsOpen,
@@ -77,18 +92,17 @@ export var modalRoot = function modalRoot(Root) {
       popupInfo: modalInfo,
       withAnimation: withAnimation,
       zIndex: zIndex,
-      overlay: /*#__PURE__*/React.createElement(Root, {
+      overlay: hasBody ? overlayNode : /*#__PURE__*/React.createElement(Root, {
         view: view
-      }, /*#__PURE__*/React.createElement(Overlay, {
-        className: classes.overlay,
-        zIndex: zIndex || DEFAULT_Z_INDEX,
-        backgroundColorProperty: overlayBackgroundToken,
-        withBlur: withBlur,
-        transparent: transparent,
-        isClickable: closeOnOverlayClick,
-        onOverlayClick: onModalOverlayKeyDown
-      }))
-    }, rest), children);
+      }, overlayNode)
+    }, rest), hasBody ? /*#__PURE__*/React.createElement(Root, {
+      view: view
+    }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ModalContent, null, innerHasClose && /*#__PURE__*/React.createElement(CloseButton, {
+      onClick: onClose,
+      "data-test": "modal-close"
+    }, _IconClose || (_IconClose = /*#__PURE__*/React.createElement(IconClose, {
+      size: "s"
+    }))), children))) : /*#__PURE__*/React.createElement(React.Fragment, null, children));
   });
 };
 export var modalConfig = {

package/emotion/es/components/Modal/Modal.styles.js

@@ -0,0 +1,20 @@
+import _styled from "@emotion/styled/base";
+import { addFocus } from '../../mixins';
+import { tokens } from './Modal.tokens';
+export var ModalBody = /*#__PURE__*/_styled("div", {
+  target: "e1gvpqag2",
+  label: "plasma-new-hope__ModalBody"
+})("border-radius:var(", tokens.modalBodyBorderRadius, ");padding:var(", tokens.modalBodyPadding, ");background:var(", tokens.modalBodyBackground, ");box-shadow:var(--shadow-down-soft-l);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL01vZGFsL01vZGFsLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2YFxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlCb3JkZXJSYWRpdXN9KTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMubW9kYWxCb2R5UGFkZGluZ30pO1xuICAgIGJhY2tncm91bmQ6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlCYWNrZ3JvdW5kfSk7XG4gICAgYm94LXNoYWRvdzogdmFyKC0tc2hhZG93LWRvd24tc29mdC1sKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbENvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMubW9kYWxDb250ZW50UGFkZGluZ30pO1xuYDtcblxuZXhwb3J0IGNvbnN0IENsb3NlQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IDA7XG5cbiAgICB3aWR0aDogMS41cmVtO1xuICAgIGhlaWdodDogMS41cmVtO1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5tb2RhbENsb3NlQnV0dG9uUmFkaXVzfSk7XG5cbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuXG4gICAgY3Vyc29yOiBwb2ludGVyO1xuXG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICctMC4xMjVyZW0nLFxuICAgICAgICBvdXRsaW5lQ29sb3I6IGB2YXIoJHt0b2tlbnMubW9kYWxPdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogYGNhbGModmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KSArIDAuMDYzcmVtKWAsXG4gICAgfSl9O1xuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdfQ== */"));
+export var ModalContent = /*#__PURE__*/_styled("div", {
+  target: "e1gvpqag1",
+  label: "plasma-new-hope__ModalContent"
+})("position:relative;padding:var(", tokens.modalContentPadding, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFzQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL01vZGFsL01vZGFsLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgYWRkRm9jdXMgfSBmcm9tICcuLi8uLi9taXhpbnMnO1xuXG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL01vZGFsLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBNb2RhbEJvZHkgPSBzdHlsZWQuZGl2YFxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlCb3JkZXJSYWRpdXN9KTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMubW9kYWxCb2R5UGFkZGluZ30pO1xuICAgIGJhY2tncm91bmQ6IHZhcigke3Rva2Vucy5tb2RhbEJvZHlCYWNrZ3JvdW5kfSk7XG4gICAgYm94LXNoYWRvdzogdmFyKC0tc2hhZG93LWRvd24tc29mdC1sKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBNb2RhbENvbnRlbnQgPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMubW9kYWxDb250ZW50UGFkZGluZ30pO1xuYDtcblxuZXhwb3J0IGNvbnN0IENsb3NlQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IDA7XG5cbiAgICB3aWR0aDogMS41cmVtO1xuICAgIGhlaWdodDogMS41cmVtO1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5tb2RhbENsb3NlQnV0dG9uUmFkaXVzfSk7XG5cbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBvdXRsaW5lOiBub25lO1xuXG4gICAgY3Vyc29yOiBwb2ludGVyO1xuXG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cbiAgICAke2FkZEZvY3VzKHtcbiAgICAgICAgb3V0bGluZVNpemU6ICcwLjA2M3JlbScsXG4gICAgICAgIG91dGxpbmVPZmZzZXQ6ICctMC4xMjVyZW0nLFxuICAgICAgICBvdXRsaW5lQ29sb3I6IGB2YXIoJHt0b2tlbnMubW9kYWxPdXRsaW5lRm9jdXNDb2xvcn0pYCxcbiAgICAgICAgb3V0bGluZVJhZGl1czogYGNhbGModmFyKCR7dG9rZW5zLm1vZGFsQ2xvc2VCdXR0b25SYWRpdXN9KSArIDAuMDYzcmVtKWAsXG4gICAgfSl9O1xuXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuYDtcbiJdfQ== */"));
+export var CloseButton = /*#__PURE__*/_styled("button", {
+  target: "e1gvpqag0",
+  label: "plasma-new-hope__CloseButton"
+})("top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(", tokens.modalCloseButtonRadius, ");padding:0;margin:0;outline:none;cursor:pointer;background:transparent;", /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.modalOutlineFocusColor, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.modalCloseButtonRadius, ") + 0.063rem)")
+}), ";position:absolute;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCd0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGFkZEZvY3VzIH0gZnJvbSAnLi4vLi4vbWl4aW5zJztcblxuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9Nb2RhbC50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgTW9kYWxCb2R5ID0gc3R5bGVkLmRpdmBcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMubW9kYWxCb2R5Qm9yZGVyUmFkaXVzfSk7XG4gICAgcGFkZGluZzogdmFyKCR7dG9rZW5zLm1vZGFsQm9keVBhZGRpbmd9KTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMubW9kYWxCb2R5QmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1kb3duLXNvZnQtbCk7XG5gO1xuXG5leHBvcnQgY29uc3QgTW9kYWxDb250ZW50ID0gc3R5bGVkLmRpdmBcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgcGFkZGluZzogdmFyKCR7dG9rZW5zLm1vZGFsQ29udGVudFBhZGRpbmd9KTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDbG9zZUJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICAgdG9wOiAwO1xuICAgIHJpZ2h0OiAwO1xuXG4gICAgd2lkdGg6IDEuNXJlbTtcbiAgICBoZWlnaHQ6IDEuNXJlbTtcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c30pO1xuXG4gICAgcGFkZGluZzogMDtcbiAgICBtYXJnaW46IDA7XG4gICAgb3V0bGluZTogbm9uZTtcblxuICAgIGN1cnNvcjogcG9pbnRlcjtcblxuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXG4gICAgJHthZGRGb2N1cyh7XG4gICAgICAgIG91dGxpbmVTaXplOiAnMC4wNjNyZW0nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnLTAuMTI1cmVtJyxcbiAgICAgICAgb3V0bGluZUNvbG9yOiBgdmFyKCR7dG9rZW5zLm1vZGFsT3V0bGluZUZvY3VzQ29sb3J9KWAsXG4gICAgICAgIG91dGxpbmVSYWRpdXM6IGBjYWxjKHZhcigke3Rva2Vucy5tb2RhbENsb3NlQnV0dG9uUmFkaXVzfSkgKyAwLjA2M3JlbSlgLFxuICAgIH0pfTtcblxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbmA7XG4iXX0= */"));

package/emotion/es/components/Modal/Modal.template-doc.mdx

@@ -62,6 +62,53 @@ export function App() {
 }
 ```
 
+## Использование стилизованной обертки
+
+Для использования стилизованного мобального окна с отступами и крестиком для закрытия, добавьте свойство `hasBody`.
+```tsx live
+import React, { useState } from 'react';
+import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
+                        <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </div>
+                    <Modal
+                        id="modalA"
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement="center"
+                        offset={[0, 0]}
+                        hasBody
+                    >
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
+                        Content
+                        <Modal
+                            id="modalB"
+                            onClose={() => setIsOpenB(false)}
+                            opened={isOpenB}
+                            placement="right"
+                            offset={[0, 0]}
+                        >
+                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                            Content
+                        </Modal>
+                    </Modal>
+                </div>
+            </PopupProvider>
+        </SSRProvider>
+    );
+}
+```
+
 ## Подключение анимации
 Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
 Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.

package/emotion/es/components/Modal/Modal.tokens.js

@@ -6,5 +6,11 @@ export var classes = {
 };
 export var tokens = {
   modalOverlayWithBlurColor: '--plasma-modal-overlay-with-blur-color',
-  modalOverlayColor: '--plasma-modal-overlay-color'
+  modalOverlayColor: '--plasma-modal-overlay-color',
+  modalBodyBackground: '--plasma-modal-body-background',
+  modalBodyBorderRadius: '--plasma-modal-body-border-radius',
+  modalBodyPadding: '--plasma-modal-body-padding',
+  modalContentPadding: '--plasma-modal-content-padding',
+  modalOutlineFocusColor: '--plasma-modal-outline-focus-color',
+  modalCloseButtonRadius: '--plasma-modal-close-button-radius'
 };

package/emotion/es/examples/plasma_b2c/components/Modal/Modal.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);", modalTokens.modalBodyBackground, ":var(--surface-solid-card);", modalTokens.modalBodyBorderRadius, ":1.25rem;", modalTokens.modalBodyPadding, ":2rem;", modalTokens.modalContentPadding, ":0.625rem;", modalTokens.modalCloseButtonRadius, ":0.375rem;", modalTokens.modalOutlineFocusColor, ":var(--surface-accent);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV9iMmMvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWNhcmQpO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxCb2R5Qm9yZGVyUmFkaXVzfTogMS4yNXJlbTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keVBhZGRpbmd9OiAycmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxDb250ZW50UGFkZGluZ306IDAuNjI1cmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c306IDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxPdXRsaW5lRm9jdXNDb2xvcn06IHZhcigtLXN1cmZhY2UtYWNjZW50KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
     }
   }
 };

package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -18,6 +19,7 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
+        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
+    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <ButtonWrapper>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </ButtonWrapper>
+                    <StyledModal
+                        id="modalA"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        hasBody
+                        {...rest}
+                    >
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <ButtonWrapper>
+                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                        </ButtonWrapper>
+                        <Modal
+                            id="modalB"
+                            frame="theme-root"
+                            onClose={() => setIsOpenB(false)}
+                            opened={isOpenB}
+                            placement="left"
+                            offset={[offsetX, offsetY]}
+                            hasBody
+                            {...rest}
+                        >
+                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                Close
+                            </Button>
+                            <ButtonWrapper>
+                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                            </ButtonWrapper>
+                            <Modal
+                                id="modalC"
+                                frame="theme-root"
+                                onClose={() => setIsOpenC(false)}
+                                opened={isOpenC}
+                                placement="top"
+                                offset={[offsetX, offsetY]}
+                                hasBody
+                                {...rest}
+                            >
+                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                    Close
+                                </Button>
+                                <>Content</>
+                            </Modal>
+                        </Modal>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
+
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     );
 };
 
-export const ModalDemo: StoryObj<StoryModalProps> = {
+export const Default: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
+        hasClose: true,
+    },
+    argTypes: {
+        hasClose: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
+export const CustomModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryCustomModalDemo {...args} />,
+};
+
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {

package/emotion/es/examples/plasma_web/components/Modal/Modal.config.js

@@ -6,7 +6,7 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+      "default": /*#__PURE__*/css(modalTokens.modalOverlayWithBlurColor, ":var(--overlay-blur);", modalTokens.modalOverlayColor, ":var(--overlay-soft);", modalTokens.modalBodyBackground, ":var(--surface-solid-card);", modalTokens.modalBodyBorderRadius, ":1.25rem;", modalTokens.modalBodyPadding, ":2rem;", modalTokens.modalContentPadding, ":0.625rem;", modalTokens.modalCloseButtonRadius, ":0.375rem;", modalTokens.modalOutlineFocusColor, ":var(--surface-accent);;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3BsYXNtYV93ZWIvY29tcG9uZW50cy9Nb2RhbC9Nb2RhbC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IG1vZGFsVG9rZW5zIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29tcG9uZW50cy9Nb2RhbCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHttb2RhbFRva2Vucy5tb2RhbE92ZXJsYXlXaXRoQmx1ckNvbG9yfTogdmFyKC0tb3ZlcmxheS1ibHVyKTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsT3ZlcmxheUNvbG9yfTogdmFyKC0tb3ZlcmxheS1zb2Z0KTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keUJhY2tncm91bmR9OiB2YXIoLS1zdXJmYWNlLXNvbGlkLWNhcmQpO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxCb2R5Qm9yZGVyUmFkaXVzfTogMS4yNXJlbTtcbiAgICAgICAgICAgICAgICAke21vZGFsVG9rZW5zLm1vZGFsQm9keVBhZGRpbmd9OiAycmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxDb250ZW50UGFkZGluZ306IDAuNjI1cmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxDbG9zZUJ1dHRvblJhZGl1c306IDAuMzc1cmVtO1xuICAgICAgICAgICAgICAgICR7bW9kYWxUb2tlbnMubW9kYWxPdXRsaW5lRm9jdXNDb2xvcn06IHZhcigtLXN1cmZhY2UtYWNjZW50KTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
     }
   }
 };

package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
@@ -18,6 +19,7 @@ export default {
         docs: { story: { inline: false, iframeHeight: '30rem' } },
     },
     argTypes: {
+        ...disableProps(['hasBody']),
         placement: {
             options: [
                 'center',
@@ -75,6 +77,7 @@ type StoryModalProps = ComponentProps<typeof Modal> & {
     closeOnEsc: boolean;
     closeOnOverlayClick: boolean;
     withBlur: boolean;
+    hasClose?: boolean;
 };
 
 const StyledButton = styled(Button)`
@@ -135,6 +138,72 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     const [isOpenB, setIsOpenB] = useState(false);
     const [isOpenC, setIsOpenC] = useState(false);
 
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <ButtonWrapper>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </ButtonWrapper>
+                    <StyledModal
+                        id="modalA"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        hasBody
+                        {...rest}
+                    >
+                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                        <ButtonWrapper>
+                            <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                        </ButtonWrapper>
+                        <Modal
+                            id="modalB"
+                            frame="theme-root"
+                            onClose={() => setIsOpenB(false)}
+                            opened={isOpenB}
+                            placement="left"
+                            offset={[offsetX, offsetY]}
+                            hasBody
+                            {...rest}
+                        >
+                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                Close
+                            </Button>
+                            <ButtonWrapper>
+                                <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                            </ButtonWrapper>
+                            <Modal
+                                id="modalC"
+                                frame="theme-root"
+                                onClose={() => setIsOpenC(false)}
+                                opened={isOpenC}
+                                placement="top"
+                                offset={[offsetX, offsetY]}
+                                hasBody
+                                {...rest}
+                            >
+                                <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                    Close
+                                </Button>
+                                <>Content</>
+                            </Modal>
+                        </Modal>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+const StoryCustomModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
+
     return (
         <SSRProvider>
             <StyledWrapper>
@@ -199,7 +268,7 @@ const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProp
     );
 };
 
-export const ModalDemo: StoryObj<StoryModalProps> = {
+export const Default: StoryObj<StoryModalProps> = {
     args: {
         placement: 'center',
         withBlur: false,
@@ -207,10 +276,30 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
         closeOnOverlayClick: true,
         offsetX: 0,
         offsetY: 0,
+        hasClose: true,
+    },
+    argTypes: {
+        hasClose: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
 
+export const CustomModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryCustomModalDemo {...args} />,
+};
+
 const StyledModalAnimation = styled(Modal)`
     /* stylelint-disable */
     && .${popupClasses.root} {

package/es/components/Modal/Modal.css

@@ -4,3 +4,9 @@
 .Popup_styles_gq4luz_p1f40oul__bb610b96{position:var(--p1f40oul-0);z-index:var(--p1f40oul-1);left:var(--p1f40oul-2);right:var(--p1f40oul-3);top:var(--p1f40oul-4);bottom:var(--p1f40oul-5);-webkit-transform:var(--p1f40oul-6);-ms-transform:var(--p1f40oul-6);transform:var(--p1f40oul-6);}
 
 .Overlay_styles_cxej3y_s1afr8la__70d4dd9a{position:fixed;inset:0;z-index:var(--s1afr8la-0);--plasma_private-overlay-background-color:var(--s1afr8la-1);--plasma_private-overlay-backdrop-filter:var(--s1afr8la-2);background:var(--s1afr8la-3);-webkit-backdrop-filter:var(--s1afr8la-4);backdrop-filter:var(--s1afr8la-4);cursor:var(--s1afr8la-5);}
+
+.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
+
+.Modal_styles_tqsxxy_m7npn1w__53552e6a{border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
+.Modal_styles_tqsxxy_m16phoaz__53552e6a{position:relative;padding:var(--plasma-modal-content-padding);}
+.Modal_styles_tqsxxy_c5bx5hr__53552e6a{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;position:absolute;}.Modal_styles_tqsxxy_c5bx5hr__53552e6a::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Modal_styles_tqsxxy_c5bx5hr__53552e6a.Modal_styles_tqsxxy_focusVisible__53552e6a:focus::before,.Modal_styles_tqsxxy_c5bx5hr__53552e6a[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}