@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Modal/Modal.styles.js

@@ -0,0 +1,164 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';
+import { resetButton } from '../../lib/styles/Mixins.js';
+export var modalGlobalClasses = prefix('modal')({
+    root: 'root',
+    container: 'container',
+});
+export var styles = memoizeStyle({
+    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: auto;\n    "], ["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\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":["../../../components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { resetButton } from '../../lib/styles/Mixins.js';\n\nexport const modalGlobalClasses = prefix('modal')({\n  root: 'root',\n  container: 'container',\n});\n\nexport const styles = memoizeStyle({\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: auto;\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

@@ -1,22 +1,24 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface ModalBodyProps extends CommonProps {
-    /** Убирает отступы. */
-    noPadding?: boolean;
-}
-/**
- * ModalBody - контейнер с отступами от края модалки.
- *
- * @visibleName Modal.Body
- */
-export declare class ModalBody extends React.Component<ModalBodyProps> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static __MODAL_BODY__: boolean;
-    private theme;
-    private isMobileLayout;
-    private setRootNode;
-    render(): React.JSX.Element;
-    private handleResize;
-    renderMain(): JSX.Element;
-}
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
+export interface ModalBodyProps extends CommonProps {
+    /** Убирает отступы. */
+    noPadding?: boolean;
+}
+/**
+ * ModalBody - контейнер с отступами от края модалки.
+ *
+ * @visibleName Modal.Body
+ */
+export declare class ModalBody extends React.Component<ModalBodyProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static __MODAL_BODY__: boolean;
+    private theme;
+    private isMobileLayout;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    render(): React.JSX.Element;
+    private handleResize;
+    renderMain(): JSX.Element;
+}

package/components/Modal/ModalBody.js

@@ -0,0 +1,95 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { ZIndex } from '../../internal/ZIndex/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
+import * as LayoutEvents from '../../lib/LayoutEvents.js';
+import { ResizeDetector } from '../../internal/ResizeDetector/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { ModalContext } from './ModalContext.js';
+import { styles } from './Modal.styles.js';
+import { getModalBodyTheme } from './getModalBodyTheme.js';
+import { ModalZIndexPriority } from './Modal.js';
+/**
+ * ModalBody - контейнер с отступами от края модалки.
+ *
+ * @visibleName Modal.Body
+ */
+var ModalBody = /** @class */ (function (_super) {
+    __extends(ModalBody, _super);
+    function ModalBody() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleResize = function () {
+            LayoutEvents.emit();
+        };
+        return _this;
+    }
+    ModalBody.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = getModalBodyTheme(theme);
+            return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
+        }));
+    };
+    ModalBody.prototype.renderMain = function () {
+        var _this = this;
+        var noPadding = this.props.noPadding;
+        return (React.createElement(ModalContext.Consumer, null, function (_a) {
+            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(_this.theme)] = true,
+                        _b[styles.mobileBody(_this.theme)] = _this.isMobileLayout,
+                        _b[styles.bodyWithoutHeader(_this.theme)] = !hasHeader,
+                        _b[styles.bodyAddPaddingForPanel(_this.theme)] = additionalPadding,
+                        _b[styles.mobileBodyAddPaddingForPanel(_this.theme)] = additionalPadding && _this.isMobileLayout,
+                        _b[styles.mobileBodyWithoutHeader(_this.theme)] = !hasHeader && _this.isMobileLayout,
+                        _b[styles.bodyWithoutPadding()] = noPadding,
+                        _b)) }, _this.isMobileLayout ? (React.createElement(ResizeDetector, { onResize: _this.handleResize }, _this.props.children)) : (_this.props.children))));
+        }));
+    };
+    ModalBody.__KONTUR_REACT_UI__ = 'ModalBody';
+    ModalBody.displayName = 'ModalBody';
+    ModalBody.__MODAL_BODY__ = true;
+    ModalBody = __decorate([
+        responsiveLayout,
+        rootNode
+    ], ModalBody);
+    return ModalBody;
+}(React.Component));
+export { ModalBody };
+//# sourceMappingURL=ModalBody.js.map

