@skbkontur/react-ui 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
@@ -15,7 +15,7 @@ export var styles = memoizeStyle({
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\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    "])));
   },
   window: function window(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ", ";\n      border-radius: ", ";\n    "])), t.modalBg, t.modalBorderRadius);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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 mobileWindow() {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
@@ -58,71 +58,74 @@ export var styles = memoizeStyle({
   focus: function focus(t) {
     return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
   },
-  headerWrapper: function headerWrapper() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
-  },
   header: function header(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor, t.modalHeaderFontWeight);
   },
   mobileHeader: function mobileHeader(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
   },
   body: function body(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " ", " ", ";\n      color: ", ";\n    "])), t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft, t.modalBodyTextColor);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      padding: 0 ", " ", " ", ";\n      color: ", ";\n    "])), t.modalBodyBorderRadius, t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft, t.modalBodyTextColor);
   },
   mobileBody: function mobileBody(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      padding-top: 0px;\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyFontSize);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      padding-top: 0px;\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyFontSize);
   },
   headerWithClose: function headerWithClose(t) {
     var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
   },
   mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
   },
   footer: function footer(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft, t.modalFooterTextColor, t.modalBorderRadius, t.modalBorderRadius);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\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 mobileFooter(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
-  },
-  footerWrapper: function footerWrapper() {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
   },
   panel: function panel(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
   },
   fixedHeader: function fixedHeader(t) {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\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.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderBorder, t.modalFixedHeaderShadow);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\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 mobileFixedHeader(t) {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
   },
   fixedFooter: function fixedFooter(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n      border-top: ", ";\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.modalFixedHeaderBg, t.modalFixedFooterBorder, t.modalFixedFooterShadow);
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      margin-top: ", ";\n      background: ", ";\n      border-top: ", ";\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);
   },
   fixedPanel: function fixedPanel(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
   },
