@skbkontur/react-ui 6.4.7-9ac75.0 → 6.4.7

package/components/Modal/Modal.styles.js

@@ -0,0 +1,167 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
+export var modalGlobalClasses = prefix('modal')({
+    root: 'root',
+    container: 'container',
+});
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "], ["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
+        },
+        bg: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "], ["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "])), t.modalBackBg, t.modalBackOpacity);
+        },
+        container: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      min-height: 64px;\n      overflow-y: auto;\n      outline: none;\n    "], ["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      min-height: 64px;\n      overflow-y: auto;\n      outline: none;\n    "])));
+        },
+        containerDesktop: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    "], ["\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    "])));
+        },
+        mobileContainerFullscreen5_2: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin: 0;\n    "], ["\n      margin: 0;\n    "])));
+        },
+        mobileContainerSmall5_2: function () {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin: 0;\n      display: flex;\n      flex-wrap: wrap;\n      align-content: center;\n    "], ["\n      margin: 0;\n      display: flex;\n      flex-wrap: wrap;\n      align-content: center;\n    "])));
+        },
+        mobileContainerSmallTop5_2: function () {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      align-content: start;\n    "], ["\n      align-content: start;\n    "])));
+        },
+        mobileContainerSmallBottom5_2: function () {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      align-content: end;\n    "], ["\n      align-content: end;\n    "])));
+        },
+        window: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "], ["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "])), t.modalWindowShadow, t.modalBg, t.modalBorderRadius);
+        },
+        mobileWindow: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    "], ["\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    "])));
+        },
+        mobileWindowFullscreen: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      border-radius: 0;\n    "], ["\n      border-radius: 0;\n    "])));
+        },
+        centerContainer: function () {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n    "], ["\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n    "])));
+        },
+        mobileCenterContainer: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      padding: 0;\n      width: calc(100% - ", " - ", ");\n      display: inline-flex;\n      margin: ", " ", "\n        ", " ", ";\n      max-height: calc(100% - ", " - ", ");\n    "], ["\n      padding: 0;\n      width: calc(100% - ", " - ", ");\n      display: inline-flex;\n      margin: ", " ", "\n        ", " ", ";\n      max-height: calc(100% - ", " - ", ");\n    "])), t.mobileModalContainerMarginLeft, t.mobileModalContainerMarginRight, t.mobileModalContainerMarginTop, t.mobileModalContainerMarginRight, t.mobileModalContainerMarginBottom, t.mobileModalContainerMarginLeft, t.mobileModalContainerMarginTop, t.mobileModalContainerMarginBottom);
+        },
+        mobileCenterContainerBig: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      height: calc(100% - ", " - ", ");\n    "], ["\n      height: calc(100% - ", " - ", ");\n    "])), t.mobileModalContainerMarginTop, t.mobileModalContainerMarginBottom);
+        },
+        mobileCenterContainerFullscreen: function () {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n      max-height: 100%;\n    "], ["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n      max-height: 100%;\n    "])));
+        },
+        alignTop: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      vertical-align: top;\n    "], ["\n      vertical-align: top;\n    "])));
+        },
+        close: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      ", ";\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      right: ", ";\n      top: ", ";\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "], ["\n      ", ";\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      right: ", ";\n      top: ", ";\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.modalCloseButtonClickAreaRight, t.modalCloseButtonClickAreaTop, t.modalCloseButtonColor, t.modalCloseButtonClickAreaTop, t.modalCloseButtonClickAreaTop, t.modalCloseButtonClickAreaRight, t.modalCloseButtonClickAreaRight, t.modalCloseButtonClickAreaBottom, t.modalCloseButtonClickAreaBottom, t.modalCloseButtonClickAreaLeft, t.modalCloseButtonClickAreaLeft, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
+        },
+        closeMobile: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      right: ", ";\n      top: ", ";\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "], ["\n      right: ", ";\n      top: ", ";\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])), t.mobileModalCloseButtonRightPadding, t.mobileModalCloseButtonTopPadding, t.mobileModalCloseButtonClickArea, t.mobileModalCloseButtonClickArea, t.mobileModalCloseIconSize, t.mobileModalCloseIconSize);
+        },
+        mobileCloseWithoutHeader: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      position: absolute;\n      padding: ", ";\n      margin: -", ";\n      top: ", ";\n      right: ", ";\n    "], ["\n      position: absolute;\n      padding: ", ";\n      margin: -", ";\n      top: ", ";\n      right: ", ";\n    "])), t.mobileModalWithoutHeaderCloseButtonPadding, t.mobileModalWithoutHeaderCloseButtonPadding, t.mobileModalWithoutHeaderCloseButtonPadding, t.mobileModalWithoutHeaderCloseButtonPadding);
+        },
+        closeWrapper: function (t) {
+            var padding = parseInt(t.modalCloseButtonPadding);
+            var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
+            var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding;
+            var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom;
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "], ["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX, blockSizeY);
+        },
+        mobileCloseWrapper: function (t) {
+            var size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      position: sticky;\n      right: 0;\n      top: 0;\n      padding: 0;\n      margin: 0;\n      margin-left: auto;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", ";\n      height: 0;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "], ["\n      position: sticky;\n      right: 0;\n      top: 0;\n      padding: 0;\n      margin: 0;\n      margin-left: auto;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", ";\n      height: 0;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "])), t.mobileModalWithoutHeaderCloseButtonWidth, t.bgDefault, size);
+        },
+        disabled: function (t) {
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "], ["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
+        },
+        focus: function (t) {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      &:before {\n        content: '';\n        position: absolute;\n        width: calc(", " * 2);\n        height: calc(", " * 2);\n        box-shadow: inset 0 0 0 2px ", ";\n        border-radius: 4px;\n      }\n    "], ["\n      &:before {\n        content: '';\n        position: absolute;\n        width: calc(", " * 2);\n        height: calc(", " * 2);\n        box-shadow: inset 0 0 0 2px ", ";\n        border-radius: 4px;\n      }\n    "])), t.modalCloseIconSize, t.modalCloseIconSize, t.borderColorFocus);
+        },
+        header: function (t) {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n      font-weight: ", ";\n      border-radius: ", " ", " 0 0;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n      font-weight: ", ";\n      border-radius: ", " ", " 0 0;\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor, t.modalHeaderFontWeight, t.modalBorderRadius, t.modalBorderRadius);
+        },
+        mobileHeader: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
+        },
+        titleCut: function () {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "], ["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+        },
+        body: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "], ["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "])), t.modalBodyBorderRadius, t.modalBodyPaddingTop, t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft, t.modalBodyTextColor);
+        },
+        mobileBody: function (t) {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "], ["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyFontSize);
+        },
+        headerWithClose: function (t) {
+            var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize);
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      padding-right: ", "px;\n    "], ["\n      padding-right: ", "px;\n    "])), rightPadding);
+        },
+        mobileHeaderWithClose: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      padding-right: ", "px;\n    "], ["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
+        },
+        footer: function (t) {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "], ["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft, t.modalFooterTextColor, t.modalBorderRadius, t.modalBorderRadius);
+        },
+        mobileFooter: function (t) {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      padding: ", ";\n    "], ["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
+        },
+        panel: function (t) {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
+        },
+        fixedHeader: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      margin-bottom: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\n      border-radius: 0;\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "], ["\n      margin-bottom: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\n      border-radius: 0;\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderMarginBottom, t.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderBorder, t.modalFixedHeaderShadow);
+        },
+        mobileFixedHeader: function (t) {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      padding-bottom: ", ";\n      border-radius: ", " ", " 0 0;\n    "], ["\n      padding-bottom: ", ";\n      border-radius: ", " ", " 0 0;\n    "])), t.mobileModalHeaderPadding, t.modalBorderRadius, t.modalBorderRadius);
+        },
+        fixedFooter: function (t) {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      padding-top: ", ";\n      margin-top: ", ";\n      background: ", ";\n      border-top: ", ";\n      border-radius: 0;\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "], ["\n      padding-top: ", ";\n      margin-top: ", ";\n      background: ", ";\n      border-top: ", ";\n      border-radius: 0;\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedFooterPaddingTop, t.modalFixedFooterMarginTop, t.modalFixedHeaderBg, t.modalFixedFooterBorder, t.modalFixedFooterShadow);
+        },
+        mobileFixedFooter: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      border-radius: 0 0 ", " ", ";\n    "], ["\n      border-radius: 0 0 ", " ", ";\n    "])), t.modalBorderRadius, t.modalBorderRadius);
+        },
+        fixedPanel: function (t) {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
+        },
+        headerAddPadding: function (t) {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
+        },
+        bodyWithoutHeader: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+        },
+        mobileBodyWithoutHeader: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-right: ", ";\n    "])), t.mobileModalBodyPaddingTop, t.mobileModalWithoutHeaderCloseButtonWidth);
+        },
+        bodyWithoutPadding: function () {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+        },
+        bodyAddPaddingForPanel: function (t) {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+        },
+        mobileBodyAddPaddingForPanel: function (t) {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      padding: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyPaddingBottom);
+        },
+        columnFlexContainer: function () {
+            return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "], ["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+        },
+        modalSeparatorWrapper: function () {
+            return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      position: absolute;\n      width: 100%;\n    "], ["\n      position: absolute;\n      width: 100%;\n    "])));
+        },
+        modalSeparator: function (t) {
+            return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      border-bottom: ", ";\n      margin: ", ";\n      transition: margin 0.3s;\n    "], ["\n      border-bottom: ", ";\n      margin: ", ";\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom, t.modalSeparatorMargin);
+        },
+        modalSeparatorFixed: function (t) {
+            return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), t.modalSeparatorFixedMargin);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48;
+//# sourceMappingURL=Modal.styles.js.map