package/components/Modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../components/Modal/ModalBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\n\nimport { ModalContext } from './ModalContext.js';\nimport { styles } from './Modal.styles.js';\nimport { getModalBodyTheme } from './getModalBodyTheme.js';\nimport { ModalZIndexPriority } from './Modal.js';\n\nexport interface ModalBodyProps extends CommonProps {\n  /** Убирает отступы. */\n  noPadding?: boolean;\n}\n\n/**\n * ModalBody - контейнер с отступами от края модалки.\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() {\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(this.theme)]: true,\n                [styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n                [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n                [styles.mobileBodyWithoutHeader(this.theme)]: !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"]}

package/components/Modal/ModalClose.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { CloseProps } from './ModalContext';
-export declare function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): React.JSX.Element;
-export declare namespace ModalClose {
-    var __KONTUR_REACT_UI__: string;
-    var displayName: string;
-}
+import React from 'react';
+import type { CloseProps } from './ModalContext.js';
+export declare function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): React.JSX.Element;
+export declare namespace ModalClose {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+}

package/components/Modal/ModalClose.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { keyListener } from '../../lib/events/keyListener.js';
+import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
+import { styles } from './Modal.styles.js';
+import { ModalDataTids } from './Modal.js';
+import { ModalLocaleHelper } from './locale/index.js';
+export function ModalClose(_a) {
+    var disableClose = _a.disableClose, requestClose = _a.requestClose, otherProps = __rest(_a, ["disableClose", "requestClose"]);
+    var locale = useLocaleForControl('Modal', ModalLocaleHelper);
+    var theme = useContext(ThemeContext);
+    var _b = React.useState(false), focusedByTab = _b[0], setFocusedByTab = _b[1];
+    var handleFocus = function () {
+        var _a;
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        (_a = globalObject.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
+            if (keyListener.isTabPressed) {
+                setFocusedByTab(true);
+            }
+        });
+    };
+    var handleBlur = function () {
+        setFocusedByTab(false);
+    };
+    var icon = React.createElement(XIcon20Regular, { align: "none" });
+    return (React.createElement(CommonWrapper, __assign({}, otherProps),
+        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';
+//# sourceMappingURL=ModalClose.js.map

package/components/Modal/ModalClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalClose.js","sourceRoot":"","sources":["../../../components/Modal/ModalClose.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAGlF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,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,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACjC,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';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { keyListener } from '../../lib/events/keyListener.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\n\nimport type { CloseProps } from './ModalContext.js';\nimport { styles } from './Modal.styles.js';\nimport { ModalDataTids } from './Modal.js';\nimport { ModalLocaleHelper } from './locale/index.js';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\n  const locale = useLocaleForControl('Modal', ModalLocaleHelper);\n  const theme = useContext(ThemeContext);\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/ModalContext.d.ts

@@ -1,18 +1,19 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface CloseProps extends CommonProps {
-    /** Отключает событие onClose, также дизейблит кнопку закрытия модалки. */
-    disableClose?: boolean;
-    /** Задает функцию, которая вызывается при клике по крестику или снаружи. */
-    requestClose: () => void;
-}
-export interface ModalContextProps {
-    additionalPadding?: boolean;
-    hasHeader?: boolean;
-    close?: CloseProps;
-    horizontalScroll?: boolean;
-    setHasHeader?: (value: boolean) => void;
-    setHasFooter?: (value: boolean) => void;
-    setHasPanel?: (value: boolean) => void;
-}
-export declare const ModalContext: React.Context<ModalContextProps>;
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+export interface CloseProps extends CommonProps {
+    /** Отключает событие onClose, также дизейблит кнопку закрытия модалки. */
+    disableClose?: boolean;
+    /** Задает функцию, которая вызывается при клике по крестику или снаружи. */
+    requestClose: () => void;
+}
+export interface ModalContextProps {
+    additionalPadding?: boolean;
+    hasHeader?: boolean;
+    close?: CloseProps;
+    horizontalScroll?: boolean;
+    setHasHeader?: (value: boolean) => void;
+    setHasFooter?: (value: boolean) => void;
+    setHasPanel?: (value: boolean) => void;
+    mobileOnFullScreen?: boolean;
+}
+export declare const ModalContext: React.Context<ModalContextProps>;

package/components/Modal/ModalContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export var ModalContext = React.createContext({});
+ModalContext.displayName = 'ModalContext';
+//# sourceMappingURL=ModalContext.js.map

package/components/Modal/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../../components/Modal/ModalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAoB,EAAE,CAAC,CAAC;AAEvE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\n\nexport interface CloseProps extends CommonProps {\n  /** Отключает событие onClose, также дизейблит кнопку закрытия модалки. */\n  disableClose?: boolean;\n\n  /** Задает функцию, которая вызывается при клике по крестику или снаружи. */\n  requestClose: () => void;\n}\n\nexport interface ModalContextProps {\n  additionalPadding?: boolean;\n  hasHeader?: boolean;\n  close?: CloseProps;\n  horizontalScroll?: boolean;\n  setHasHeader?: (value: boolean) => void;\n  setHasFooter?: (value: boolean) => void;\n  setHasPanel?: (value: boolean) => void;\n  mobileOnFullScreen?: boolean;\n}\n\nexport const ModalContext = React.createContext<ModalContextProps>({});\n\nModalContext.displayName = 'ModalContext';\n"]}

package/components/Modal/ModalFooter.d.ts

@@ -1,29 +1,30 @@
-import React, { ReactNode } from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { GappedProps } from '../Gapped';
-export interface ModalFooterProps extends CommonProps {
-    /** Включает серый цвет в футере. */
-    panel?: boolean;
-    /** Закрепляет футер снизу модального окна.
-     * @default На десктопе - `true`, на мобильных - `false`. */
-    sticky?: boolean;
-    /** Задает контент футера. */
-    children?: ReactNode;
-    /** Задает расстояние между элементами футера в пикселях. */
-    gap?: GappedProps['gap'];
-}
-export declare const ModalFooterDataTids: {
-    readonly root: "ModalFooter__root";
-};
-/**
- * Футер модального окна.
- *
- * @visibleName Modal.Footer
- */
-declare function ModalFooter(props: ModalFooterProps): React.JSX.Element;
-declare namespace ModalFooter {
-    var __KONTUR_REACT_UI__: string;
-    var displayName: string;
-    var __MODAL_FOOTER__: boolean;
-}
-export { ModalFooter };
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { GappedProps } from '../Gapped/index.js';
+export interface ModalFooterProps extends CommonProps {
+    /** Включает серый цвет в футере. */
+    panel?: boolean;
+    /** Закрепляет футер снизу модального окна.
+     * @default На десктопе - `true`, на мобильных - `false`. */
+    sticky?: boolean;
+    /** Задает контент футера. */
+    children?: ReactNode;
+    /** Задает расстояние между элементами футера в пикселях. */
+    gap?: GappedProps['gap'];
+}
+export declare const ModalFooterDataTids: {
+    readonly root: "ModalFooter__root";
+};
+/**
+ * Футер модального окна.
+ *
+ * @visibleName Modal.Footer
+ */
+declare function ModalFooter(props: ModalFooterProps): React.JSX.Element;
+declare namespace ModalFooter {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+    var __MODAL_FOOTER__: boolean;
+}
+export { ModalFooter };