npm - @skbkontur/react-ui - Versions diffs - 4.17.4 → 4.18.0 - Mend

@skbkontur/react-ui 4.17.4 → 4.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (278) hide show

package/cjs/components/MiniModal/getMiniModalTheme.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["getMiniModalTheme.ts"],"names":["getMiniModalTheme","contextTheme","propsTheme","theme","ThemeFactory","create","modalBodyPaddingTop","miniModalBodyPaddingTop","modalBodyPaddingBottom","miniModalBodyPaddingBottom","modalHeaderPaddingTop","miniModalHeaderPaddingTop","modalHeaderPaddingBottom","miniModalHeaderPaddingBottom","modalFooterPaddingTop","miniModalFooterPaddingTop","modalFooterPaddingBottom","miniModalFooterPaddingBottom","mobileModalFooterPadding","miniModalFooterPaddingMobile","mobileModalHeaderPadding","miniModalHeaderPaddingMobile","mobileModalBodyPadding","miniModalBodyPaddingMobile","mobileModalContainerHeight","miniModalHeightMobile","mobileModalContainerMarginTop","miniModalMarginTopMobile","mobileModalContainerMarginRight","miniModalMarginRightMobile","mobileModalContainerMarginLeft","miniModalMarginLeftMobile"],"mappings":"0EAAA;;;AAGO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,YAAD,EAAsBC,UAAtB,EAAmD,KAA7BA,UAA6B,cAA7BA,UAA6B,GAAP,EAAO;AAClF,MAAMC,KAAK,GAAGC,2BAAaC,MAAb,CAAoBH,UAApB,EAAgCD,YAAhC,CAAd;AACA,SAAOG,2BAAaC,MAAb;AACL;AACEC,IAAAA,mBAAmB,EAAEH,KAAK,CAACI,uBAD7B;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,0BAFhC;AAGEC,IAAAA,qBAAqB,EAAEP,KAAK,CAACQ,yBAH/B;AAIEC,IAAAA,wBAAwB,EAAET,KAAK,CAACU,4BAJlC;AAKEC,IAAAA,qBAAqB,EAAEX,KAAK,CAACY,yBAL/B;AAMEC,IAAAA,wBAAwB,EAAEb,KAAK,CAACc,4BANlC;AAOEC,IAAAA,wBAAwB,EAAEf,KAAK,CAACgB,4BAPlC;AAQEC,IAAAA,wBAAwB,EAAEjB,KAAK,CAACkB,4BARlC;AASEC,IAAAA,sBAAsB,EAAEnB,KAAK,CAACoB,0BAThC;AAUEC,IAAAA,0BAA0B,EAAErB,KAAK,CAACsB,qBAVpC;AAWEC,IAAAA,6BAA6B,EAAEvB,KAAK,CAACwB,wBAXvC;AAYEC,IAAAA,+BAA+B,EAAEzB,KAAK,CAAC0B,0BAZzC;AAaEC,IAAAA,8BAA8B,EAAE3B,KAAK,CAAC4B,yBAbxC,EADK;;AAgBL5B,EAAAA,KAhBK,CAAP;;AAkBD,CApBM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getMiniModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}) => {\n const theme = ThemeFactory.create(propsTheme, contextTheme);\n return ThemeFactory.create(\n {\n modalBodyPaddingTop: theme.miniModalBodyPaddingTop,\n modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,\n modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,\n modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,\n modalFooterPaddingTop: theme.miniModalFooterPaddingTop,\n modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,\n mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,\n mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,\n mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,\n mobileModalContainerHeight: theme.miniModalHeightMobile,\n mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,\n mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,\n mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,\n },\n theme,\n );\n};\n"]}

package/cjs/components/MiniModal/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './MiniModal';
+export * from './MiniModalHeader';
+export * from './MiniModalBody';
+export * from './MiniModalFooter';
+export * from './MiniModalIndent';