-  headerAddPadding: function headerAddPadding() {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "])));
+  headerAddPadding: function headerAddPadding(t) {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
   },
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
   },
   mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
   },
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
   },
   mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalBodyPadding);
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalBodyPadding);
   },
   columnFlexContainer: function columnFlexContainer() {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: scroll;\n    "])));
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+  },
+  modalSeparatorWrapper: function modalSeparatorWrapper() {
+    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
+  },
+  modalSeparator: function modalSeparator(t) {
+    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
+  },
+  modalSeparatorFixed: function modalSeparatorFixed() {
+    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"wxBAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,IADiC,kBAC1B;AACL,WAAOJ,GAAP;;;;;;;AAOD,GATgC;;AAWjCK,EAAAA,EAXiC,cAW9BC,CAX8B,EAWpB;AACX,WAAON,GAAP;;;;;;AAMgBM,IAAAA,CAAC,CAACC,WANlB;AAOaD,IAAAA,CAAC,CAACE,gBAPf;;AASD,GArBgC;;AAuBjCC,EAAAA,SAvBiC,uBAuBrB;AACV,WAAOT,GAAP;;;;;;;;;;;;;;;AAeD,GAvCgC;;AAyCjCU,EAAAA,MAzCiC,kBAyC1BJ,CAzC0B,EAyChB;AACf,WAAON,GAAP;;;;;AAKgBM,IAAAA,CAAC,CAACK,OALlB;AAMmBL,IAAAA,CAAC,CAACM,iBANrB;;AAQD,GAlDgC;;AAoDjCC,EAAAA,YApDiC,0BAoDlB;AACb,WAAOb,GAAP;;;;;AAKD,GA1DgC;;AA4DjCc,EAAAA,eA5DiC,6BA4Df;AAChB,WAAOd,GAAP;;;;;;;;;AASD,GAtEgC;;AAwEjCe,EAAAA,qBAxEiC,mCAwET;AACtB,WAAOf,GAAP;;;;;AAKD,GA9EgC;;AAgFjCgB,EAAAA,QAhFiC,sBAgFtB;AACT,WAAOhB,GAAP;;;AAGD,GApFgC;;AAsFjCiB,EAAAA,KAtFiC,iBAsF3BX,CAtF2B,EAsFjB;AACd,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,WAAOpB,GAAP;AACIE,IAAAA,WAAW,EADf;;;AAIWgB,IAAAA,OAJX;AAKSA,IAAAA,OALT;;;;AASWZ,IAAAA,CAAC,CAACe,qBATb;;;AAYaf,IAAAA,CAAC,CAACgB,yBAZf;AAaahB,IAAAA,CAAC,CAACgB,yBAbf;;;AAgBahB,IAAAA,CAAC,CAACiB,0BAhBf;;;;AAoBajB,IAAAA,CAAC,CAACkB,kBApBf;AAqBclB,IAAAA,CAAC,CAACkB,kBArBhB;;;;AAyBD,GAjHgC;;AAmHjCC,EAAAA,WAnHiC,uBAmHrBnB,CAnHqB,EAmHX;AACpB,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACoB,kCADb;AAESP,IAAAA,QAAQ,CAACb,CAAC,CAACqB,gCAAH,CAAR,GAA+CR,QAAQ,CAACb,CAAC,CAACsB,wBAAH,CAFhE;AAGatB,IAAAA,CAAC,CAACuB,+BAHf;AAIavB,IAAAA,CAAC,CAACuB,+BAJf;;;AAOavB,IAAAA,CAAC,CAACwB,wBAPf;AAQcxB,IAAAA,CAAC,CAACwB,wBARhB;;;AAWD,GA/HgC;;AAiIjCC,EAAAA,wBAjIiC,sCAiIN;AACzB,WAAO/B,GAAP;;;AAGD,GArIgC;;AAuIjCgC,EAAAA,YAvIiC,wBAuIpB1B,CAvIoB,EAuIV;AACrB,QAAMY,OAAO,GAAGC,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAxB;AACA,QAAMa,aAAa,GAAGd,QAAQ,CAACb,CAAC,CAAC4B,6BAAH,CAA9B;AACA,QAAMC,SAAS,GAAGhB,QAAQ,CAACb,CAAC,CAAC8B,0BAAH,CAA1B;AACA,QAAMC,WAAW,GAAGlB,QAAQ,CAACb,CAAC,CAACgC,2BAAH,CAA5B;AACA,QAAMC,UAAU,GAAGpB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiC,IAAIN,OAArC,GAA+CmB,WAAlE;AACA,QAAMG,UAAU,GAAGrB,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAR,GAAiCN,OAAjC,GAA2Ce,aAA3C,GAA2DE,SAA9E;AACA,WAAOnC,GAAP;;;AAGWuC,IAAAA,UAAU,GAAGJ,SAHxB;AAIYK,IAAAA,UAJZ;;AAMD,GApJgC;;AAsJjCC,EAAAA,kBAtJiC,8BAsJdnC,CAtJc,EAsJJ;AAC3B,QAAMoC,IAAI,GAAGvB,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CAAR,GAAuCX,QAAQ,CAACb,CAAC,CAACuB,+BAAH,CAAR,GAA8C,CAAlG;;AAEA,WAAO7B,GAAP;;AAEWM,IAAAA,CAAC,CAACoB,kCAFb;AAGSpB,IAAAA,CAAC,CAACqB,gCAHX;;;;;;AASWe,IAAAA,IATX;AAUYA,IAAAA,IAVZ;AAWoDpC,IAAAA,CAAC,CAACqC,SAXtD;AAYmBD,IAAAA,IAZnB;;AAcD,GAvKgC;;AAyKjCE,EAAAA,QAzKiC,oBAyKxBtC,CAzKwB,EAyKd;AACjB,WAAON,GAAP;;;AAGWM,IAAAA,CAAC,CAACuC,6BAHb;;AAKD,GA/KgC;;AAiLjCC,EAAAA,KAjLiC,iBAiL3BxC,CAjL2B,EAiLjB;AACd,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACiB,0BADb;AAEuBjB,IAAAA,CAAC,CAACyC,gBAFzB;;AAID,GAtLgC;;AAwLjCC,EAAAA,aAxLiC,2BAwLjB;AACd,WAAOhD,GAAP;;;AAGD,GA5LgC;;AA8LjCiD,EAAAA,MA9LiC,kBA8L1B3C,CA9L0B,EA8LhB;AACf,WAAON,GAAP;AACeM,IAAAA,CAAC,CAAC4C,mBADjB;AAEiB5C,IAAAA,CAAC,CAAC6C,qBAFnB;AAGa7C,IAAAA,CAAC,CAAC8C,qBAHf,EAGwC9C,CAAC,CAAC+C,iBAH1C,EAG+D/C,CAAC,CAACgD,wBAHjE,EAG6FhD,CAAC,CAACiD,gBAH/F;;;AAMWjD,IAAAA,CAAC,CAACkD,oBANb;;AAQD,GAvMgC;;AAyMjCC,EAAAA,YAzMiC,wBAyMpBnD,CAzMoB,EAyMV;AACrB,WAAON,GAAP;AACeM,IAAAA,CAAC,CAACoD,yBADjB;AAEiBpD,IAAAA,CAAC,CAACqD,2BAFnB;AAGarD,IAAAA,CAAC,CAACsB,wBAHf;;AAKD,GA/MgC;;AAiNjCgC,EAAAA,IAjNiC,gBAiN5BtD,CAjN4B,EAiNlB;AACb,WAAON,GAAP;AACeM,IAAAA,CAAC,CAAC+C,iBADjB,EACsC/C,CAAC,CAACuD,sBADxC,EACkEvD,CAAC,CAACiD,gBADpE;AAEWjD,IAAAA,CAAC,CAACwD,kBAFb;;AAID,GAtNgC;;AAwNjCC,EAAAA,UAxNiC,sBAwNtBzD,CAxNsB,EAwNZ;AACnB,WAAON,GAAP;AACaM,IAAAA,CAAC,CAAC0D,sBADf;;;;;AAMe1D,IAAAA,CAAC,CAAC2D,uBANjB;;AAQD,GAjOgC;;AAmOjCC,EAAAA,eAnOiC,2BAmOjB5D,CAnOiB,EAmOP;AACxB,QAAM6D,YAAY;AAChB,QAAIhD,QAAQ,CAACb,CAAC,CAACc,uBAAH,CAAZ,GAA0CD,QAAQ,CAACb,CAAC,CAACkB,kBAAH,CAAlD,GAA2EL,QAAQ,CAACb,CAAC,CAAC8D,mBAAH,CADrF;;AAGA,WAAOpE,GAAP;AACmBmE,IAAAA,YADnB;;AAGD,GA1OgC;;AA4OjCE,EAAAA,qBA5OiC,iCA4OX/D,CA5OW,EA4OD;AAC9B,WAAON,GAAP;AACmB,QAAImB,QAAQ,CAACb,CAAC,CAACoB,kCAAH,CAAZ,GAAqDP,QAAQ,CAACb,CAAC,CAACwB,wBAAH,CADhF;;AAGD,GAhPgC;;AAkPjCwC,EAAAA,MAlPiC,kBAkP1BhE,CAlP0B,EAkPhB;AACf,WAAON,GAAP;AACaM,IAAAA,CAAC,CAACiE,qBADf,EACwCjE,CAAC,CAAC+C,iBAD1C,EAC+D/C,CAAC,CAACkE,wBADjE,EAC6FlE,CAAC,CAACiD,gBAD/F;AAEWjD,IAAAA,CAAC,CAACmE,oBAFb;AAGuBnE,IAAAA,CAAC,CAACM,iBAHzB,EAG8CN,CAAC,CAACM,iBAHhD;;AAKD,GAxPgC;;AA0PjC8D,EAAAA,YA1PiC,wBA0PpBpE,CA1PoB,EA0PV;AACrB,WAAON,GAAP;AACaM,IAAAA,CAAC,CAACqE,wBADf;;AAGD,GA9PgC;;AAgQjCC,EAAAA,aAhQiC,2BAgQjB;AACd,WAAO5E,GAAP;;;AAGD,GApQgC;;AAsQjC6E,EAAAA,KAtQiC,iBAsQ3BvE,CAtQ2B,EAsQjB;AACd,WAAON,GAAP;AACiBM,IAAAA,CAAC,CAACwE,0BADnB;AAEoBxE,IAAAA,CAAC,CAACyE,6BAFtB;AAGgBzE,IAAAA,CAAC,CAAC0E,aAHlB;;AAKD,GA5QgC;;AA8QjCC,EAAAA,WA9QiC,uBA8QrB3E,CA9QqB,EA8QX;AACpB,WAAON,GAAP;;AAEoBM,IAAAA,CAAC,CAAC4E,6BAFtB;AAGgB5E,IAAAA,CAAC,CAAC6E,kBAHlB;AAImB7E,IAAAA,CAAC,CAAC8E,sBAJrB;;;;;;;;;;AAckB9E,IAAAA,CAAC,CAAC+E,sBAdpB;;;AAiBD,GAhSgC;;AAkSjCC,EAAAA,iBAlSiC,6BAkSfhF,CAlSe,EAkSL;AAC1B,WAAON,GAAP;AACoBM,IAAAA,CAAC,CAACsB,wBADtB;;AAGD,GAtSgC;;AAwSjC2D,EAAAA,WAxSiC,uBAwSrBjF,CAxSqB,EAwSX;AACpB,WAAON,GAAP;;;AAGgBM,IAAAA,CAAC,CAAC6E,kBAHlB;AAIgB7E,IAAAA,CAAC,CAACkF,sBAJlB;;;;;;;;;;AAckBlF,IAAAA,CAAC,CAACmF,sBAdpB;;;AAiBD,GA1TgC;;AA4TjCC,EAAAA,UA5TiC,sBA4TtBpF,CA5TsB,EA4TZ;AACnB,WAAON,GAAP;;AAEkBM,IAAAA,CAAC,CAACqF,qBAFpB;;;AAKD,GAlUgC;;AAoUjCC,EAAAA,gBApUiC,8BAoUd;AACjB,WAAO5F,GAAP;;;AAGD,GAxUgC;;AA0UjC6F,EAAAA,iBA1UiC,6BA0UfvF,CA1Ue,EA0UL;AAC1B,WAAON,GAAP;AACiBM,IAAAA,CAAC,CAACwF,eADnB;;AAGD,GA9UgC;;AAgVjCC,EAAAA,uBAhViC,qCAgVP;AACxB,WAAO/F,GAAP;;;AAGD,GApVgC;;AAsVjCgG,EAAAA,kBAtViC,gCAsVZ;AACnB,WAAOhG,GAAP;;;AAGD,GA1VgC;;AA4VjCiG,EAAAA,sBA5ViC,kCA4VV3F,CA5VU,EA4VA;AAC/B,WAAON,GAAP;AACoBM,IAAAA,CAAC,CAAC4F,kBADtB;;AAGD,GAhWgC;;AAkWjCC,EAAAA,4BAlWiC,wCAkWJ7F,CAlWI,EAkWM;AACrC,WAAON,GAAP;AACoBM,IAAAA,CAAC,CAAC0D,sBADtB;;AAGD,GAtWgC;;AAwWjCoC,EAAAA,mBAxWiC,iCAwWX;AACpB,WAAOpG,GAAP;;;;;;AAMD,GA/WgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\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      overflow-y: auto;\n      outline: none;\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    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\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  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() {\n    return css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\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  mobileClose(t: Theme) {\n    return css`\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\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() {\n    return css`\n      position: static;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}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: absolute;\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${t.mobileModalCloseButtonTopPadding};\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ${size}px;\n      height: ${size}px;\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      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\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    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileModalHeaderFontSize};\n      line-height: ${t.mobileModalHeaderLineHeight};\n      padding: ${t.mobileModalHeaderPadding};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody(t: Theme) {\n    return css`\n      padding: ${t.mobileModalBodyPadding};\n      padding-top: 0px;\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 =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\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  footerWrapper() {\n    return css`\n      position: relative;\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: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n      border-bottom: ${t.modalFixedHeaderBorder};\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    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n      border-top: ${t.modalFixedFooterBorder};\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  fixedPanel(t: Theme) {\n    return css`\n      &:before {\n        box-shadow: ${t.modalFixedPanelShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  mobileBodyWithoutHeader() {\n    return css`\n      padding-top: 0px;\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-bottom: ${t.mobileModalBodyPadding};\n    `;\n  },\n\n  columnFlexContainer() {\n    return css`\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: scroll;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","modalWindowShadow","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","modalHeaderFontWeight","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyBorderRadius","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderMarginBottom","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterPaddingTop","modalFixedFooterMarginTop","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","modalHeaderAdditionalPaddingBottom","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer","modalSeparatorWrapper","modalSeparator","modalSeparatorBorderBottom","modalSeparatorFixed"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\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      overflow-y: auto;\n      outline: none;\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    `;\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  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() {\n    return css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\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  mobileClose(t: Theme) {\n    return css`\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\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() {\n    return css`\n      position: static;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}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: absolute;\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${t.mobileModalCloseButtonTopPadding};\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ${size}px;\n      height: ${size}px;\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      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\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    `;\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  body(t: Theme) {\n    return css`\n      border-radius: ${t.modalBodyBorderRadius};\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody(t: Theme) {\n    return css`\n      padding: ${t.mobileModalBodyPadding};\n      padding-top: 0px;\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 =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\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\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    `;\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\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  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() {\n    return css`\n      padding-top: 0px;\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-bottom: ${t.mobileModalBodyPadding};\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: 0 32px;\n      transition: margin 0.3s;\n    `;\n  },\n\n  modalSeparatorFixed() {\n    return css`\n      margin: 0 16px;\n    `;\n  },\n});\n"]}

package/components/Modal/Modal.styles.d.ts

@@ -15,7 +15,6 @@ export declare const styles: {
     mobileCloseWrapper(t: Theme): string;
     disabled(t: Theme): string;
     focus(t: Theme): string;
-    headerWrapper(): string;
     header(t: Theme): string;
     mobileHeader(t: Theme): string;
     body(t: Theme): string;
@@ -24,17 +23,19 @@ export declare const styles: {
     mobileHeaderWithClose(t: Theme): string;
     footer(t: Theme): string;
     mobileFooter(t: Theme): string;
-    footerWrapper(): string;
     panel(t: Theme): string;
     fixedHeader(t: Theme): string;
     mobileFixedHeader(t: Theme): string;
     fixedFooter(t: Theme): string;
     fixedPanel(t: Theme): string;
-    headerAddPadding(): string;
+    headerAddPadding(t: Theme): string;
     bodyWithoutHeader(t: Theme): string;
     mobileBodyWithoutHeader(): string;
     bodyWithoutPadding(): string;
     bodyAddPaddingForPanel(t: Theme): string;
     mobileBodyAddPaddingForPanel(t: Theme): string;
     columnFlexContainer(): string;
+    modalSeparatorWrapper(): string;
+    modalSeparator(t: Theme): string;
+    modalSeparatorFixed(): string;
 };

package/components/Modal/ModalBody/ModalBody.js

@@ -14,6 +14,7 @@ import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { rootNode } from "../../../lib/rootNode";
 import { ModalContext } from "../ModalContext";
 import { styles } from "../Modal.styles";
+import { getModalBodyTheme } from "../getModalBodyTheme";
 export
 /**
 * Контейнер с отступами от края модалки
@@ -45,8 +46,10 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+      _this2.theme = getModalBodyTheme(theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
     });
   };
 
@@ -62,8 +65,6 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this3.setRootNode
       }, _this3.props), /*#__PURE__*/React.createElement(ZIndex, {
-        priority: 'ModalBody',
-        createStackingContext: true,
         className: cx((_cx = {}, _cx[styles.body(_this3.theme)] = true, _cx[styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _cx[styles.bodyWithoutHeader(_this3.theme)] = !hasHeader, _cx[styles.mobileBodyWithoutHeader()] = !hasHeader && _this3.isMobileLayout, _cx[styles.bodyAddPaddingForPanel(_this3.theme)] = additionalPadding, _cx[styles.mobileBodyAddPaddingForPanel(_this3.theme)] = additionalPadding && _this3.isMobileLayout, _cx[styles.bodyWithoutPadding()] = noPadding, _cx))
       }, _this3.isMobileLayout ? /*#__PURE__*/React.createElement(ResizeDetector, {
         onResize: _this3.handleResize

package/components/Modal/ModalBody/ModalBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalBody.tsx"],"names":["React","ThemeContext","ZIndex","CommonWrapper","cx","responsiveLayout","LayoutEvents","ResizeDetector","rootNode","ModalContext","styles","ModalBody","handleResize","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,cAAT,QAA+B,+BAA/B;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,MAAT,QAAuB,gBAAvB;;;;;;;;;;;;;;;;AAgBA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,SAAb,GAFCN,gBAED,UADCG,QACD;;;;;;;;;;;;;;;AAmBUI,IAAAA,YAnBV,GAmByB,YAAM;AAC3BN,MAAAA,YAAY,CAACO,IAAb;AACD,KArBH,uDAQSC,MART,GAQE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAjBH;;AAuBSA,EAAAA,UAvBT,GAuBE,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,8BAAC,MAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAEd,EAAE;AACVM,YAAAA,MAAM,CAACY,IAAP,CAAY,MAAI,CAACP,KAAjB,CADU,IACgB,IADhB;AAEVL,YAAAA,MAAM,CAACa,UAAP,CAAkB,MAAI,CAACR,KAAvB,CAFU,IAEsB,MAAI,CAACS,cAF3B;AAGVd,YAAAA,MAAM,CAACe,iBAAP,CAAyB,MAAI,CAACV,KAA9B,CAHU,IAG6B,CAACK,SAH9B;AAIVV,YAAAA,MAAM,CAACgB,uBAAP,EAJU,IAIyB,CAACN,SAAD,IAAc,MAAI,CAACI,cAJ5C;AAKVd,YAAAA,MAAM,CAACiB,sBAAP,CAA8B,MAAI,CAACZ,KAAnC,CALU,IAKkCI,iBALlC;AAMVT,YAAAA,MAAM,CAACkB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwCI,iBAAiB,IAAI,MAAI,CAACK,cANlE;AAOVd,YAAAA,MAAM,CAACmB,kBAAP,EAPU,IAOoBZ,SAPpB,OAHf;;;AAaG,UAAA,MAAI,CAACO,cAAL;AACC,8BAAC,cAAD,IAAgB,QAAQ,EAAE,MAAI,CAACZ,YAA/B,IAA8C,MAAI,CAACM,KAAL,CAAWY,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACZ,KAAL,CAAWY,QAhBf,CADF,CADD,GADH,CADF;;;;;;;AA2BD,GApDH,oBAA+B9B,KAAK,CAAC+B,SAArC,WACgBC,mBADhB,GACsC,WADtC,UAEgBC,cAFhB,GAEiC,IAFjC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport interface ModalBodyProps extends CommonProps {\n  /**\n   * убирает отступы\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 __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\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={'ModalBody'}\n              createStackingContext\n              className={cx({\n                [styles.body(this.theme)]: true,\n                [styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [styles.mobileBodyWithoutHeader()]: !hasHeader && this.isMobileLayout,\n                [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n                [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && 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,"sources":["ModalBody.tsx"],"names":["React","ThemeContext","ZIndex","CommonWrapper","cx","responsiveLayout","LayoutEvents","ResizeDetector","rootNode","ModalContext","styles","getModalBodyTheme","ModalBody","handleResize","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,cAAT,QAA+B,+BAA/B;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;;;;;;;;;;;AAgBA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,SAAb,GAFCP,gBAED,UADCG,QACD;;;;;;;;;;;;;;;AAmBUK,IAAAA,YAnBV,GAmByB,YAAM;AAC3BP,MAAAA,YAAY,CAACQ,IAAb;AACD,KArBH,uDAQSC,MART,GAQE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaL,iBAAiB,CAACK,KAAD,CAA9B,CACA,oBAAO,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACC,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,CAjBH;;AAuBSA,EAAAA,UAvBT,GAuBE,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,8BAAC,MAAD;AACE,YAAA,SAAS,EAAEf,EAAE;AACVM,YAAAA,MAAM,CAACa,IAAP,CAAY,MAAI,CAACP,KAAjB,CADU,IACgB,IADhB;AAEVN,YAAAA,MAAM,CAACc,UAAP,CAAkB,MAAI,CAACR,KAAvB,CAFU,IAEsB,MAAI,CAACS,cAF3B;AAGVf,YAAAA,MAAM,CAACgB,iBAAP,CAAyB,MAAI,CAACV,KAA9B,CAHU,IAG6B,CAACK,SAH9B;AAIVX,YAAAA,MAAM,CAACiB,uBAAP,EAJU,IAIyB,CAACN,SAAD,IAAc,MAAI,CAACI,cAJ5C;AAKVf,YAAAA,MAAM,CAACkB,sBAAP,CAA8B,MAAI,CAACZ,KAAnC,CALU,IAKkCI,iBALlC;AAMVV,YAAAA,MAAM,CAACmB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwCI,iBAAiB,IAAI,MAAI,CAACK,cANlE;AAOVf,YAAAA,MAAM,CAACoB,kBAAP,EAPU,IAOoBZ,SAPpB,OADf;;;AAWG,UAAA,MAAI,CAACO,cAAL;AACC,8BAAC,cAAD,IAAgB,QAAQ,EAAE,MAAI,CAACZ,YAA/B,IAA8C,MAAI,CAACM,KAAL,CAAWY,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACZ,KAAL,CAAWY,QAdf,CADF,CADD,GADH,CADF;;;;;;;AAyBD,GAlDH,oBAA+B/B,KAAK,CAACgC,SAArC,WACgBC,mBADhB,GACsC,WADtC,UAEgBC,cAFhB,GAEiC,IAFjC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\nimport { getModalBodyTheme } from './getModalBodyTheme';\n\nexport interface ModalBodyProps extends CommonProps {\n  /**\n   * убирает отступы\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 __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\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              className={cx({\n                [styles.body(this.theme)]: true,\n                [styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [styles.mobileBodyWithoutHeader()]: !hasHeader && this.isMobileLayout,\n                [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n                [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && 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/ModalClose.js

@@ -1,19 +1,24 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["disableClose", "requestClose"];
 import React, { useContext } from 'react';
+import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { cx } from "../../../lib/theming/Emotion";
 import { keyListener } from "../../../lib/events/keyListener";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { XIcon20Regular } from "../../../internal/icons2022/XIcon/XIcon20Regular";
 import { styles } from "../Modal.styles";
 import { ModalDataTids } from "../Modal";
+import { ModalLocaleHelper } from "../locale";
 export function ModalClose(_ref) {
   var disableClose = _ref.disableClose,
       requestClose = _ref.requestClose,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var locale = useLocaleForControl('Modal', ModalLocaleHelper);
   var theme = useContext(ThemeContext);
 
   var _React$useState = React.useState(false),
@@ -34,17 +39,21 @@ export function ModalClose(_ref) {
     setFocusedByTab(false);
   };
 
+  var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(XIcon20Regular, {
+    align: "none"
+  }) : /*#__PURE__*/React.createElement(CrossIcon, null);
   return /*#__PURE__*/React.createElement(CommonWrapper, otherProps, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref2) {
     var _cx;
 
     var isMobile = _ref2.isMobile;
     return /*#__PURE__*/React.createElement("button", {
+      "aria-label": locale.closeButtonAriaLabel,
       className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.mobileClose(theme)] = isMobile, _cx[styles.disabled(theme)] = disableClose, _cx[styles.focus(theme)] = focusedByTab, _cx)),
       onClick: requestClose,
       onFocus: handleFocus,
       onBlur: handleBlur,
       "data-tid": ModalDataTids.close,
       tabIndex: disableClose ? -1 : 0
-    }, /*#__PURE__*/React.createElement(CrossIcon, null));
+    }, icon);
   }));
 }

package/components/Modal/ModalClose/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","ThemeContext","CrossIcon","cx","keyListener","ResponsiveLayout","CommonWrapper","styles","ModalDataTids","ModalClose","disableClose","requestClose","otherProps","theme","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","isMobile","close","mobileClose","disabled","focus"],"mappings":"qJAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,aAAT,QAA8B,8BAA9B;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;;AAEA,OAAO,SAASC,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,KAAK,GAAGb,UAAU,CAACC,YAAD,CAAxB;AACA,wBAAwCF,KAAK,CAACe,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAId,WAAW,CAACe,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMI,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBJ,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE,wBAAC,aAAD,EAAmBJ,UAAnB;AACE,wBAAC,gBAAD;AACG,kCAAGS,QAAH,SAAGA,QAAH;AACC;AACE,UAAA,SAAS,EAAElB,EAAE;AACVI,UAAAA,MAAM,CAACe,KAAP,CAAaT,KAAb,CADU,IACY,IADZ;AAEVN,UAAAA,MAAM,CAACgB,WAAP,CAAmBV,KAAnB,CAFU,IAEkBQ,QAFlB;AAGVd,UAAAA,MAAM,CAACiB,QAAP,CAAgBX,KAAhB,CAHU,IAGeH,YAHf;AAIVH,UAAAA,MAAM,CAACkB,KAAP,CAAaZ,KAAb,CAJU,IAIYE,YAJZ,OADf;;AAOE,UAAA,OAAO,EAAEJ,YAPX;AAQE,UAAA,OAAO,EAAEM,WARX;AASE,UAAA,MAAM,EAAEG,UATV;AAUE,sBAAUZ,aAAa,CAACc,KAV1B;AAWE,UAAA,QAAQ,EAAEZ,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAXhC;;AAaE,4BAAC,SAAD,OAbF,CADD,GADH,CADF,CADF;;;;;;AAuBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\nimport { ModalDataTids } from './Modal';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\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    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            className={cx({\n              [styles.close(theme)]: true,\n              [styles.mobileClose(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            <CrossIcon />\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","useLocaleForControl","ThemeContext","CrossIcon","cx","keyListener","ResponsiveLayout","CommonWrapper","isTheme2022","XIcon20Regular","styles","ModalDataTids","ModalLocaleHelper","ModalClose","disableClose","requestClose","otherProps","locale","theme","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","icon","isMobile","closeButtonAriaLabel","close","mobileClose","disabled","focus"],"mappings":"qJAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,mBAAT,QAAoC,sCAApC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,cAAT,QAA+B,+CAA/B;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;AACA,SAASC,iBAAT,QAAkC,UAAlC;;AAEA,OAAO,SAASC,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,MAAM,GAAGhB,mBAAmB,CAAC,OAAD,EAAUW,iBAAV,CAAlC;AACA,MAAMM,KAAK,GAAGlB,UAAU,CAACE,YAAD,CAAxB;AACA,wBAAwCH,KAAK,CAACoB,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIlB,WAAW,CAACmB,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMI,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBJ,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA,MAAMK,IAAI,GAAGlB,WAAW,CAACU,KAAD,CAAX,gBAAqB,oBAAC,cAAD,IAAgB,KAAK,EAAC,MAAtB,GAArB,gBAAuD,oBAAC,SAAD,OAApE;;AAEA;AACE,wBAAC,aAAD,EAAmBF,UAAnB;AACE,wBAAC,gBAAD;AACG,kCAAGW,QAAH,SAAGA,QAAH;AACC;AACE,wBAAYV,MAAM,CAACW,oBADrB;AAEE,UAAA,SAAS,EAAExB,EAAE;AACVM,UAAAA,MAAM,CAACmB,KAAP,CAAaX,KAAb,CADU,IACY,IADZ;AAEVR,UAAAA,MAAM,CAACoB,WAAP,CAAmBZ,KAAnB,CAFU,IAEkBS,QAFlB;AAGVjB,UAAAA,MAAM,CAACqB,QAAP,CAAgBb,KAAhB,CAHU,IAGeJ,YAHf;AAIVJ,UAAAA,MAAM,CAACsB,KAAP,CAAad,KAAb,CAJU,IAIYE,YAJZ,OAFf;;AAQE,UAAA,OAAO,EAAEL,YARX;AASE,UAAA,OAAO,EAAEO,WATX;AAUE,UAAA,MAAM,EAAEG,UAVV;AAWE,sBAAUd,aAAa,CAACkB,KAX1B;AAYE,UAAA,QAAQ,EAAEf,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAZhC;;AAcGY,QAAAA,IAdH,CADD,GADH,CADF,CADF;;;;;;AAwBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\nimport { ModalDataTids } from './Modal';\nimport { ModalLocaleHelper } from './locale';\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    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  const icon = isTheme2022(theme) ? <XIcon20Regular align=\"none\" /> : <CrossIcon />;\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.mobileClose(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"]}

package/components/Modal/ModalFooter/ModalFooter.js

@@ -2,12 +2,14 @@ import React, { useContext, useLayoutEffect } from 'react';
 import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
 import { Sticky } from "../../Sticky";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { Gapped } from "../../Gapped";
+import { isNonNullable } from "../../../lib/utils";
 import { styles } from "../Modal.styles";
 import { ModalContext } from "../ModalContext";
+import { ModalSeparator } from "../ModalSeparator";
 export var ModalFooterDataTids = {
   root: 'ModalFooter__root'
 };
@@ -23,6 +25,7 @@ function ModalFooter(props) {
   var layout = useResponsiveLayout();
   var _props$sticky = props.sticky,
       sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,
+      gap = props.gap,
       panel = props.panel,
       children = props.children;
   useLayoutEffect(function () {
@@ -35,25 +38,25 @@ function ModalFooter(props) {
   }, [panel]);
 
   var renderContent = function renderContent(fixed) {
-    var _cx;
-
     if (fixed === void 0) {
       fixed = false;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, (panel || fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
+      fixed: fixed
+    }), /*#__PURE__*/React.createElement("div", {
       "data-tid": ModalFooterDataTids.root,
-      className: cx((_cx = {}, _cx[styles.footer(theme)] = true, _cx[styles.fixedFooter(theme)] = fixed, _cx[styles.panel(theme)] = Boolean(panel), _cx[styles.fixedPanel(theme)] = fixed && Boolean(panel), _cx[styles.mobileFooter(theme)] = layout.isMobile, _cx))
-    }, children);
+      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))
+    }, isNonNullable(gap) ? /*#__PURE__*/React.createElement(Gapped, {
+      vertical: layout.isMobile,
+      gap: gap
+    }, children) : children));
   };
 
-  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ZIndex, {
-    priority: 'ModalFooter',
-    className: styles.footerWrapper()
-  }, sticky ? /*#__PURE__*/React.createElement(Sticky, {
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/React.createElement(Sticky, {
     side: "bottom",
     offset: modal.horizontalScroll ? getScrollWidth() : 0
-  }, renderContent) : renderContent()));
+  }, renderContent) : renderContent());
 }
 
 ModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';

package/components/Modal/ModalFooter/ModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useLayoutEffect","getScrollWidth","Sticky","ThemeContext","ZIndex","CommonWrapper","cx","useResponsiveLayout","styles","ModalContext","ModalFooterDataTids","root","ModalFooter","props","theme","modal","layout","sticky","isMobile","panel","children","setHasFooter","setHasPanel","renderContent","fixed","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","footerWrapper","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"AAAA,OAAOA,KAAP,IAA2BC,UAA3B,EAAuCC,eAAvC,QAA8D,OAA9D;;AAEA,SAASC,cAAT,QAA+B,8BAA/B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,mBAAT,QAAoC,qBAApC;;AAEA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,YAAT,QAA6B,gBAA7B;;;;;;;;;;;AAWA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAGf,UAAU,CAACI,YAAD,CAAxB;AACA,MAAMY,KAAK,GAAGhB,UAAU,CAACU,YAAD,CAAxB;AACA,MAAMO,MAAM,GAAGT,mBAAmB,EAAlC;;AAEA,sBAAuDM,KAAvD,CAAQI,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,KAAnC,GAAuDN,KAAvD,CAAmCM,KAAnC,CAA0CC,QAA1C,GAAuDP,KAAvD,CAA0CO,QAA1C;;AAEApB,EAAAA,eAAe,CAAC,YAAM;AACpBe,IAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN;AACAN,IAAAA,KAAK,CAACO,WAAN,oBAAAP,KAAK,CAACO,WAAN,CAAoBH,KAApB;;AAEA,WAAO,YAAM;AACXJ,MAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN,CAAqB,KAArB;AACAN,MAAAA,KAAK,CAACO,WAAN,oBAAAP,KAAK,CAACO,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARc,EAQZ,CAACH,KAAD,CARY,CAAf;;AAUA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,oBAAUd,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAEL,EAAE;AACVE,QAAAA,MAAM,CAACiB,MAAP,CAAcX,KAAd,CADU,IACa,IADb;AAEVN,QAAAA,MAAM,CAACkB,WAAP,CAAmBZ,KAAnB,CAFU,IAEkBU,KAFlB;AAGVhB,QAAAA,MAAM,CAACW,KAAP,CAAaL,KAAb,CAHU,IAGYa,OAAO,CAACR,KAAD,CAHnB;AAIVX,QAAAA,MAAM,CAACoB,UAAP,CAAkBd,KAAlB,CAJU,IAIiBU,KAAK,IAAIG,OAAO,CAACR,KAAD,CAJjC;AAKVX,QAAAA,MAAM,CAACqB,YAAP,CAAoBf,KAApB,CALU,IAKmBE,MAAM,CAACE,QAL1B,OAFf;;;AAUGE,MAAAA,QAVH,CADF;;;AAcD,GAfD;;AAiBA;AACE,wBAAC,aAAD,EAAmBP,KAAnB;AACE,wBAAC,MAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,EAAEL,MAAM,CAACsB,aAAP,EAA5C;AACGb,IAAAA,MAAM;AACL,wBAAC,MAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEF,KAAK,CAACgB,gBAAN,GAAyB9B,cAAc,EAAvC,GAA4C,CAA1E;AACGsB,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF,CADF;;;;;AAaD;;AAEDX,WAAW,CAACoB,mBAAZ,GAAkC,aAAlC;AACApB,WAAW,CAACqB,gBAAZ,GAA+B,IAA/B;;AAEA,SAASrB,WAAT","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalFooterProps extends CommonProps {\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n  children?: ReactNode;\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) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, panel, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasFooter?.();\n    modal.setHasPanel?.(panel);\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        data-tid={ModalFooterDataTids.root}\n        className={cx({\n          [styles.footer(theme)]: true,\n          [styles.fixedFooter(theme)]: fixed,\n          [styles.panel(theme)]: Boolean(panel),\n          [styles.fixedPanel(theme)]: fixed && Boolean(panel),\n          [styles.mobileFooter(theme)]: layout.isMobile,\n        })}\n      >\n        {children}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      <ZIndex priority={'ModalFooter'} className={styles.footerWrapper()}>\n        {sticky ? (\n          <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n            {renderContent}\n          </Sticky>\n        ) : (\n          renderContent()\n        )}\n      </ZIndex>\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}
+{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useLayoutEffect","getScrollWidth","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","Gapped","isNonNullable","styles","ModalContext","ModalSeparator","ModalFooterDataTids","root","ModalFooter","props","theme","modal","layout","sticky","isMobile","gap","panel","children","setHasFooter","setHasPanel","renderContent","fixed","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"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","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalFooterProps extends CommonProps {\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу модального окна\n   *\n   * На десктопе по умолчанию равен `true`\n   * На мобильных по умолчанию равен `false`\n   */\n  sticky?: boolean;\n  /**\n   * Контент футера\n   */\n  children?: ReactNode;\n  /**\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) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasFooter?.();\n    modal.setHasPanel?.(panel);\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          )}\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  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}

package/components/Modal/ModalFooter.d.ts

@@ -1,12 +1,26 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
 export interface ModalFooterProps extends CommonProps {
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    /**
+     * Закрепляет футер снизу модального окна
+     *
+     * На десктопе по умолчанию равен `true`
+     * На мобильных по умолчанию равен `false`
+     */
     sticky?: boolean;
+    /**
+     * Контент футера
+     */
     children?: ReactNode;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
 }
 export declare const ModalFooterDataTids: {
     readonly root: "ModalFooter__root";

package/components/Modal/ModalHeader/ModalHeader.js

@@ -1,13 +1,13 @@
 import React, { useContext, useLayoutEffect } from 'react';
 import { Sticky } from "../../Sticky";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { useResponsiveLayout } from "../../ResponsiveLayout";
 import { styles } from "../Modal.styles";
 import { ModalClose } from "../ModalClose";
 import { ModalContext } from "../ModalContext";
+import { ModalSeparator } from "../ModalSeparator";
 export var ModalHeaderDataTids = {
   root: 'ModalHeader__root'
 };
@@ -32,27 +32,24 @@ function ModalHeader(props) {
   }, []);
 
   var renderContent = function renderContent(fixed) {
-    var _cx;
-
     if (fixed === void 0) {
       fixed = false;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       "data-tid": ModalHeaderDataTids.root,
-      className: cx((_cx = {}, _cx[styles.header(theme)] = true, _cx[styles.mobileHeader(theme)] = layout.isMobile, _cx[styles.headerAddPadding()] = Boolean(modal.additionalPadding), _cx[styles.fixedHeader(theme)] = fixed, _cx[styles.mobileFixedHeader(theme)] = fixed && layout.isMobile, _cx[styles.headerWithClose(theme)] = Boolean(modal.close), _cx[styles.mobileHeaderWithClose(theme)] = layout.isMobile, _cx))
+      className: cx(styles.header(theme), layout.isMobile && styles.mobileHeader(theme), Boolean(modal.additionalPadding) && styles.headerAddPadding(theme), fixed && styles.fixedHeader(theme), fixed && layout.isMobile && styles.mobileFixedHeader(theme), Boolean(modal.close) && styles.headerWithClose(theme), layout.isMobile && styles.mobileHeaderWithClose(theme))
     }, modal.close && /*#__PURE__*/React.createElement(ModalClose, {
       requestClose: modal.close.requestClose,
       disableClose: modal.close.disableClose
-    }), children);
+    }), children), fixed && /*#__PURE__*/React.createElement(ModalSeparator, {
+      fixed: fixed
+    }));
   };
 
-  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ZIndex, {
-    priority: 'ModalHeader',
-    className: styles.headerWrapper()
-  }, sticky ? /*#__PURE__*/React.createElement(Sticky, {
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/React.createElement(Sticky, {
     side: "top"
-  }, renderContent) : renderContent()));
+  }, renderContent) : renderContent());
 }
 
 ModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';

package/components/Modal/ModalHeader/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalHeader.tsx"],"names":["React","useContext","useLayoutEffect","Sticky","ThemeContext","ZIndex","CommonWrapper","cx","useResponsiveLayout","styles","ModalClose","ModalContext","ModalHeaderDataTids","root","ModalHeader","props","theme","modal","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","header","mobileHeader","headerAddPadding","Boolean","additionalPadding","fixedHeader","mobileFixedHeader","headerWithClose","close","mobileHeaderWithClose","requestClose","disableClose","headerWrapper","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"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","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalHeaderProps extends CommonProps {\n  sticky?: boolean;\n  children?: ReactNode;\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) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.();\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div\n        data-tid={ModalHeaderDataTids.root}\n        className={cx({\n          [styles.header(theme)]: true,\n          [styles.mobileHeader(theme)]: layout.isMobile,\n          [styles.headerAddPadding()]: Boolean(modal.additionalPadding),\n          [styles.fixedHeader(theme)]: fixed,\n          [styles.mobileFixedHeader(theme)]: fixed && layout.isMobile,\n          [styles.headerWithClose(theme)]: Boolean(modal.close),\n          [styles.mobileHeaderWithClose(theme)]: layout.isMobile,\n        })}\n      >\n        {modal.close && <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />}\n        {children}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      <ZIndex priority={'ModalHeader'} className={styles.headerWrapper()}>\n        {sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}\n      </ZIndex>\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}
+{"version":3,"sources":["ModalHeader.tsx"],"names":["React","useContext","useLayoutEffect","Sticky","ThemeContext","CommonWrapper","cx","useResponsiveLayout","styles","ModalClose","ModalContext","ModalSeparator","ModalHeaderDataTids","root","ModalHeader","props","theme","modal","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","header","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","mobileFixedHeader","close","headerWithClose","mobileHeaderWithClose","requestClose","disableClose","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"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","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  sticky?: boolean;\n  children?: ReactNode;\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) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.();\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            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            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  return (\n    <CommonWrapper {...props}>{sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}</CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}