@skbkontur/react-ui 5.2.0 → 5.3.0

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

@@ -1,97 +1,97 @@
-import type { AriaAttributes, HTMLAttributes } from 'react';
-import React from 'react';
-import type { ThemeIn } from '../../lib/theming/Theme';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import { ModalFooter } from './ModalFooter';
-import { ModalHeader } from './ModalHeader';
-import { ModalBody } from './ModalBody';
-export type MobileModalAppearance = 'auto' | 'top' | 'center' | 'bottom' | 'fullscreen-spacing' | 'fullscreen';
-export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
-    /** Отключает событие `onClose` и дизейблит кнопку закрытия модалки. */
-    disableClose?: boolean;
-    /** Выравнивает окно по верху страницы. */
-    alignTop?: boolean;
-    /** Оставляет окно открытым при клике на фон. */
-    ignoreBackgroundClick?: boolean;
-    /** Убирает крестик для закрытия окна */
-    noClose?: boolean;
-    /** Задает ширину модалки. */
-    width?: number | string;
-    /** Задает функцию, которая вызывается, когда пользователь запросил закрытие окна (нажал на фон, на Escape или на крестик). */
-    onClose?: () => void;
-    /** Отключает фокус-лок внутри модалки. По умолчанию true для IE11. */
-    disableFocusLock?: boolean;
-    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
-    theme?: ThemeIn;
-    /** Задает внешний вид модалки. Работает с версией темы >= 5_2.
-     *  - `auto` — если футера нет, модалка распологается в центре экрана, если футер есть -- модалка растягивается на весь экран с отступами и закругленными краями
-     *  - `top` — модалка располагается сверху независимо от наличия футера
-     *  - `center` — модалка располагается в центре независимо от наличия футера
-     *  - `bottom` — модалка располагается снизу независимо от наличия футера
-     *  - `fullscreen-spacing` — модалка растягивается на весь экран с отступами и закругленными краями
-     *  - `fullscreen` — модалка растягивается на весь экран
-     *  @default auto
-     */
-    mobileAppearance?: MobileModalAppearance;
-}
-export interface ModalState {
-    stackPosition: number;
-    hasBackground: boolean;
-    horizontalScroll: boolean;
-    hasHeader: boolean;
-    hasFooter: boolean;
-    hasPanel: boolean;
-}
-export declare const ModalDataTids: {
-    readonly container: "modal-container";
-    readonly content: "modal-content";
-    readonly close: "modal-close";
-};
-export declare const ModalZIndexPriority: {
-    readonly Cross: 2;
-    readonly Content: 1;
-};
-type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role' | 'mobileAppearance'>>;
-/**
- * Модальное окно `Modal` — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.
- *
- * Состоит из 3-х компонентов: `Modal.Header`, `Modal.Body`, `Modal.Footer`.
- *
- * Для отображения серой плашки в футере в компонент `Footer` необходимо передать проп `panel`.
- *
- * Для отключения прилипания шапки и футера в соответствующий компонент нужно передать проп `sticky` со значением `false` (по-умолчанию прилипание включено).
- */
-export declare class Modal extends React.Component<ModalProps, ModalState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static Header: typeof ModalHeader;
-    static Body: typeof ModalBody;
-    static Footer: typeof ModalFooter;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: ModalState;
-    private theme;
-    private stackSubscription;
-    private containerNode;
-    private mouseDownTarget;
-    private mouseUpTarget;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private getMobileContainerClassName;
-    private renderMain;
-    private requestClose;
-    private refContainer;
-    private handleStackChange;
-    private handleContainerMouseDown;
-    private handleContainerMouseUp;
-    private handleContainerClick;
-    private handleKeyDown;
-    private checkHorizontalScrollAppearance;
-    private throttledCheckHorizontalScroll;
-    private handleResize;
-    private setHasHeader;
-    private setHasFooter;
-    private setHasPanel;
-}
-export {};
+import type { AriaAttributes, HTMLAttributes } from 'react';
+import React from 'react';
+import type { ThemeIn } from '../../lib/theming/Theme';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import { ModalFooter } from './ModalFooter';
+import { ModalHeader } from './ModalHeader';
+import { ModalBody } from './ModalBody';
+export type MobileModalAppearance = 'auto' | 'top' | 'center' | 'bottom' | 'fullscreen-spacing' | 'fullscreen';
+export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+    /** Отключает событие `onClose` и дизейблит кнопку закрытия модалки. */
+    disableClose?: boolean;
+    /** Выравнивает окно по верху страницы. */
+    alignTop?: boolean;
+    /** Оставляет окно открытым при клике на фон. */
+    ignoreBackgroundClick?: boolean;
+    /** Убирает крестик для закрытия окна */
+    noClose?: boolean;
+    /** Задает ширину модалки. */
+    width?: number | string;
+    /** Задает функцию, которая вызывается, когда пользователь запросил закрытие окна (нажал на фон, на Escape или на крестик). */
+    onClose?: () => void;
+    /** Отключает фокус-лок внутри модалки. По умолчанию true для IE11. */
+    disableFocusLock?: boolean;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
+    theme?: ThemeIn;
+    /** Задает внешний вид модалки. Работает с версией темы >= 5_2.
+     *  - `auto` — если футера нет, модалка распологается в центре экрана, если футер есть -- модалка растягивается на весь экран с отступами и закругленными краями
+     *  - `top` — модалка располагается сверху независимо от наличия футера
+     *  - `center` — модалка располагается в центре независимо от наличия футера
+     *  - `bottom` — модалка располагается снизу независимо от наличия футера
+     *  - `fullscreen-spacing` — модалка растягивается на весь экран с отступами и закругленными краями
+     *  - `fullscreen` — модалка растягивается на весь экран
+     *  @default auto
+     */
+    mobileAppearance?: MobileModalAppearance;
+}
+export interface ModalState {
+    stackPosition: number;
+    hasBackground: boolean;
+    horizontalScroll: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    hasPanel: boolean;
+}
+export declare const ModalDataTids: {
+    readonly container: "modal-container";
+    readonly content: "modal-content";
+    readonly close: "modal-close";
+};
+export declare const ModalZIndexPriority: {
+    readonly Cross: 2;
+    readonly Content: 1;
+};
+type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role' | 'mobileAppearance'>>;
+/**
+ * Модальное окно `Modal` — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.
+ *
+ * Состоит из 3-х компонентов: `Modal.Header`, `Modal.Body`, `Modal.Footer`.
+ *
+ * Для отображения серой плашки в футере в компонент `Footer` необходимо передать проп `panel`.
+ *
+ * Для отключения прилипания шапки и футера в соответствующий компонент нужно передать проп `sticky` со значением `false` (по-умолчанию прилипание включено).
+ */
+export declare class Modal extends React.Component<ModalProps, ModalState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static Header: typeof ModalHeader;
+    static Body: typeof ModalBody;
+    static Footer: typeof ModalFooter;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: ModalState;
+    private theme;
+    private stackSubscription;
+    private containerNode;
+    private mouseDownTarget;
+    private mouseUpTarget;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private getMobileContainerClassName;
+    private renderMain;
+    private requestClose;
+    private refContainer;
+    private handleStackChange;
+    private handleContainerMouseDown;
+    private handleContainerMouseUp;
+    private handleContainerClick;
+    private handleKeyDown;
+    private checkHorizontalScrollAppearance;
+    private throttledCheckHorizontalScroll;
+    private handleResize;
+    private setHasHeader;
+    private setHasFooter;
+    private setHasPanel;
+}
+export {};

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

