@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -2,137 +2,139 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 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, _templateObject39;
 
-import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
 export var modalGlobalClasses = prefix('modal')({
   root: 'root',
   container: 'container'
 });
-export var styles = memoizeStyle({
-  root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
-  },
-  bg: function bg(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 container() {
-    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    "])));
-  },
-  containerMobile: function containerMobile(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      margin-top: ", ";\n      margin-right: ", ";\n      margin-bottom: ", ";\n      margin-left: ", ";\n    "])), t.mobileModalContainerHeight, t.mobileModalContainerMarginTop, t.mobileModalContainerMarginRight, t.mobileModalContainerMarginBottom, t.mobileModalContainerMarginLeft);
-  },
-  window: function window(t) {
-    return css(_templateObject5 || (_templateObject5 = _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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
-  },
-  centerContainer: function centerContainer() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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 mobileCenterContainer() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
-  },
-  alignTop: function alignTop() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
-  },
-  close: function close(t) {
-    var padding = parseInt(t.modalCloseButtonPadding);
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
-  },
-  mobileClose: function mobileClose(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      right: ", ";\n      top: ", "px;\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])), t.mobileModalCloseButtonRightPadding, parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding), t.mobileModalCloseButtonClickArea, t.mobileModalCloseButtonClickArea, t.mobileModalCloseIconSize, t.mobileModalCloseIconSize);
-  },
-  mobileCloseWithoutHeader: function mobileCloseWithoutHeader() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
-  },
-  closeWrapper: function closeWrapper(t) {
-    var padding = parseInt(t.modalCloseButtonPadding);
-    var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
-    var legacyGap = parseInt(t.modalCloseWrapperLegacyGap);
-    var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
-    var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
-    var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX + legacyGap, blockSizeY);
-  },
-  mobileCloseWrapper: function mobileCloseWrapper(t) {
-    var size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: ", ";\n      top: ", ";\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", "px;\n      height: ", "px;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "])), t.mobileModalCloseButtonRightPadding, t.mobileModalCloseButtonTopPadding, size, size, t.bgDefault, size);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
-  },
-  focus: function focus(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
-  },
-  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      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      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      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 mobileBody(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\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);
-  },
-  mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-    return css(_templateObject22 || (_templateObject22 = _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);
-  },
-  mobileFooter: function mobileFooter(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
-  },
-  panel: function panel(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
-  },
-  fixedHeader: function fixedHeader(t) {
-    return css(_templateObject26 || (_templateObject26 = _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(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
-  },
-  fixedFooter: function fixedFooter(t) {
-    return css(_templateObject28 || (_templateObject28 = _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(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
-  },
-  headerAddPadding: function headerAddPadding(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
-  },
-  bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
-  },
-  mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
-  },
-  bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
-  },
-  bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
-  },
-  mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
-  },
-  columnFlexContainer: function columnFlexContainer() {
-    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
-  },
-  modalSeparatorWrapper: function modalSeparatorWrapper() {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
-  },
-  modalSeparator: function modalSeparator(t) {
-    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
-  },
-  modalSeparatorFixed: function modalSeparatorFixed() {
-    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
+    },
+    bg: function bg(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 container() {
+      return emotion.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    "])));
+    },
+    containerMobile: function containerMobile(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      margin-top: ", ";\n      margin-right: ", ";\n      margin-bottom: ", ";\n      margin-left: ", ";\n    "])), t.mobileModalContainerHeight, t.mobileModalContainerMarginTop, t.mobileModalContainerMarginRight, t.mobileModalContainerMarginBottom, t.mobileModalContainerMarginLeft);
+    },
+    window: function window(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _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 emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
+    },
+    centerContainer: function centerContainer() {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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 mobileCenterContainer() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
+    },
+    alignTop: function alignTop() {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
+    },
+    close: function close(t) {
+      var padding = parseInt(t.modalCloseButtonPadding);
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(emotion), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
+    },
+    mobileClose: function mobileClose(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      right: ", ";\n      top: ", "px;\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])), t.mobileModalCloseButtonRightPadding, parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding), t.mobileModalCloseButtonClickArea, t.mobileModalCloseButtonClickArea, t.mobileModalCloseIconSize, t.mobileModalCloseIconSize);
+    },
+    mobileCloseWithoutHeader: function mobileCloseWithoutHeader() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
+    },
+    closeWrapper: function closeWrapper(t) {
+      var padding = parseInt(t.modalCloseButtonPadding);
+      var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
+      var legacyGap = parseInt(t.modalCloseWrapperLegacyGap);
+      var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
+      var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
+      var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX + legacyGap, blockSizeY);
+    },
+    mobileCloseWrapper: function mobileCloseWrapper(t) {
+      var size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: ", ";\n      top: ", ";\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", "px;\n      height: ", "px;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "])), t.mobileModalCloseButtonRightPadding, t.mobileModalCloseButtonTopPadding, size, size, t.bgDefault, size);
+    },
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
+    },
+    focus: function focus(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
+    },
+    header: function header(t) {
+      return emotion.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      font-weight: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor, t.modalHeaderFontWeight);
+    },
+    mobileHeader: function mobileHeader(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
+    },
+    body: function body(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\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 mobileBody(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\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 emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
+    },
+    mobileHeaderWithClose: function mobileHeaderWithClose(t) {
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
+    },
+    footer: function footer(t) {
+      return emotion.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);
+    },
+    mobileFooter: function mobileFooter(t) {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
+    },
+    panel: function panel(t) {
+      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
+    },
+    fixedHeader: function fixedHeader(t) {
+      return emotion.css(_templateObject26 || (_templateObject26 = _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 emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
+    },
+    fixedFooter: function fixedFooter(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _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 emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
+    },
+    headerAddPadding: function headerAddPadding(t) {
+      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
+    },
+    bodyWithoutHeader: function bodyWithoutHeader(t) {
+      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+    },
+    mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
+      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
+    },
+    bodyWithoutPadding: function bodyWithoutPadding() {
+      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+    },
+    bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
+      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+    },
+    mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
+      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
+    },
+    columnFlexContainer: function columnFlexContainer() {
+      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+    },
+    modalSeparatorWrapper: function modalSeparatorWrapper() {
+      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
+    },
+    modalSeparator: function modalSeparator(t) {
+      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
+    },
+    modalSeparatorFixed: function modalSeparatorFixed() {
+      return emotion.css(_templateObject39 || (_templateObject39 = _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","prefix","resetButton","modalGlobalClasses","root","container","styles","bg","t","modalBackBg","modalBackOpacity","containerMobile","mobileModalContainerHeight","mobileModalContainerMarginTop","mobileModalContainerMarginRight","mobileModalContainerMarginBottom","mobileModalContainerMarginLeft","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","modalBodyPaddingTop","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, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\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      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  containerMobile(t: Theme) {\n    return css`\n      height: ${t.mobileModalContainerHeight};\n      margin-top: ${t.mobileModalContainerMarginTop};\n      margin-right: ${t.mobileModalContainerMarginRight};\n      margin-bottom: ${t.mobileModalContainerMarginBottom};\n      margin-left: ${t.mobileModalContainerMarginLeft};\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-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 =\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: ${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"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["memoizeStyle","prefix","resetButton","modalGlobalClasses","root","container","getStyles","emotion","css","bg","t","modalBackBg","modalBackOpacity","containerMobile","mobileModalContainerHeight","mobileModalContainerMarginTop","mobileModalContainerMarginRight","mobileModalContainerMarginBottom","mobileModalContainerMarginLeft","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","modalBodyPaddingTop","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 type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const modalGlobalClasses = prefix('modal')({\n  root: 'root',\n  container: 'container',\n});\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.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 emotion.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 emotion.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    containerMobile(t: Theme) {\n      return emotion.css`\n      height: ${t.mobileModalContainerHeight};\n      margin-top: ${t.mobileModalContainerMarginTop};\n      margin-right: ${t.mobileModalContainerMarginRight};\n      margin-bottom: ${t.mobileModalContainerMarginBottom};\n      margin-left: ${t.mobileModalContainerMarginLeft};\n    `;\n    },\n\n    window(t: Theme) {\n      return emotion.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 emotion.css`\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    `;\n    },\n\n    centerContainer() {\n      return emotion.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 emotion.css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    `;\n    },\n\n    alignTop() {\n      return emotion.css`\n      vertical-align: top;\n    `;\n    },\n\n    close(t: Theme) {\n      const padding = parseInt(t.modalCloseButtonPadding);\n      return emotion.css`\n      ${resetButton(emotion)};\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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n    },\n\n    header(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 =\n        2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n      return emotion.css`\n      padding-right: ${rightPadding}px;\n    `;\n    },\n\n    mobileHeaderWithClose(t: Theme) {\n      return emotion.css`\n      padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n    `;\n    },\n\n    footer(t: Theme) {\n      return emotion.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 emotion.css`\n      padding: ${t.mobileModalFooterPadding};\n    `;\n    },\n\n    panel(t: Theme) {\n      return emotion.css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n    },\n\n    fixedHeader(t: Theme) {\n      return emotion.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 emotion.css`\n      padding-bottom: ${t.mobileModalHeaderPadding};\n    `;\n    },\n\n    fixedFooter(t: Theme) {\n      return emotion.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 emotion.css`\n      &:before {\n        box-shadow: ${t.modalFixedPanelShadow};\n      }\n    `;\n    },\n\n    headerAddPadding(t: Theme) {\n      return emotion.css`\n      padding-bottom: ${t.modalHeaderAdditionalPaddingBottom};\n    `;\n    },\n\n    bodyWithoutHeader(t: Theme) {\n      return emotion.css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n    },\n\n    mobileBodyWithoutHeader() {\n      return emotion.css`\n      padding-top: 0px;\n    `;\n    },\n\n    bodyWithoutPadding() {\n      return emotion.css`\n      padding: 0;\n    `;\n    },\n\n    bodyAddPaddingForPanel(t: Theme) {\n      return emotion.css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n    },\n\n    mobileBodyAddPaddingForPanel(t: Theme) {\n      return emotion.css`\n      padding: ${t.mobileModalBodyPadding};\n    `;\n    },\n\n    columnFlexContainer() {\n      return emotion.css`\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    `;\n    },\n\n    modalSeparatorWrapper() {\n      return emotion.css`\n      position: absolute;\n      width: 100%;\n    `;\n    },\n\n    modalSeparator(t: Theme) {\n      return emotion.css`\n      border-bottom: ${t.modalSeparatorBorderBottom};\n      margin: 0 32px;\n      transition: margin 0.3s;\n    `;\n    },\n\n    modalSeparatorFixed() {\n      return emotion.css`\n      margin: 0 16px;\n    `;\n    },\n  });\n"]}

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

@@ -1,9 +1,10 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const modalGlobalClasses: {
     root: string;
     container: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     bg(t: Theme): string;
     container(): string;

package/components/Modal/ModalBody/ModalBody.js

@@ -4,16 +4,16 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { rootNode } from "../../../lib/rootNode";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ModalContext } from "../ModalContext";
-import { styles } from "../Modal.styles";
+import { getStyles } from "../Modal.styles";
 import { getModalBodyTheme } from "../getModalBodyTheme";
 export
 /**
@@ -45,11 +45,14 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = getModalBodyTheme(theme);
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: _this2.theme
-      }, _this2.renderMain());
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = getModalBodyTheme(theme);
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: _this2.theme
+        }, _this2.renderMain());
+      });
     });
   };
 
@@ -57,15 +60,16 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
     var _this3 = this;
 
     var noPadding = this.props.noPadding;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, function (_ref) {
-      var _cx;
+      var _this3$emotion$cx;
 
       var additionalPadding = _ref.additionalPadding,
           hasHeader = _ref.hasHeader;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this3.setRootNode
       }, _this3.props), /*#__PURE__*/React.createElement(ZIndex, {
-        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))
+        className: _this3.emotion.cx((_this3$emotion$cx = {}, _this3$emotion$cx[styles.body(_this3.theme)] = true, _this3$emotion$cx[styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _this3$emotion$cx[styles.bodyWithoutHeader(_this3.theme)] = !hasHeader, _this3$emotion$cx[styles.mobileBodyWithoutHeader()] = !hasHeader && _this3.isMobileLayout, _this3$emotion$cx[styles.bodyAddPaddingForPanel(_this3.theme)] = additionalPadding, _this3$emotion$cx[styles.mobileBodyAddPaddingForPanel(_this3.theme)] = additionalPadding && _this3.isMobileLayout, _this3$emotion$cx[styles.bodyWithoutPadding()] = noPadding, _this3$emotion$cx))
       }, _this3.isMobileLayout ? /*#__PURE__*/React.createElement(ResizeDetector, {
         onResize: _this3.handleResize
       }, _this3.props.children) : _this3.props.children));
@@ -73,4 +77,4 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
   };
 
   return ModalBody;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.displayName = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;

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","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"]}
+{"version":3,"sources":["ModalBody.tsx"],"names":["React","ZIndex","CommonWrapper","responsiveLayout","LayoutEvents","ResizeDetector","rootNode","EmotionConsumer","ThemeContext","ModalContext","getStyles","getModalBodyTheme","ModalBody","handleResize","emit","render","emotion","theme","renderMain","noPadding","props","styles","additionalPadding","hasHeader","setRootNode","cx","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","Component","__KONTUR_REACT_UI__","displayName","__MODAL_BODY__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ModalContext } from './ModalContext';\nimport { getStyles } 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 displayName = 'ModalBody';\n  public static __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\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      </EmotionConsumer>\n    );\n  }\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  public renderMain(): JSX.Element {\n    const { noPadding } = this.props;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <ModalContext.Consumer>\n        {({ additionalPadding, hasHeader }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <ZIndex\n              className={this.emotion.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/ModalBody.d.ts

@@ -13,8 +13,10 @@ export interface ModalBodyProps extends CommonProps {
  */
 export declare class ModalBody extends React.Component<ModalBodyProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static __MODAL_BODY__: boolean;
     private theme;
+    private emotion;
     private isMobileLayout;
     private setRootNode;
     render(): JSX.Element;

package/components/Modal/ModalClose/ModalClose.js

@@ -1,17 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["disableClose", "requestClose"];
-import React, { useContext } from 'react';
+import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
 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 { useEmotion } 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 { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../Modal.styles";
 import { ModalDataTids } from "../Modal";
 import { ModalLocaleHelper } from "../locale";
 export function ModalClose(_ref) {
@@ -19,8 +19,9 @@ export function ModalClose(_ref) {
       requestClose = _ref.requestClose,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var emotion = useEmotion();
   var locale = useLocaleForControl('Modal', ModalLocaleHelper);
-  var theme = useContext(ThemeContext);
+  var theme = useTheme();
 
   var _React$useState = React.useState(false),
       focusedByTab = _React$useState[0],
@@ -43,13 +44,14 @@ export function ModalClose(_ref) {
   var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(XIcon20Regular, {
     align: "none"
   }) : /*#__PURE__*/React.createElement(CrossIcon, null);
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement(CommonWrapper, otherProps, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref2) {
-    var _cx;
+    var _emotion$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)),
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.close(theme)] = true, _emotion$cx[styles.mobileClose(theme)] = isMobile, _emotion$cx[styles.disabled(theme)] = disableClose, _emotion$cx[styles.focus(theme)] = focusedByTab, _emotion$cx)),
       onClick: requestClose,
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -57,4 +59,6 @@ export function ModalClose(_ref) {
       tabIndex: disableClose ? -1 : 0
     }, icon);
   }));
-}
+}
+ModalClose.__KONTUR_REACT_UI__ = 'ModalClose';
+ModalClose.displayName = 'ModalClose';