package/components/Modal/Modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const modalGlobalClasses = prefix('modal')({\n  root: 'root',\n  container: 'container',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      min-height: 64px;\n      overflow-y: auto;\n      outline: none;\n    `;\n  },\n\n  containerDesktop() {\n    return css`\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  mobileContainerFullscreen5_2() {\n    return css`\n      margin: 0;\n    `;\n  },\n\n  mobileContainerSmall5_2() {\n    return css`\n      margin: 0;\n      display: flex;\n      flex-wrap: wrap;\n      align-content: center;\n    `;\n  },\n  mobileContainerSmallTop5_2() {\n    return css`\n      align-content: start;\n    `;\n  },\n  mobileContainerSmallBottom5_2() {\n    return css`\n      align-content: end;\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ${t.modalWindowShadow};\n      background: ${t.modalBg};\n      border-radius: ${t.modalBorderRadius};\n    `;\n  },\n\n  mobileWindow() {\n    return css`\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    `;\n  },\n\n  mobileWindowFullscreen() {\n    return css`\n      border-radius: 0;\n    `;\n  },\n\n  centerContainer() {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n    `;\n  },\n\n  mobileCenterContainer(t: Theme) {\n    return css`\n      padding: 0;\n      width: calc(100% - ${t.mobileModalContainerMarginLeft} - ${t.mobileModalContainerMarginRight});\n      display: inline-flex;\n      margin: ${t.mobileModalContainerMarginTop} ${t.mobileModalContainerMarginRight}\n        ${t.mobileModalContainerMarginBottom} ${t.mobileModalContainerMarginLeft};\n      max-height: calc(100% - ${t.mobileModalContainerMarginTop} - ${t.mobileModalContainerMarginBottom});\n    `;\n  },\n\n  mobileCenterContainerBig(t: Theme) {\n    return css`\n      height: calc(100% - ${t.mobileModalContainerMarginTop} - ${t.mobileModalContainerMarginBottom});\n    `;\n  },\n\n  mobileCenterContainerFullscreen() {\n    return css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n      max-height: 100%;\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      right: ${t.modalCloseButtonClickAreaRight};\n      top: ${t.modalCloseButtonClickAreaTop};\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding-top: ${t.modalCloseButtonClickAreaTop};\n      margin-top: -${t.modalCloseButtonClickAreaTop};\n      padding-right: ${t.modalCloseButtonClickAreaRight};\n      margin-right: -${t.modalCloseButtonClickAreaRight};\n      padding-bottom: ${t.modalCloseButtonClickAreaBottom};\n      margin-bottom: -${t.modalCloseButtonClickAreaBottom};\n      padding-left: ${t.modalCloseButtonClickAreaLeft};\n      margin-left: -${t.modalCloseButtonClickAreaLeft};\n\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeMobile(t: Theme) {\n    return css`\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${t.mobileModalCloseButtonTopPadding};\n      padding: ${t.mobileModalCloseButtonClickArea};\n      margin: -${t.mobileModalCloseButtonClickArea};\n\n      & > svg {\n        width: ${t.mobileModalCloseIconSize};\n        height: ${t.mobileModalCloseIconSize};\n      }\n    `;\n  },\n\n  mobileCloseWithoutHeader(t: Theme) {\n    return css`\n      position: absolute;\n      padding: ${t.mobileModalWithoutHeaderCloseButtonPadding};\n      margin: -${t.mobileModalWithoutHeaderCloseButtonPadding};\n      top: ${t.mobileModalWithoutHeaderCloseButtonPadding};\n      right: ${t.mobileModalWithoutHeaderCloseButtonPadding};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  mobileCloseWrapper(t: Theme) {\n    const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n    return css`\n      position: sticky;\n      right: 0;\n      top: 0;\n      padding: 0;\n      margin: 0;\n      margin-left: auto;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ${t.mobileModalWithoutHeaderCloseButtonWidth};\n      height: 0;\n      background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ${size}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      &:before {\n        content: '';\n        position: absolute;\n        width: calc(${t.modalCloseIconSize} * 2);\n        height: calc(${t.modalCloseIconSize} * 2);\n        box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n        border-radius: 4px;\n      }\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n      font-weight: ${t.modalHeaderFontWeight};\n      border-radius: ${t.modalBorderRadius} ${t.modalBorderRadius} 0 0;\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      position: relative;\n      font-size: ${t.mobileModalHeaderFontSize};\n      line-height: ${t.mobileModalHeaderLineHeight};\n      padding: ${t.mobileModalHeaderPadding};\n    `;\n  },\n\n  titleCut() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      border-radius: ${t.modalBodyBorderRadius};\n      padding-top: ${t.modalBodyPaddingTop};\n      padding-right: ${t.modalPaddingRight};\n      padding-bottom: ${t.modalBodyPaddingBottom};\n      padding-left: ${t.modalPaddingLeft};\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody(t: Theme) {\n    return css`\n      padding: ${t.mobileModalBodyPadding};\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ${t.mobileModalBodyFontSize};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  mobileHeaderWithClose(t: Theme) {\n    return css`\n      padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalFooterTextColor};\n      border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n    `;\n  },\n\n  mobileFooter(t: Theme) {\n    return css`\n      padding: ${t.mobileModalFooterPadding};\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: ${t.modalFixedHeaderMarginBottom};\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n      border-bottom: ${t.modalFixedHeaderBorder};\n      border-radius: 0;\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  mobileFixedHeader(t: Theme) {\n    return css`\n      padding-bottom: ${t.mobileModalHeaderPadding};\n      border-radius: ${t.modalBorderRadius} ${t.modalBorderRadius} 0 0;\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: ${t.modalFixedFooterPaddingTop};\n      margin-top: ${t.modalFixedFooterMarginTop};\n      background: ${t.modalFixedHeaderBg};\n      border-top: ${t.modalFixedFooterBorder};\n      border-radius: 0;\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  mobileFixedFooter(t: Theme) {\n    return css`\n      border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n    `;\n  },\n\n  fixedPanel(t: Theme) {\n    return css`\n      &:before {\n        box-shadow: ${t.modalFixedPanelShadow};\n      }\n    `;\n  },\n\n  headerAddPadding(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalHeaderAdditionalPaddingBottom};\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  mobileBodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileModalBodyPaddingTop};\n      padding-right: ${t.mobileModalWithoutHeaderCloseButtonWidth};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n\n  mobileBodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding: ${t.mobileModalBodyPadding};\n      padding-bottom: ${t.mobileModalBodyPaddingBottom};\n    `;\n  },\n\n  columnFlexContainer() {\n    return css`\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    `;\n  },\n\n  modalSeparatorWrapper() {\n    return css`\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  modalSeparator(t: Theme) {\n    return css`\n      border-bottom: ${t.modalSeparatorBorderBottom};\n      margin: ${t.modalSeparatorMargin};\n      transition: margin 0.3s;\n    `;\n  },\n\n  modalSeparatorFixed(t: Theme) {\n    return css`\n      margin: ${t.modalSeparatorFixedMargin};\n    `;\n  },\n}));\n"]}

package/components/Modal/ModalBody.d.ts

@@ -14,6 +14,9 @@ export declare class ModalBody extends React.Component<ModalBodyProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static __MODAL_BODY__: boolean;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private isMobileLayout;
     getRootNode: TGetRootNode;

package/components/Modal/ModalBody.js

@@ -34,14 +34,14 @@ import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { ResizeDetector } from '../../internal/ResizeDetector/index.js';
 import { ZIndex } from '../../internal/ZIndex/index.js';
-import { cx } from '../../lib/cx.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
 import { getModalBodyTheme } from './getModalBodyTheme.js';
 import { ModalZIndexPriority } from './Modal.constants.js';
-import { styles } from './Modal.css.js';
+import { getStyles } from './Modal.styles.js';
 import { ModalContext } from './ModalContext.js';
 /**
  * Контейнер с отступами для содержимого модального окна.
@@ -59,6 +59,7 @@ var ModalBody = /** @class */ (function (_super) {
     }
     ModalBody.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = getModalBodyTheme(theme);
             return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
@@ -71,14 +72,14 @@ var ModalBody = /** @class */ (function (_super) {
             var _b;
             var additionalPadding = _a.additionalPadding, hasHeader = _a.hasHeader;
             return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
-                React.createElement(ZIndex, { priority: ModalZIndexPriority.Content, className: cx((_b = {},
-                        _b[styles.body] = true,
-                        _b[styles.mobileBody] = _this.isMobileLayout,
-                        _b[styles.bodyWithoutHeader] = !hasHeader,
-                        _b[styles.bodyAddPaddingForPanel] = additionalPadding,
-                        _b[styles.mobileBodyAddPaddingForPanel] = additionalPadding && _this.isMobileLayout,
-                        _b[styles.mobileBodyWithoutHeader] = !hasHeader && _this.isMobileLayout,
-                        _b[styles.bodyWithoutPadding] = noPadding,
+                React.createElement(ZIndex, { priority: ModalZIndexPriority.Content, className: _this.cx((_b = {},
+                        _b[_this.styles.body(_this.theme)] = true,
+                        _b[_this.styles.mobileBody(_this.theme)] = _this.isMobileLayout,
+                        _b[_this.styles.bodyWithoutHeader(_this.theme)] = !hasHeader,
+                        _b[_this.styles.bodyAddPaddingForPanel(_this.theme)] = additionalPadding,
+                        _b[_this.styles.mobileBodyAddPaddingForPanel(_this.theme)] = additionalPadding && _this.isMobileLayout,
+                        _b[_this.styles.mobileBodyWithoutHeader(_this.theme)] = !hasHeader && _this.isMobileLayout,
+                        _b[_this.styles.bodyWithoutPadding()] = noPadding,
                         _b)) }, _this.isMobileLayout ? (React.createElement(ResizeDetector, { onResize: _this.handleResize }, _this.props.children)) : (_this.props.children))));
         }));
     };
@@ -86,6 +87,7 @@ var ModalBody = /** @class */ (function (_super) {
     ModalBody.displayName = 'ModalBody';
     ModalBody.__MODAL_BODY__ = true;
     ModalBody = __decorate([
+        withRenderEnvironment,
         responsiveLayout,
         rootNode
     ], ModalBody);

package/components/Modal/ModalBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["ModalBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { cx } from '../../lib/cx.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getModalBodyTheme } from './getModalBodyTheme.js';\nimport { ModalZIndexPriority } from './Modal.constants.js';\nimport { styles } from './Modal.css.js';\nimport { ModalContext } from './ModalContext.js';\n\nexport interface ModalBodyProps extends CommonProps {\n  /** Убирает отступы. */\n  noPadding?: boolean;\n}\n\n/**\n * Контейнер с отступами для содержимого модального окна.\n *\n * @visibleName Modal.Body\n */\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'ModalBody';\n  public static displayName = 'ModalBody';\n  public static __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getModalBodyTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  public renderMain(): JSX.Element {\n    const { noPadding } = this.props;\n    return (\n      <ModalContext.Consumer>\n        {({ additionalPadding, hasHeader }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <ZIndex\n              priority={ModalZIndexPriority.Content}\n              className={cx({\n                [styles.body]: true,\n                [styles.mobileBody]: this.isMobileLayout,\n                [styles.bodyWithoutHeader]: !hasHeader,\n                [styles.bodyAddPaddingForPanel]: additionalPadding,\n                [styles.mobileBodyAddPaddingForPanel]: additionalPadding && this.isMobileLayout,\n                [styles.mobileBodyWithoutHeader]: !hasHeader && this.isMobileLayout,\n                [styles.bodyWithoutPadding]: noPadding,\n              })}\n            >\n              {this.isMobileLayout ? (\n                <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n              ) : (\n                this.props.children\n              )}\n            </ZIndex>\n          </CommonWrapper>\n        )}\n      </ModalContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["ModalBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getModalBodyTheme } from './getModalBodyTheme.js';\nimport { ModalZIndexPriority } from './Modal.constants.js';\nimport { getStyles } from './Modal.styles.js';\nimport { ModalContext } from './ModalContext.js';\n\nexport interface ModalBodyProps extends CommonProps {\n  /** Убирает отступы. */\n  noPadding?: boolean;\n}\n\n/**\n * Контейнер с отступами для содержимого модального окна.\n *\n * @visibleName Modal.Body\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'ModalBody';\n  public static displayName = 'ModalBody';\n  public static __MODAL_BODY__ = true;\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getModalBodyTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  public renderMain(): JSX.Element {\n    const { noPadding } = this.props;\n    return (\n      <ModalContext.Consumer>\n        {({ additionalPadding, hasHeader }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <ZIndex\n              priority={ModalZIndexPriority.Content}\n              className={this.cx({\n                [this.styles.body(this.theme)]: true,\n                [this.styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [this.styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [this.styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n                [this.styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n                [this.styles.mobileBodyWithoutHeader(this.theme)]: !hasHeader && this.isMobileLayout,\n                [this.styles.bodyWithoutPadding()]: noPadding,\n              })}\n            >\n              {this.isMobileLayout ? (\n                <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n              ) : (\n                this.props.children\n              )}\n            </ZIndex>\n          </CommonWrapper>\n        )}\n      </ModalContext.Consumer>\n    );\n  }\n}\n"]}

package/components/Modal/ModalClose.js

@@ -20,25 +20,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useContext } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
-import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
-import { useGlobal } from '../../lib/renderEnvironment/index.js';
-import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { ModalLocaleHelper } from './locale/index.js';
 import { ModalDataTids } from './Modal.constants.js';
-import { styles } from './Modal.css.js';
+import { getStyles } from './Modal.styles.js';
 export function ModalClose(_a) {
-    var _b;
     var disableClose = _a.disableClose, requestClose = _a.requestClose, otherProps = __rest(_a, ["disableClose", "requestClose"]);
     var locale = useLocaleForControl('Modal', ModalLocaleHelper);
     var globalObject = useGlobal();
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var keyListener = useKeyListener();
-    var _c = React.useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
-    var isMobile = useResponsiveLayout().isMobile;
+    var _b = React.useState(false), focusedByTab = _b[0], setFocusedByTab = _b[1];
     var handleFocus = function () {
         var _a;
         // focus event fires before keyDown eventlistener
@@ -54,12 +55,16 @@ export function ModalClose(_a) {
     };
     var icon = React.createElement(XIcon20Regular, { align: "none" });
     return (React.createElement(CommonWrapper, __assign({}, otherProps),
-        React.createElement("button", { "aria-label": locale.closeButtonAriaLabel, className: cx((_b = {},
-                _b[styles.close] = true,
-                _b[styles.closeMobile] = isMobile,
-                _b[styles.disabled] = disableClose,
-                _b[styles.focus] = focusedByTab,
-                _b)), onClick: requestClose, onFocus: handleFocus, onBlur: handleBlur, "data-tid": ModalDataTids.close, tabIndex: disableClose ? -1 : 0 }, icon)));
+        React.createElement(ResponsiveLayout, null, function (_a) {
+            var _b;
+            var isMobile = _a.isMobile;
+            return (React.createElement("button", { "aria-label": locale.closeButtonAriaLabel, className: cx((_b = {},
+                    _b[styles.close(theme)] = true,
+                    _b[styles.closeMobile(theme)] = isMobile,
+                    _b[styles.disabled(theme)] = disableClose,
+                    _b[styles.focus(theme)] = focusedByTab,
+                    _b)), onClick: requestClose, onFocus: handleFocus, onBlur: handleBlur, "data-tid": ModalDataTids.close, tabIndex: disableClose ? -1 : 0 }, icon));
+        })));
 }
 ModalClose.__KONTUR_REACT_UI__ = 'ModalClose';
 ModalClose.displayName = 'ModalClose';

package/components/Modal/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClose.js","sourceRoot":"","sources":["ModalClose.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,MAAM,UAAU,UAAU,CAAC,EAAyD;;IAAvD,IAAA,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAK,UAAU,cAA3C,gCAA6C,CAAF;IACpE,IAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC/D,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAC/B,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtD,YAAY,QAAA,EAAE,eAAe,QAAyB,CAAC;IACtD,IAAA,QAAQ,GAAK,mBAAmB,EAAE,SAA1B,CAA2B;IAE3C,IAAM,WAAW,GAAG;;QAClB,iDAAiD;QACjD,6CAA6C;QAC7C,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAE7C,OAAO,CACL,oBAAC,aAAa,eAAK,UAAU;QAC3B,8CACc,MAAM,CAAC,oBAAoB,EACvC,SAAS,EAAE,EAAE;gBACX,GAAC,MAAM,CAAC,KAAK,IAAG,IAAI;gBACpB,GAAC,MAAM,CAAC,WAAW,IAAG,QAAQ;gBAC9B,GAAC,MAAM,CAAC,QAAQ,IAAG,YAAY;gBAC/B,GAAC,MAAM,CAAC,KAAK,IAAG,YAAY;oBAC5B,EACF,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,cACR,aAAa,CAAC,KAAK,EAC7B,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE9B,IAAI,CACE,CACK,CACjB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,mBAAmB,GAAG,YAAY,CAAC;AAC9C,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { cx } from '../../lib/cx.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useGlobal } from '../../lib/renderEnvironment/index.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { ModalLocaleHelper } from './locale/index.js';\nimport { ModalDataTids } from './Modal.constants.js';\nimport { styles } from './Modal.css.js';\nimport type { CloseProps } from './ModalContext.js';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): React.JSX.Element {\n  const locale = useLocaleForControl('Modal', ModalLocaleHelper);\n  const globalObject = useGlobal();\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n  const { isMobile } = useResponsiveLayout();\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  const icon = <XIcon20Regular align=\"none\" />;\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <button\n        aria-label={locale.closeButtonAriaLabel}\n        className={cx({\n          [styles.close]: true,\n          [styles.closeMobile]: isMobile,\n          [styles.disabled]: disableClose,\n          [styles.focus]: focusedByTab,\n        })}\n        onClick={requestClose}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        data-tid={ModalDataTids.close}\n        tabIndex={disableClose ? -1 : 0}\n      >\n        {icon}\n      </button>\n    </CommonWrapper>\n  );\n}\n\nModalClose.__KONTUR_REACT_UI__ = 'ModalClose';\nModalClose.displayName = 'ModalClose';\n"]}
+{"version":3,"file":"ModalClose.js","sourceRoot":"","sources":["ModalClose.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,MAAM,UAAU,UAAU,CAAC,EAAyD;IAAvD,IAAA,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAK,UAAU,cAA3C,gCAA6C,CAAF;IACpE,IAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC/D,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACzB,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAC/B,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtD,YAAY,QAAA,EAAE,eAAe,QAAyB,CAAC;IAE9D,IAAM,WAAW,GAAG;;QAClB,iDAAiD;QACjD,6CAA6C;QAC7C,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAE7C,OAAO,CACL,oBAAC,aAAa,eAAK,UAAU;QAC3B,oBAAC,gBAAgB,QACd,UAAC,EAAY;;gBAAV,QAAQ,cAAA;YAAO,OAAA,CACjB,8CACc,MAAM,CAAC,oBAAoB,EACvC,SAAS,EAAE,EAAE;oBACX,GAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAG,IAAI;oBAC3B,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,QAAQ;oBACrC,GAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAG,YAAY;oBACtC,GAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAG,YAAY;wBACnC,EACF,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,cACR,aAAa,CAAC,KAAK,EAC7B,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAE9B,IAAI,CACE,CACV;QAjBkB,CAiBlB,CACgB,CACL,CACjB,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,mBAAmB,GAAG,YAAY,CAAC;AAC9C,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { ModalLocaleHelper } from './locale/index.js';\nimport { ModalDataTids } from './Modal.constants.js';\nimport { getStyles } from './Modal.styles.js';\nimport type { CloseProps } from './ModalContext.js';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): React.JSX.Element {\n  const locale = useLocaleForControl('Modal', ModalLocaleHelper);\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = useContext(ThemeContext);\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  const icon = <XIcon20Regular align=\"none\" />;\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            aria-label={locale.closeButtonAriaLabel}\n            className={cx({\n              [styles.close(theme)]: true,\n              [styles.closeMobile(theme)]: isMobile,\n              [styles.disabled(theme)]: disableClose,\n              [styles.focus(theme)]: focusedByTab,\n            })}\n            onClick={requestClose}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            data-tid={ModalDataTids.close}\n            tabIndex={disableClose ? -1 : 0}\n          >\n            {icon}\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nModalClose.__KONTUR_REACT_UI__ = 'ModalClose';\nModalClose.displayName = 'ModalClose';\n"]}

package/components/Modal/ModalFooter.js

@@ -11,14 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { useContext, useLayoutEffect } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
 import { useGetScrollWidth } from '../../lib/dom/getScrollWidth.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { isNonNullable } from '../../lib/utils.js';
 import { Gapped } from '../Gapped/index.js';
 import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { Sticky } from '../Sticky/index.js';
-import { styles } from './Modal.css.js';
+import { getStyles } from './Modal.styles.js';
 import { ModalContext } from './ModalContext.js';
 import { ModalSeparator } from './ModalSeparator.js';
 export var ModalFooterDataTids = {
@@ -31,6 +31,8 @@ export var ModalFooterDataTids = {
  */
 function ModalFooter(props) {
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     var modal = useContext(ModalContext);
     var layout = useResponsiveLayout();
     var scrollWidth = useGetScrollWidth();
@@ -49,7 +51,7 @@ function ModalFooter(props) {
         if (fixed === void 0) { fixed = false; }
         return (React.createElement("div", null,
             (panel || fixed) && React.createElement(ModalSeparator, { fixed: fixed }),
-            React.createElement("div", { "data-tid": ModalFooterDataTids.root, className: cx(styles.footer, fixed && styles.fixedFooter, Boolean(panel) && styles.panel, fixed && Boolean(panel) && styles.fixedPanel, layout.isMobile && styles.mobileFooter, layout.isMobile && fixed && styles.mobileFixedFooter) }, isNonNullable(gap) ? (React.createElement(Gapped, { vertical: layout.isMobile, gap: gap }, children)) : (children))));
+            React.createElement("div", { "data-tid": ModalFooterDataTids.root, className: cx(styles.footer(theme), fixed && styles.fixedFooter(theme), Boolean(panel) && styles.panel(theme), fixed && Boolean(panel) && styles.fixedPanel(theme), layout.isMobile && styles.mobileFooter(theme), layout.isMobile && fixed && styles.mobileFixedFooter(theme)) }, isNonNullable(gap) ? (React.createElement(Gapped, { vertical: layout.isMobile, gap: gap }, children)) : (children))));
     };
     var getStickyOffset = function () {
         var offset = 0;

package/components/Modal/ModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["ModalFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useLayoutEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { useGetScrollWidth } from '../../lib/dom/getScrollWidth.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { styles } from './Modal.css.js';\nimport { ModalContext } from './ModalContext.js';\nimport { ModalSeparator } from './ModalSeparator.js';\n\nexport interface ModalFooterProps extends CommonProps {\n  /** Включает разделитель перед футером. */\n  panel?: boolean;\n\n  /** Закрепляет футер снизу модального окна при скролле длинной контент-зоны.\n   * @default На десктопе - `true`, на мобильных - `false`. */\n  sticky?: boolean;\n\n  /** Контент футера. */\n  children?: ReactNode;\n\n  /** Расстояние между элементами футера в пикселях. */\n  gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n  root: 'ModalFooter__root',\n} as const;\n\n/**\n * Футер модального окна, где обычно располагаются кнопки основных действий.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n  const scrollWidth = useGetScrollWidth();\n\n  const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasFooter?.(true);\n    modal.setHasPanel?.(panel || false);\n\n    return () => {\n      modal.setHasFooter?.(false);\n      modal.setHasPanel?.(false);\n    };\n  }, [panel]);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        {(panel || fixed) && <ModalSeparator fixed={fixed} />}\n        <div\n          data-tid={ModalFooterDataTids.root}\n          className={cx(\n            styles.footer,\n            fixed && styles.fixedFooter,\n            Boolean(panel) && styles.panel,\n            fixed && Boolean(panel) && styles.fixedPanel,\n            layout.isMobile && styles.mobileFooter,\n            layout.isMobile && fixed && styles.mobileFixedFooter,\n          )}\n        >\n          {isNonNullable(gap) ? (\n            <Gapped vertical={layout.isMobile} gap={gap}>\n              {children}\n            </Gapped>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    let offset = 0;\n    if (modal.horizontalScroll) {\n      offset += scrollWidth;\n    }\n    if (layout.isMobile && !modal.mobileOnFullScreen) {\n      offset += parseInt(theme.mobileModalContainerMarginBottom);\n    }\n    return offset;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky side=\"bottom\" offset={getStickyOffset()}>\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.displayName = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}
+{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["ModalFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useLayoutEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { useGetScrollWidth } from '../../lib/dom/getScrollWidth.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './Modal.styles.js';\nimport { ModalContext } from './ModalContext.js';\nimport { ModalSeparator } from './ModalSeparator.js';\n\nexport interface ModalFooterProps extends CommonProps {\n  /** Включает разделитель перед футером. */\n  panel?: boolean;\n\n  /** Закрепляет футер снизу модального окна при скролле длинной контент-зоны.\n   * @default На десктопе - `true`, на мобильных - `false`. */\n  sticky?: boolean;\n\n  /** Контент футера. */\n  children?: ReactNode;\n\n  /** Расстояние между элементами футера в пикселях. */\n  gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n  root: 'ModalFooter__root',\n} as const;\n\n/**\n * Футер модального окна, где обычно располагаются кнопки основных действий.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n  const scrollWidth = useGetScrollWidth();\n\n  const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasFooter?.(true);\n    modal.setHasPanel?.(panel || false);\n\n    return () => {\n      modal.setHasFooter?.(false);\n      modal.setHasPanel?.(false);\n    };\n  }, [panel]);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        {(panel || fixed) && <ModalSeparator fixed={fixed} />}\n        <div\n          data-tid={ModalFooterDataTids.root}\n          className={cx(\n            styles.footer(theme),\n            fixed && styles.fixedFooter(theme),\n            Boolean(panel) && styles.panel(theme),\n            fixed && Boolean(panel) && styles.fixedPanel(theme),\n            layout.isMobile && styles.mobileFooter(theme),\n            layout.isMobile && fixed && styles.mobileFixedFooter(theme),\n          )}\n        >\n          {isNonNullable(gap) ? (\n            <Gapped vertical={layout.isMobile} gap={gap}>\n              {children}\n            </Gapped>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    let offset = 0;\n    if (modal.horizontalScroll) {\n      offset += scrollWidth;\n    }\n    if (layout.isMobile && !modal.mobileOnFullScreen) {\n      offset += parseInt(theme.mobileModalContainerMarginBottom);\n    }\n    return offset;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky side=\"bottom\" offset={getStickyOffset()}>\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.displayName = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}

package/components/Modal/ModalHeader.js

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { useContext, useLayoutEffect } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { Sticky } from '../Sticky/index.js';
-import { styles } from './Modal.css.js';
+import { getStyles } from './Modal.styles.js';
 import { ModalClose } from './ModalClose.js';
 import { ModalContext } from './ModalContext.js';
 import { ModalSeparator } from './ModalSeparator.js';
@@ -29,6 +29,8 @@ export var ModalHeaderDataTids = {
  */
 function ModalHeader(props) {
     var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     var modal = useContext(ModalContext);
     var layout = useResponsiveLayout();
     var _a = props.sticky, sticky = _a === void 0 ? !layout.isMobile : _a, _b = props.cutTitleOnStuck, cutTitleOnStuck = _b === void 0 ? false : _b, children = props.children;
@@ -40,7 +42,7 @@ function ModalHeader(props) {
     var renderContent = function (fixed) {
         if (fixed === void 0) { fixed = false; }
         return (React.createElement("div", null,
-            React.createElement("div", { "data-tid": ModalHeaderDataTids.root, className: cx(styles.header, layout.isMobile && styles.mobileHeader, Boolean(modal.additionalPadding) && styles.headerAddPadding, fixed && styles.fixedHeader, cutTitleOnStuck && fixed && styles.titleCut, fixed && layout.isMobile && styles.mobileFixedHeader, Boolean(modal.close) && styles.headerWithClose, Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose) },
+            React.createElement("div", { "data-tid": ModalHeaderDataTids.root, className: cx(styles.header(theme), layout.isMobile && styles.mobileHeader(theme), Boolean(modal.additionalPadding) && styles.headerAddPadding(theme), fixed && styles.fixedHeader(theme), cutTitleOnStuck && fixed && styles.titleCut(), fixed && layout.isMobile && styles.mobileFixedHeader(theme), Boolean(modal.close) && styles.headerWithClose(theme), Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme)) },
                 modal.close && (React.createElement(ModalClose, { requestClose: modal.close.requestClose, disableClose: modal.close.disableClose })),
                 children),
             fixed && React.createElement(ModalSeparator, { fixed: fixed })));

package/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["ModalHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useLayoutEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { styles } from './Modal.css.js';\nimport { ModalClose } from './ModalClose.js';\nimport { ModalContext } from './ModalContext.js';\nimport { ModalSeparator } from './ModalSeparator.js';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет заголовок модального окна при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n\n  /**\n   * Обрезает длинный заголовок. Работает с пропом `sticky`.\n   * @default false\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна, состоит из заголовка и крестика закрытия.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, cutTitleOnStuck = false, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.(true);\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header,\n            layout.isMobile && styles.mobileHeader,\n            Boolean(modal.additionalPadding) && styles.headerAddPadding,\n            fixed && styles.fixedHeader,\n            cutTitleOnStuck && fixed && styles.titleCut,\n            fixed && layout.isMobile && styles.mobileFixedHeader,\n            Boolean(modal.close) && styles.headerWithClose,\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose,\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    if (layout.isMobile && !modal.mobileOnFullScreen) {\n      return parseInt(theme.mobileModalContainerMarginTop);\n    }\n    return 0;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky offset={getStickyOffset()} side=\"top\">\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["ModalHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useLayoutEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './Modal.styles.js';\nimport { ModalClose } from './ModalClose.js';\nimport { ModalContext } from './ModalContext.js';\nimport { ModalSeparator } from './ModalSeparator.js';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет заголовок модального окна при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n\n  /**\n   * Обрезает длинный заголовок. Работает с пропом `sticky`.\n   * @default false\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна, состоит из заголовка и крестика закрытия.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, cutTitleOnStuck = false, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.(true);\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            cutTitleOnStuck && fixed && styles.titleCut(),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    if (layout.isMobile && !modal.mobileOnFullScreen) {\n      return parseInt(theme.mobileModalContainerMarginTop);\n    }\n    return 0;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky offset={getStickyOffset()} side=\"top\">\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}

package/components/Modal/ModalSeparator.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import { cx } from '../../lib/cx.js';
-import { styles } from './Modal.css.js';
+import React, { useContext } from 'react';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getStyles } from './Modal.styles.js';
 /**
  * Разделитель
  *
@@ -8,8 +9,11 @@ import { styles } from './Modal.css.js';
  */
 export function ModalSeparator(_a) {
     var fixed = _a.fixed;
-    return (React.createElement("div", { className: styles.modalSeparatorWrapper },
-        React.createElement("div", { className: cx(styles.modalSeparator, fixed && styles.modalSeparatorFixed) })));
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    return (React.createElement("div", { className: styles.modalSeparatorWrapper() },
+        React.createElement("div", { className: cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed(theme)) })));
 }
 ModalSeparator.__KONTUR_REACT_UI__ = 'ModalSeparator';
 ModalSeparator.displayName = 'ModalSeparator';