@@ -1,68 +1,69 @@
-import type { 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;
-    containerDesktop(): string;
-    container5_2(): string;
-    containerMobile(t: Theme): string;
-    mobileContainerFullscreen5_2(): string;
-    mobileContainerSmall5_2(): string;
-    mobileContainerSmallTop5_2(): string;
-    mobileContainerSmallBottom5_2(): string;
-    window(t: Theme): string;
-    mobileWindow(): string;
-    mobileWindowFullscreen5_2(): string;
-    centerContainer(): string;
-    mobileCenterContainer(): string;
-    mobileCenterContainer5_2(t: Theme): string;
-    mobileCenterContainerBig5_2(t: Theme): string;
-    mobileCenterContainerFullscreen5_2(): string;
-    alignTop(): string;
-    close(t: Theme): string;
-    close5_1(t: Theme): string;
-    closeMobile(t: Theme): string;
-    closeMobile5_1(t: Theme): string;
-    mobileCloseWithoutHeader(): string;
-    mobileCloseWithoutHeader5_2(t: Theme): string;
-    closeWrapper(t: Theme): string;
-    mobileCloseWrapper(t: Theme): string;
-    mobileCloseWrapper5_2(t: Theme): string;
-    disabled(t: Theme): string;
-    focus(t: Theme): string;
-    focus5_1(t: Theme): string;
-    header(t: Theme): string;
-    header5_2(t: Theme): string;
-    mobileHeader(t: Theme): string;
-    body(t: Theme): string;
-    mobileBody(t: Theme): string;
-    headerWithClose(t: Theme): string;
-    mobileHeaderWithClose(t: Theme): string;
-    footer(t: Theme): string;
-    mobileFooter(t: Theme): string;
-    panel(t: Theme): string;
-    fixedHeader(t: Theme): string;
-    fixedHeader5_2(): string;
-    mobileFixedHeader(t: Theme): string;
-    mobileFixedHeader5_2(t: Theme): string;
-    fixedFooter(t: Theme): string;
-    fixedFooter5_2(): string;
-    mobileFixedFooter5_2(t: Theme): string;
-    fixedPanel(t: Theme): string;
-    headerAddPadding(t: Theme): string;
-    bodyWithoutHeader(t: Theme): string;
-    mobileBodyWithoutHeader(): string;
-    mobileBodyWithoutHeader5_2(t: Theme): string;
-    bodyWithoutPadding(): string;
-    bodyAddPaddingForPanel(t: Theme): string;
-    mobileBodyAddPaddingForPanel(t: Theme): string;
-    mobileBodyAddPaddingForPanel5_2(t: Theme): string;
-    columnFlexContainer(): string;
-    modalSeparatorWrapper(): string;
-    modalSeparator(t: Theme): string;
-    modalSeparatorFixed(): string;
-};
+import type { 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;
+    containerDesktop(): string;
+    container5_2(): string;
+    containerMobile(t: Theme): string;
+    mobileContainerFullscreen5_2(): string;
+    mobileContainerSmall5_2(): string;
+    mobileContainerSmallTop5_2(): string;
+    mobileContainerSmallBottom5_2(): string;
+    window(t: Theme): string;
+    mobileWindow(): string;
+    mobileWindowFullscreen5_2(): string;
+    centerContainer(): string;
+    mobileCenterContainer(): string;
+    mobileCenterContainer5_2(t: Theme): string;
+    mobileCenterContainerBig5_2(t: Theme): string;
+    mobileCenterContainerFullscreen5_2(): string;
+    alignTop(): string;
+    close(t: Theme): string;
+    close5_1(t: Theme): string;
+    closeMobile(t: Theme): string;
+    closeMobile5_1(t: Theme): string;
+    mobileCloseWithoutHeader(): string;
+    mobileCloseWithoutHeader5_2(t: Theme): string;
+    closeWrapper(t: Theme): string;
+    mobileCloseWrapper(t: Theme): string;
+    mobileCloseWrapper5_2(t: Theme): string;
+    disabled(t: Theme): string;
+    focus(t: Theme): string;
+    focus5_1(t: Theme): string;
+    header(t: Theme): string;
+    header5_2(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    titleCut(): string;
+    body(t: Theme): string;
+    mobileBody(t: Theme): string;
+    headerWithClose(t: Theme): string;
+    mobileHeaderWithClose(t: Theme): string;
+    footer(t: Theme): string;
+    mobileFooter(t: Theme): string;
+    panel(t: Theme): string;
+    fixedHeader(t: Theme): string;
+    fixedHeader5_2(): string;
+    mobileFixedHeader(t: Theme): string;
+    mobileFixedHeader5_2(t: Theme): string;
+    fixedFooter(t: Theme): string;
+    fixedFooter5_2(): string;
+    mobileFixedFooter5_2(t: Theme): string;
+    fixedPanel(t: Theme): string;
+    headerAddPadding(t: Theme): string;
+    bodyWithoutHeader(t: Theme): string;
+    mobileBodyWithoutHeader(): string;
+    mobileBodyWithoutHeader5_2(t: Theme): string;
+    bodyWithoutPadding(): string;
+    bodyAddPaddingForPanel(t: Theme): string;
+    mobileBodyAddPaddingForPanel(t: Theme): string;
+    mobileBodyAddPaddingForPanel5_2(t: Theme): string;
+    columnFlexContainer(): string;
+    modalSeparatorWrapper(): string;
+    modalSeparator(t: Theme): string;
+    modalSeparatorFixed(t: Theme): string;
+};

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

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61;
+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, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62;
 
 var modalGlobalClasses = exports.modalGlobalClasses = (0, _Emotion.prefix)('modal')({
   root: 'root',
@@ -349,10 +349,18 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
     t.mobileModalHeaderLineHeight,
     t.mobileModalHeaderPadding);
 
+  },
+
+  titleCut: function titleCut() {
+    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+
+
+
+
   },
 
   body: function body(t) {
-    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "])),
     t.modalBodyBorderRadius,
     t.modalBodyPaddingTop,
     t.modalPaddingRight,
@@ -363,7 +371,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   mobileBody: function mobileBody(t) {
-    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])),
     t.mobileModalBodyPadding,
 
 