package/cjs/components/MiniModal/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+"use strict";exports.__esModule = true;var _MiniModal = require("./MiniModal");Object.keys(_MiniModal).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MiniModal[key]) return;exports[key] = _MiniModal[key];});
+var _MiniModalHeader = require("./MiniModalHeader");Object.keys(_MiniModalHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MiniModalHeader[key]) return;exports[key] = _MiniModalHeader[key];});
+var _MiniModalBody = require("./MiniModalBody");Object.keys(_MiniModalBody).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MiniModalBody[key]) return;exports[key] = _MiniModalBody[key];});
+var _MiniModalFooter = require("./MiniModalFooter");Object.keys(_MiniModalFooter).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MiniModalFooter[key]) return;exports[key] = _MiniModalFooter[key];});
+var _MiniModalIndent = require("./MiniModalIndent");Object.keys(_MiniModalIndent).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MiniModalIndent[key]) return;exports[key] = _MiniModalIndent[key];});

package/cjs/components/MiniModal/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA;AACA;AACA;AACA","sourcesContent":["export * from './MiniModal';\nexport * from './MiniModalHeader';\nexport * from './MiniModalBody';\nexport * from './MiniModalFooter';\nexport * from './MiniModalIndent';\n"]}

package/cjs/components/Modal/Modal.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
@@ -31,6 +32,11 @@ export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
      * По умолчанию true для IE11.
      */
     disableFocusLock?: boolean;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ModalState {
     stackPosition: number;

package/cjs/components/Modal/Modal.js CHANGED Viewed

@@ -70,6 +70,12 @@ var mountedModalsCount = 0;
@@ -276,6 +282,13 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
@@ -359,5 +372,5 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
     setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
       _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
-    };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('resize', this.throttledCheckHorizontalScroll);}mountedModalsCount++;_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('resize', this.throttledCheckHorizontalScroll);LayoutEvents.emit();}_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getModalTheme.getModalTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,noClose = _this$props.noClose,disableClose = _this$props.disableClose,width = _this$props.width,alignTop = _this$props.alignTop,children = _this$props.children,ariaLabel = _this$props['aria-label'],ariaLabelledby = _this$props['aria-labelledby'];var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var _this$getProps = this.getProps(),role = _this$getProps.role,disableFocusLock = _this$getProps.disableFocusLock;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!noClose) {modalContextProps.close = { disableClose: disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (width) {style.width = width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { "aria-labelledby": ariaLabelledby, ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer()] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, children)))));})))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.defaultProps = { // NOTE: в ie нормально не работает
+    };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('resize', this.throttledCheckHorizontalScroll);}mountedModalsCount++;_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('resize', this.throttledCheckHorizontalScroll);LayoutEvents.emit();}_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getModalTheme.getModalTheme)(theme, _this2.props.theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this3 = this;var _this$props = this.props,noClose = _this$props.noClose,disableClose = _this$props.disableClose,width = _this$props.width,alignTop = _this$props.alignTop,children = _this$props.children,ariaLabel = _this$props['aria-label'],ariaLabelledby = _this$props['aria-labelledby'];var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var _this$getProps = this.getProps(),role = _this$getProps.role,disableFocusLock = _this$getProps.disableFocusLock;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!noClose) {modalContextProps.close = { disableClose: disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (width) {style.width = width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { "aria-labelledby": ariaLabelledby, ref: _this3.refContainer, className: (0, _Emotion.cx)(_Modal.styles.container(), isMobile && _Modal.styles.containerMobile(_this3.theme)), onMouseDown: _this3.handleContainerMouseDown, onMouseUp: _this3.handleContainerMouseUp, onClick: _this3.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer()] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, children))))));}))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.defaultProps = { // NOTE: в ie нормально не работает
   disableFocusLock: _client.isIE11, role: 'dialog' };