@@ -375,19 +383,19 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   headerWithClose: function headerWithClose(t) {
     var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize);
 
-    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
     rightPadding);
 
   },
 
   mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
     2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
 
   },
 
   footer: function footer(t) {
-    return (0, _Emotion.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject40 || (_templateObject40 = (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);
@@ -395,13 +403,13 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   mobileFooter: function mobileFooter(t) {
-    return (0, _Emotion.css)(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
     t.mobileModalFooterPadding);
 
   },
 
   panel: function panel(t) {
-    return (0, _Emotion.css)(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
     t.modalFooterPanelPaddingTop,
     t.modalFooterPanelPaddingBottom,
     t.modalFooterBg);
@@ -409,7 +417,7 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   fixedHeader: function fixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject42 || (_templateObject42 = (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)(_templateObject43 || (_templateObject43 = (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,
@@ -429,25 +437,25 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   fixedHeader5_2: function fixedHeader5_2() {
-    return (0, _Emotion.css)(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0;\n    "])));
 
 
   },
 
   mobileFixedHeader: function mobileFixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.mobileModalHeaderPadding);
 
   },
 
   mobileFixedHeader5_2: function mobileFixedHeader5_2(t) {
-    return (0, _Emotion.css)(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", " ", " 0 0;\n    "])),
+    return (0, _Emotion.css)(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", " ", " 0 0;\n    "])),
     t.modalBorderRadius, t.modalBorderRadius);
 
   },
 
   fixedFooter: function fixedFooter(t) {
-    return (0, _Emotion.css)(_templateObject46 || (_templateObject46 = (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)(_templateObject47 || (_templateObject47 = (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,
@@ -467,19 +475,19 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   fixedFooter5_2: function fixedFooter5_2() {
-    return (0, _Emotion.css)(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0;\n    "])));
 
 
   },
 
   mobileFixedFooter5_2: function mobileFixedFooter5_2(t) {
-    return (0, _Emotion.css)(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0 0 ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0 0 ", " ", ";\n    "])),
     t.modalBorderRadius, t.modalBorderRadius);
 
   },
 
   fixedPanel: function fixedPanel(t) {
-    return (0, _Emotion.css)(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])),
 
     t.modalFixedPanelShadow);
 
@@ -487,56 +495,56 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   headerAddPadding: function headerAddPadding(t) {
-    return (0, _Emotion.css)(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.modalHeaderAdditionalPaddingBottom);
 
   },
 
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return (0, _Emotion.css)(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
     t.modalPaddingTop);
 
   },
 
   mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-    return (0, _Emotion.css)(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 0;\n    "])));
 
 
   },
 
   mobileBodyWithoutHeader5_2: function mobileBodyWithoutHeader5_2(t) {
-    return (0, _Emotion.css)(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-right: ", ";\n    "])),
     t.mobileModalBodyPaddingTop,
     t.mobileModalWithoutHeaderCloseButtonWidth);
 
   },
 
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return (0, _Emotion.css)(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
 
 
   },
 
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return (0, _Emotion.css)(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.modalPaddingBottom);
 
   },
 
   mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return (0, _Emotion.css)(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", ";\n    "])),
     t.mobileModalBodyPadding);
 
   },
 
   mobileBodyAddPaddingForPanel5_2: function mobileBodyAddPaddingForPanel5_2(t) {
-    return (0, _Emotion.css)(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.mobileModalBodyPaddingBottom);
 
   },
 
   columnFlexContainer: function columnFlexContainer() {
-    return (0, _Emotion.css)(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+    return (0, _Emotion.css)(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
 
 
 
@@ -545,23 +553,23 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   modalSeparatorWrapper: function modalSeparatorWrapper() {
-    return (0, _Emotion.css)(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: 100%;\n    "])));
+    return (0, _Emotion.css)(_templateObject60 || (_templateObject60 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: 100%;\n    "])));
 
 
 
   },
 
   modalSeparator: function modalSeparator(t) {
-    return (0, _Emotion.css)(_templateObject60 || (_templateObject60 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])),
-    t.modalSeparatorBorderBottom);
-
+    return (0, _Emotion.css)(_templateObject61 || (_templateObject61 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", ";\n      margin: ", ";\n      transition: margin 0.3s;\n    "])),
+    t.modalSeparatorBorderBottom,
+    t.modalSeparatorMargin);
 
 
   },
 
-  modalSeparatorFixed: function modalSeparatorFixed() {
-    return (0, _Emotion.css)(_templateObject61 || (_templateObject61 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0 16px;\n    "])));
-
+  modalSeparatorFixed: function modalSeparatorFixed(t) {
+    return (0, _Emotion.css)(_templateObject62 || (_templateObject62 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n    "])),
+    t.modalSeparatorFixedMargin);
 
   }
 });