package/cjs/components/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Modal.tsx"],"names":["mountedModalsCount","ModalDataTids","container","content","close","Modal","getProps","defaultProps","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","ModalStack","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","throttledCheckHorizontalScroll","handleResize","LayoutEvents","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","globalObject","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","styles","root","bg","isMobile","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","React","Component","__KONTUR_REACT_UI__","Header","ModalHeader","Body","ModalBody","Footer","ModalFooter","isIE11"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { styles } from './Modal.styles';\nimport { getModalTheme } from './getModalTheme';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps\n extends CommonProps,\n Pick<HTMLAttributes<unknown>, 'role'>,\n Pick<AriaAttributes, 'aria-label' \| 'aria-labelledby'> {\n /*\n Отключает событие onClose, также дизейблит кнопку закрытия модалки\n /\n disableClose?: boolean;\n\n /\n Выравнивание окна по верху страницы.\n /\n alignTop?: boolean;\n\n /\n Не закрывать окно при клике на фон.\n /\n ignoreBackgroundClick?: boolean;\n\n /\n Не показывать крестик для закрытия окна.\n /\n noClose?: boolean;\n width?: number \| string;\n\n /\n Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n * Escape или на крестик).\n /\n onClose?: () => void;\n\n /\n Не использовать фокус-лок внутри модалки.\n * По умолчанию true для IE11.\n /\n disableFocusLock?: boolean;\n}\n\nexport interface ModalState {\n stackPosition: number;\n hasBackground: boolean;\n horizontalScroll: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n container: 'modal-container',\n content: 'modal-content',\n close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' \| 'role'>>;\n\n/\n Модальное окно\n \n Содержит в себе три компоненты: Modal.Header,\n * Modal.Body и Modal.Footer\n \n Для отображения серой плашки в футере в компонент\n * Footer необходимо передать пропс panel\n \n Для отключения прилипания шапки и футера\n * в соответствующий компонент нужно передать\n * проп sticky со значением false\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n public static __KONTUR_REACT_UI__ = 'Modal';\n\n public static Header = ModalHeader;\n public static Body = ModalBody;\n public static Footer = ModalFooter;\n\n public static defaultProps: DefaultProps = {\n // NOTE: в ie нормально не работает\n disableFocusLock: isIE11,\n role: 'dialog',\n };\n\n private getProps = createPropsGetter(Modal.defaultProps);\n\n public state: ModalState = {\n stackPosition: 0,\n hasBackground: true,\n horizontalScroll: false,\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription \| null = null;\n private containerNode: HTMLDivElement \| null = null;\n private mouseDownTarget: EventTarget \| null = null;\n private mouseUpTarget: EventTarget \| null = null;\n\n public componentDidMount() {\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n if (mountedModalsCount === 0) {\n globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n }\n\n mountedModalsCount++;\n globalObject.addEventListener?.('keydown', this.handleKeyDown);\n this.checkHorizontalScrollAppearance();\n\n if (this.containerNode) {\n this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n }\n }\n\n public componentWillUnmount() {\n if (--mountedModalsCount === 0) {\n globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n LayoutEvents.emit();\n }\n\n globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n if (isNonNullable(this.stackSubscription)) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n\n if (this.containerNode) {\n this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n }\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getModalTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n noClose,\n disableClose,\n width,\n alignTop,\n children,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n } = this.props;\n const { hasHeader, hasFooter, hasPanel } = this.state;\n const { role, disableFocusLock } = this.getProps();\n\n const modalContextProps: ModalContextProps = {\n hasHeader,\n horizontalScroll: this.state.horizontalScroll,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n if (!noClose) {\n modalContextProps.close = {\n disableClose,\n requestClose: this.requestClose,\n };\n }\n if (!hasFooter) {\n modalContextProps.additionalPadding = true;\n }\n if (hasFooter && hasPanel) {\n modalContextProps.additionalPadding = true;\n }\n\n const style: { width?: number \| string } = {};\n const containerStyle: { width?: number \| string } = {};\n\n if (width) {\n style.width = width;\n } else {\n containerStyle.width = 'auto';\n }\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <ZIndex priority={'Modal'} className={styles.root()}>\n <HideBodyVerticalScroll />\n {this.state.hasBackground && <div className={styles.bg(this.theme)} />}\n <div\n aria-labelledby={ariaLabelledby}\n ref={this.refContainer}\n className={styles.container()}\n onMouseDown={this.handleContainerMouseDown}\n onMouseUp={this.handleContainerMouseUp}\n onClick={this.handleContainerClick}\n data-tid={ModalDataTids.container}\n >\n <ResponsiveLayout>\n {({ isMobile }) => (\n <div\n aria-modal\n aria-label={ariaLabel}\n role={role}\n className={cx({\n [styles.centerContainer()]: true,\n [styles.mobileCenterContainer()]: isMobile,\n [styles.alignTop()]: Boolean(alignTop),\n })}\n style={isMobile ? undefined : containerStyle}\n data-tid={ModalDataTids.content}\n >\n <div\n className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n style={isMobile ? undefined : style}\n >\n <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n <FocusLock\n disabled={disableFocusLock}\n autoFocus={false}\n className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n >\n {!hasHeader && !noClose && (\n <ZIndex\n className={cx({\n [styles.closeWrapper(this.theme)]: true,\n [styles.mobileCloseWrapper(this.theme)]: isMobile,\n })}\n >\n <ModalClose\n className={cx({\n [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n })}\n requestClose={this.requestClose}\n disableClose={disableClose}\n />\n </ZIndex>\n )}\n <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n </FocusLock>\n </ResizeDetector>\n </div>\n </div>\n )}\n </ResponsiveLayout>\n </div>\n </ZIndex>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private refContainer = (center: HTMLDivElement \| null) => {\n this.containerNode = center;\n };\n\n private handleStackChange = (stack: readonly React.Component[]) => {\n this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n };\n\n private handleContainerMouseDown = (event: React.MouseEvent) => {\n this.mouseDownTarget = event.target;\n };\n\n private handleContainerMouseUp = (event: React.MouseEvent) => {\n this.mouseUpTarget = event.target;\n };\n\n private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (!this.props.ignoreBackgroundClick) {\n const { target, currentTarget } = event;\n if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n this.requestClose();\n }\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private checkHorizontalScrollAppearance = () => {\n let hasScroll = false;\n\n if (this.containerNode) {\n const containerClientWidth = this.containerNode.clientWidth;\n const containerScrollWidth = this.containerNode.scrollWidth;\n hasScroll = containerClientWidth < containerScrollWidth;\n }\n if (hasScroll && !this.state.horizontalScroll) {\n this.setState({ horizontalScroll: true });\n } else if (this.state.horizontalScroll) {\n this.setState({ horizontalScroll: false });\n }\n };\n\n private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n private handleResize = () => {\n LayoutEvents.emit();\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}
1	+ {"version":3,"sources":["Modal.tsx"],"names":["mountedModalsCount","ModalDataTids","container","content","close","Modal","getProps","defaultProps","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","ModalStack","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","throttledCheckHorizontalScroll","handleResize","LayoutEvents","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","globalObject","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","styles","root","bg","isMobile","containerMobile","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","React","Component","__KONTUR_REACT_UI__","Header","ModalHeader","Body","ModalBody","Footer","ModalFooter","isIE11"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { styles } from './Modal.styles';\nimport { getModalTheme } from './getModalTheme';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps\n extends CommonProps,\n Pick<HTMLAttributes<unknown>, 'role'>,\n Pick<AriaAttributes, 'aria-label' \| 'aria-labelledby'> {\n /*\n Отключает событие onClose, также дизейблит кнопку закрытия модалки\n /\n disableClose?: boolean;\n\n /\n Выравнивание окна по верху страницы.\n /\n alignTop?: boolean;\n\n /\n Не закрывать окно при клике на фон.\n /\n ignoreBackgroundClick?: boolean;\n\n /\n Не показывать крестик для закрытия окна.\n /\n noClose?: boolean;\n width?: number \| string;\n\n /\n Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n * Escape или на крестик).\n /\n onClose?: () => void;\n\n /\n Не использовать фокус-лок внутри модалки.\n * По умолчанию true для IE11.\n /\n disableFocusLock?: boolean;\n\n /\n Обычный объект с переменными темы.\n * Он будет объединён с темой из контекста.\n /\n theme?: ThemeIn;\n}\n\nexport interface ModalState {\n stackPosition: number;\n hasBackground: boolean;\n horizontalScroll: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n container: 'modal-container',\n content: 'modal-content',\n close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' \| 'role'>>;\n\n/\n Модальное окно\n \n Содержит в себе три компоненты: Modal.Header,\n * Modal.Body и Modal.Footer\n \n Для отображения серой плашки в футере в компонент\n * Footer необходимо передать пропс panel\n \n Для отключения прилипания шапки и футера\n * в соответствующий компонент нужно передать\n * проп sticky со значением false\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n public static __KONTUR_REACT_UI__ = 'Modal';\n\n public static Header = ModalHeader;\n public static Body = ModalBody;\n public static Footer = ModalFooter;\n\n public static defaultProps: DefaultProps = {\n // NOTE: в ie нормально не работает\n disableFocusLock: isIE11,\n role: 'dialog',\n };\n\n private getProps = createPropsGetter(Modal.defaultProps);\n\n public state: ModalState = {\n stackPosition: 0,\n hasBackground: true,\n horizontalScroll: false,\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription \| null = null;\n private containerNode: HTMLDivElement \| null = null;\n private mouseDownTarget: EventTarget \| null = null;\n private mouseUpTarget: EventTarget \| null = null;\n\n public componentDidMount() {\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n if (mountedModalsCount === 0) {\n globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n }\n\n mountedModalsCount++;\n globalObject.addEventListener?.('keydown', this.handleKeyDown);\n this.checkHorizontalScrollAppearance();\n\n if (this.containerNode) {\n this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n }\n }\n\n public componentWillUnmount() {\n if (--mountedModalsCount === 0) {\n globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n LayoutEvents.emit();\n }\n\n globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n if (isNonNullable(this.stackSubscription)) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n\n if (this.containerNode) {\n this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n }\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getModalTheme(theme, this.props.theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n noClose,\n disableClose,\n width,\n alignTop,\n children,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n } = this.props;\n const { hasHeader, hasFooter, hasPanel } = this.state;\n const { role, disableFocusLock } = this.getProps();\n\n const modalContextProps: ModalContextProps = {\n hasHeader,\n horizontalScroll: this.state.horizontalScroll,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n if (!noClose) {\n modalContextProps.close = {\n disableClose,\n requestClose: this.requestClose,\n };\n }\n if (!hasFooter) {\n modalContextProps.additionalPadding = true;\n }\n if (hasFooter && hasPanel) {\n modalContextProps.additionalPadding = true;\n }\n\n const style: { width?: number \| string } = {};\n const containerStyle: { width?: number \| string } = {};\n\n if (width) {\n style.width = width;\n } else {\n containerStyle.width = 'auto';\n }\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <ZIndex priority={'Modal'} className={styles.root()}>\n <HideBodyVerticalScroll />\n {this.state.hasBackground && (\n <div\n onMouseDown={this.handleContainerMouseDown}\n onMouseUp={this.handleContainerMouseUp}\n onClick={this.handleContainerClick}\n className={styles.bg(this.theme)}\n />\n )}\n <ResponsiveLayout>\n {({ isMobile }) => (\n <div\n aria-labelledby={ariaLabelledby}\n ref={this.refContainer}\n className={cx(styles.container(), isMobile && styles.containerMobile(this.theme))}\n onMouseDown={this.handleContainerMouseDown}\n onMouseUp={this.handleContainerMouseUp}\n onClick={this.handleContainerClick}\n data-tid={ModalDataTids.container}\n >\n <div\n aria-modal\n aria-label={ariaLabel}\n role={role}\n className={cx({\n [styles.centerContainer()]: true,\n [styles.mobileCenterContainer()]: isMobile,\n [styles.alignTop()]: Boolean(alignTop),\n })}\n style={isMobile ? undefined : containerStyle}\n data-tid={ModalDataTids.content}\n >\n <div\n className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n style={isMobile ? undefined : style}\n >\n <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n <FocusLock\n disabled={disableFocusLock}\n autoFocus={false}\n className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n >\n {!hasHeader && !noClose && (\n <ZIndex\n className={cx({\n [styles.closeWrapper(this.theme)]: true,\n [styles.mobileCloseWrapper(this.theme)]: isMobile,\n })}\n >\n <ModalClose\n className={cx({\n [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n })}\n requestClose={this.requestClose}\n disableClose={disableClose}\n />\n </ZIndex>\n )}\n <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n </FocusLock>\n </ResizeDetector>\n </div>\n </div>\n </div>\n )}\n </ResponsiveLayout>\n </ZIndex>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private refContainer = (center: HTMLDivElement \| null) => {\n this.containerNode = center;\n };\n\n private handleStackChange = (stack: readonly React.Component[]) => {\n this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n };\n\n private handleContainerMouseDown = (event: React.MouseEvent) => {\n this.mouseDownTarget = event.target;\n };\n\n private handleContainerMouseUp = (event: React.MouseEvent) => {\n this.mouseUpTarget = event.target;\n };\n\n private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (!this.props.ignoreBackgroundClick) {\n const { target, currentTarget } = event;\n if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n this.requestClose();\n }\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private checkHorizontalScrollAppearance = () => {\n let hasScroll = false;\n\n if (this.containerNode) {\n const containerClientWidth = this.containerNode.clientWidth;\n const containerScrollWidth = this.containerNode.scrollWidth;\n hasScroll = containerClientWidth < containerScrollWidth;\n }\n if (hasScroll && !this.state.horizontalScroll) {\n this.setState({ horizontalScroll: true });\n } else if (this.state.horizontalScroll) {\n this.setState({ horizontalScroll: false });\n }\n };\n\n private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n private handleResize = () => {\n LayoutEvents.emit();\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}

package/cjs/components/Modal/Modal.styles.d.ts CHANGED Viewed

@@ -1,8 +1,13 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const modalGlobalClasses: {
+    root: string;
+    container: string;
+};
 export declare const styles: {
     root(): string;
     bg(t: Theme): string;
     container(): string;
+    containerMobile(t: Theme): string;
     window(t: Theme): string;
     mobileWindow(): string;
     centerContainer(): string;

package/cjs/components/Modal/Modal.styles.js CHANGED Viewed

@@ -1,6 +1,11 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.modalGlobalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+var _Mixins = require("../../lib/styles/Mixins");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;
+var modalGlobalClasses = (0, _Emotion.prefix)('modal')({
+  root: 'root',
+  container: 'container' });exports.modalGlobalClasses = modalGlobalClasses;
-var _Mixins = require("../../lib/styles/Mixins");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;
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
@@ -41,10 +46,20 @@ var styles = (0, _Emotion.memoizeStyle)({
+  },
+  containerMobile: function containerMobile(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "])),
@@ -55,7 +70,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileWindow: function mobileWindow() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
@@ -63,7 +78,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   centerContainer: function centerContainer() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
@@ -75,7 +90,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileCenterContainer: function mobileCenterContainer() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
@@ -83,14 +98,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   alignTop: function alignTop() {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      vertical-align: top;\n    "])));
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      vertical-align: top;\n    "])));
   },
   close: function close(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
     (0, _Mixins.resetButton)(),
@@ -118,7 +133,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileClose: function mobileClose(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: ", ";\n      top: ", "px;\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -132,7 +147,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileCloseWithoutHeader: function mobileCloseWithoutHeader() {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: static;\n    "])));
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: static;\n    "])));
   },
@@ -144,7 +159,7 @@ var styles = (0, _Emotion.memoizeStyle)({
     var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
     var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
     var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])),
     blockSizeX + legacyGap,
@@ -155,7 +170,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   mobileCloseWrapper: function mobileCloseWrapper(t) {
     var size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -172,7 +187,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])),
     t.modalCloseButtonDisabledColor);
@@ -180,14 +195,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   focus: function focus(t) {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])),
     t.modalCloseButtonHoverColor,
     t.borderColorFocus);
   },
   header: function header(t) {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n      font-weight: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -199,7 +214,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileHeader: function mobileHeader(t) {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])),
     t.mobileModalHeaderFontSize,
     t.mobileModalHeaderLineHeight,
@@ -208,20 +223,22 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   body: function body(t) {
-    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      padding: 0 ", " ", " ", ";\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "])),
     t.modalBodyBorderRadius,
-    t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft,
+    t.modalBodyPaddingTop,
+    t.modalPaddingRight,
+    t.modalBodyPaddingBottom,
+    t.modalPaddingLeft,
     t.modalBodyTextColor);
   },
   mobileBody: function mobileBody(t) {
-    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n      padding-top: 0px;\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])),
     t.mobileModalBodyPadding,
     t.mobileModalBodyFontSize);
   },
@@ -230,19 +247,19 @@ var styles = (0, _Emotion.memoizeStyle)({
     var rightPadding =
     2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
-    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
     rightPadding);
   },
   mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
     2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
   },
   footer: function footer(t) {
-    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])),
     t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft,
     t.modalFooterTextColor,
     t.modalBorderRadius, t.modalBorderRadius);
@@ -250,13 +267,13 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileFooter: function mobileFooter(t) {
-    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
     t.mobileModalFooterPadding);
   },
   panel: function panel(t) {
-    return (0, _Emotion.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
     t.modalFooterPanelPaddingTop,
     t.modalFooterPanelPaddingBottom,
     t.modalFooterBg);
@@ -264,7 +281,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   fixedHeader: function fixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -284,13 +301,13 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   mobileFixedHeader: function mobileFixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.mobileModalHeaderPadding);
   },
   fixedFooter: function fixedFooter(t) {
-    return (0, _Emotion.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
@@ -310,7 +327,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   fixedPanel: function fixedPanel(t) {
-    return (0, _Emotion.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])),
     t.modalFixedPanelShadow);
@@ -318,43 +335,43 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   headerAddPadding: function headerAddPadding(t) {
-    return (0, _Emotion.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.modalHeaderAdditionalPaddingBottom);
   },
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return (0, _Emotion.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
     t.modalPaddingTop);
   },
   mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-    return (0, _Emotion.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 0px;\n    "])));
+    return (0, _Emotion.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 0px;\n    "])));
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return (0, _Emotion.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
   },
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return (0, _Emotion.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.modalPaddingBottom);
   },
   mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return (0, _Emotion.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
     t.mobileModalBodyPadding);
   },
   columnFlexContainer: function columnFlexContainer() {
-    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
@@ -363,14 +380,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   modalSeparatorWrapper: function modalSeparatorWrapper() {
-    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: 100%;\n    "])));
+    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: 100%;\n    "])));
   },
   modalSeparator: function modalSeparator(t) {
-    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])),
+    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])),
     t.modalSeparatorBorderBottom);
@@ -378,7 +395,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   modalSeparatorFixed: function modalSeparatorFixed() {
-    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0 16px;\n    "])));
+    return (0, _Emotion.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0 16px;\n    "])));
   } });exports.styles = styles;