@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/components/SidePage/SidePage/SidePage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","cn","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","jsStyles","isFooter","isHeader","TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","Children","toArray","props","children","forEach","child","panel","sidePageContextProps","requestClose","getWidth","footerRef","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","fromLeft","root","leftSide","Boolean","emit","wrapper","shadow","getSidebarStyle","_","layout","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { stopPropagation } from '../../lib/events/stopPropagation';\r\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\r\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { RenderLayer } from '../../internal/RenderLayer';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { SidePageBody } from './SidePageBody';\r\nimport { SidePageContainer } from './SidePageContainer';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\nimport { SidePageFooter } from './SidePageFooter';\r\nimport { SidePageHeader } from './SidePageHeader';\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { isFooter, isHeader } from './helpers';\r\n\r\nexport interface SidePageProps extends CommonProps {\r\n  /**\r\n   * Добавить блокирующий фон, когда сайдпейдж открыт\r\n   */\r\n  blockBackground?: boolean;\r\n\r\n  /**\r\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\r\n   */\r\n  disableClose?: boolean;\r\n\r\n  /**\r\n   * Не закрывать сайдпейдж при клике на фон.\r\n   */\r\n  ignoreBackgroundClick?: boolean;\r\n\r\n  /**\r\n   * Задать ширину сайдпейджа\r\n   */\r\n  width?: number | string;\r\n\r\n  /**\r\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\r\n   * Escape или на крестик).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Показывать сайдпэйдж слева\r\n   *\r\n   */\r\n  fromLeft?: boolean;\r\n\r\n  /**\r\n   * Отключить анимации\r\n   *\r\n   */\r\n  disableAnimations?: boolean;\r\n}\r\n\r\nexport interface SidePageState {\r\n  stackPosition?: number;\r\n  hasMargin?: boolean;\r\n  hasShadow?: boolean;\r\n  hasBackground?: boolean;\r\n}\r\n\r\nconst TRANSITION_TIMEOUT = 200;\r\n\r\n/**\r\n * Сайдпейдж\r\n *\r\n * Содержит в себе три компоненты: **SidePage.Header**,\r\n * **SidePage.Body** и **SidePage.Footer**\r\n *\r\n * Для отображения серой плашки в футере в компонент\r\n * **Footer** необходимо передать пропс **panel**\r\n */\r\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\r\n  public static __KONTUR_REACT_UI__ = 'SidePage';\r\n\r\n  public static Header = SidePageHeader;\r\n  public static Body = SidePageBody;\r\n  public static Footer = SidePageFooter;\r\n  public static Container = SidePageContainer;\r\n  public state: SidePageState = {};\r\n  private theme!: Theme;\r\n  private stackSubscription: ModalStackSubscription | null = null;\r\n  private layoutRef: HTMLElement | null = null;\r\n  private footer: SidePageFooter | null = null;\r\n\r\n  public componentDidMount() {\r\n    window.addEventListener('keydown', this.handleKeyDown);\r\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    window.removeEventListener('keydown', this.handleKeyDown);\r\n    if (this.stackSubscription != null) {\r\n      this.stackSubscription.remove();\r\n    }\r\n    ModalStack.remove(this);\r\n  }\r\n\r\n  /**\r\n   * Обновляет разметку компонента.\r\n   * @public\r\n   */\r\n  public updateLayout = (): void => {\r\n    if (this.footer) {\r\n      this.footer.update();\r\n    }\r\n  };\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { blockBackground, disableAnimations } = this.props;\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <RenderContainer>\r\n          <div>\r\n            {blockBackground && this.renderShadow()}\r\n            <CSSTransition\r\n              in\r\n              classNames={this.getTransitionNames()}\r\n              appear={!disableAnimations}\r\n              enter={!disableAnimations}\r\n              exit={false}\r\n              timeout={{\r\n                enter: TRANSITION_TIMEOUT,\r\n                exit: TRANSITION_TIMEOUT,\r\n              }}\r\n            >\r\n              {this.renderContainer()}\r\n            </CSSTransition>\r\n          </div>\r\n        </RenderContainer>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderContainer(): JSX.Element {\r\n    const { width, blockBackground, fromLeft } = this.props;\r\n\r\n    return (\r\n      <ZIndex\r\n        priority={'Sidepage'}\r\n        data-tid=\"SidePage__root\"\r\n        className={cn({\r\n          [jsStyles.root()]: true,\r\n          [jsStyles.leftSide(this.theme)]: Boolean(fromLeft),\r\n        })}\r\n        onScroll={LayoutEvents.emit}\r\n        createStackingContext\r\n        style={{ width: width || (blockBackground ? 800 : 500) }}\r\n      >\r\n        <RenderLayer onClickOutside={this.handleClickOutside} active>\r\n          <div\r\n            data-tid=\"SidePage__container\"\r\n            className={cn(jsStyles.wrapper(this.theme), this.state.hasShadow && jsStyles.shadow(this.theme))}\r\n            style={this.getSidebarStyle()}\r\n          >\r\n            <div ref={_ => (this.layoutRef = _)} className={jsStyles.layout()}>\r\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\r\n                {this.props.children}\r\n              </SidePageContext.Provider>\r\n            </div>\r\n          </div>\r\n        </RenderLayer>\r\n      </ZIndex>\r\n    );\r\n  }\r\n\r\n  private getSidePageContextProps = (): SidePageContextType => {\r\n    let hasHeader = false;\r\n    let hasFooter = false;\r\n    let hasPanel = false;\r\n\r\n    React.Children.toArray(this.props.children).forEach(child => {\r\n      if (isHeader(child)) {\r\n        hasHeader = true;\r\n      }\r\n      if (isFooter(child)) {\r\n        hasFooter = true;\r\n        if (child.props.panel) {\r\n          hasPanel = true;\r\n        }\r\n      }\r\n    });\r\n\r\n    const sidePageContextProps: SidePageContextType = {\r\n      hasHeader,\r\n      hasFooter,\r\n      hasPanel,\r\n      requestClose: this.requestClose,\r\n      getWidth: this.getWidth,\r\n      updateLayout: this.updateLayout,\r\n      footerRef: this.footerRef,\r\n    };\r\n\r\n    return sidePageContextProps;\r\n  };\r\n\r\n  private getWidth = () => {\r\n    if (!this.layoutRef) {\r\n      return 'auto';\r\n    }\r\n    return this.layoutRef.getBoundingClientRect().width;\r\n  };\r\n\r\n  private renderShadow(): JSX.Element {\r\n    return (\r\n      <ZIndex priority={'Sidepage'} className={jsStyles.overlay()} onScroll={LayoutEvents.emit}>\r\n        <HideBodyVerticalScroll key=\"hbvs\" />\r\n        <div\r\n          key=\"overlay\"\r\n          className={cn({\r\n            [jsStyles.background()]: true,\r\n            [jsStyles.backgroundGray(this.theme)]: this.state.hasBackground,\r\n          })}\r\n        />\r\n      </ZIndex>\r\n    );\r\n  }\r\n\r\n  private getSidebarStyle(): React.CSSProperties {\r\n    const sidePageStyle: React.CSSProperties = {};\r\n\r\n    if (this.state.hasMargin) {\r\n      if (this.props.fromLeft) {\r\n        sidePageStyle.marginLeft = 20;\r\n      } else {\r\n        sidePageStyle.marginRight = 20;\r\n      }\r\n    }\r\n\r\n    return sidePageStyle;\r\n  }\r\n\r\n  private getTransitionNames(): Record<string, string> {\r\n    const transition = this.props.fromLeft ? jsStyles.transitionRight : jsStyles.transitionLeft;\r\n\r\n    return {\r\n      enter: transition(),\r\n      enterActive: jsStyles.transitionActive(),\r\n      exit: jsStyles.transitionLeave(),\r\n      exitActive: jsStyles.transitionLeaveActive(),\r\n      appear: transition(),\r\n      appearActive: jsStyles.transitionActive(),\r\n    };\r\n  }\r\n\r\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\r\n    const sidePages = stack.filter(x => x instanceof SidePage);\r\n    const currentSidePagePosition = sidePages.indexOf(this);\r\n\r\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\r\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\r\n    const hasBackground = ModalStack.isBlocking(this);\r\n\r\n    this.setState({\r\n      stackPosition: stack.indexOf(this),\r\n      hasMargin,\r\n      hasShadow,\r\n      hasBackground,\r\n    });\r\n  };\r\n\r\n  private handleClickOutside = (e: Event) => {\r\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\r\n      // ignore mousedown on window scrollbar\r\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\r\n        return;\r\n      }\r\n      this.requestClose();\r\n    }\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (this.state.stackPosition !== 0) {\r\n      return;\r\n    }\r\n    if (isKeyEscape(e)) {\r\n      stopPropagation(e);\r\n      this.requestClose();\r\n    }\r\n  };\r\n\r\n  private requestClose = () => {\r\n    if (this.props.disableClose) {\r\n      return;\r\n    }\r\n    if (this.props.onClose) {\r\n      this.props.onClose();\r\n    }\r\n  };\r\n\r\n  private footerRef = (ref: SidePageFooter | null) => {\r\n    this.footer = ref;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","isTestEnv","ResponsiveLayout","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","isMobile","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","root","mobileRoot","emit","undefined","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","_","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layoutRef: HTMLElement | null = null;\n  private footer: SidePageFooter | null = null;\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    if (this.footer) {\n      this.footer.update();\n    }\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <RenderContainer>\n          <div>\n            <ResponsiveLayout>\n              {({ isMobile }) => {\n                return (\n                  <>\n                    {blockBackground && this.renderShadow()}\n                    <CSSTransition\n                      in\n                      classNames={this.getTransitionNames()}\n                      appear={!disableAnimations}\n                      enter={!disableAnimations}\n                      exit={false}\n                      timeout={{\n                        enter: TRANSITION_TIMEOUT,\n                        exit: TRANSITION_TIMEOUT,\n                      }}\n                    >\n                      {this.renderContainer(isMobile)}\n                    </CSSTransition>\n                    {isMobile && <HideBodyVerticalScroll />}\n                  </>\n                );\n              }}\n            </ResponsiveLayout>\n          </div>\n        </RenderContainer>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.mobileRoot()]: isMobile,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={\n          isMobile\n            ? undefined\n            : {\n                width: width || (blockBackground ? 800 : 500),\n                right: fromLeft ? 'auto' : offset,\n                left: fromLeft ? offset : 'auto',\n              }\n        }\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={(_) => (this.layoutRef = _)}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layoutRef) {\n      return 'auto';\n    }\n    return this.layoutRef.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\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 requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\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/components/SidePage/SidePage.d.ts

@@ -36,12 +36,23 @@ export interface SidePageProps extends CommonProps {
      *
      */
     disableAnimations?: boolean;
+    /**
+     * Работает только при заблокированном фоне: `blockBackground = true`
+     */
+    disableFocusLock: boolean;
+    /**
+     * задает отступ от края экрана
+     */
+    offset?: number | string;
 }
 export interface SidePageState {
     stackPosition?: number;
     hasMargin?: boolean;
     hasShadow?: boolean;
     hasBackground?: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    hasPanel: boolean;
 }
 /**
  * Сайдпейдж
@@ -70,17 +81,24 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
      * @public
      */
     updateLayout: () => void;
+    static defaultProps: {
+        disableAnimations: boolean;
+        disableFocusLock: boolean;
+        offset: number;
+    };
     render(): JSX.Element;
     private renderMain;
     private renderContainer;
     private getSidePageContextProps;
     private getWidth;
     private renderShadow;
-    private getSidebarStyle;
     private getTransitionNames;
     private handleStackChange;
     private handleClickOutside;
     private handleKeyDown;
     private requestClose;
     private footerRef;
+    private setHasHeader;
+    private setHasFooter;
+    private setHasPanel;
 }

package/components/SidePage/SidePage.md

@@ -1,48 +1,48 @@
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-const [opened, setOpened] = React.useState(false);
-
-function renderSidePage() {
-  return (
-    <SidePage onClose={close} blockBackground>
-      <SidePage.Header>Title</SidePage.Header>
-      <SidePage.Body>
-        <div
-          style={{
-            background: `repeating-linear-gradient(
-                          60deg,
-                          #fafafa,
-                          #fafafa 20px,
-                          #dfdede 20px,
-                          #dfdede 40px
-                        )`,
-            height: 600,
-            padding: '20px 0',
-          }}
-        >
-          <SidePage.Container>
-            <p>Use rxjs operators with react hooks</p>
-          </SidePage.Container>
-        </div>
-      </SidePage.Body>
-      <SidePage.Footer panel>
-        <Button onClick={close}>Close</Button>
-      </SidePage.Footer>
-    </SidePage>
-  );
-}
-
-function open() {
-  setOpened(true);
-}
-
-function close() {
-  setOpened(false);
-}
-
-<div>
-  {opened && renderSidePage()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+
+function renderSidePage() {
+  return (
+    <SidePage onClose={close} blockBackground>
+      <SidePage.Header>Title</SidePage.Header>
+      <SidePage.Body>
+        <div
+          style={{
+            background: `repeating-linear-gradient(
+                          60deg,
+                          #fafafa,
+                          #fafafa 20px,
+                          #dfdede 20px,
+                          #dfdede 40px
+                        )`,
+            height: 600,
+            padding: '20px 0',
+          }}
+        >
+          <SidePage.Container>
+            <p>Use rxjs operators with react hooks</p>
+          </SidePage.Container>
+        </div>
+      </SidePage.Body>
+      <SidePage.Footer panel>
+        <Button onClick={close}>Close</Button>
+      </SidePage.Footer>
+    </SidePage>
+  );
+}
+
+function open() {
+  setOpened(true);
+}
+
+function close() {
+  setOpened(false);
+}
+
+<div>
+  {opened && renderSidePage()}
+  <Button onClick={open}>Open</Button>
+</div>;
+```

package/components/SidePage/SidePage.styles/SidePage.styles.js

@@ -1,97 +1,142 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+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;
 
-import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      right: 0;\n      top: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
+  },
+  mobileRoot: function mobileRoot() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
   },
   overlay: function overlay() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+  },
+  body: function body(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "])), t.modalBodyTextColor);
   },
-  body: function body() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      z-index: 0;\n    "])));
+  mobileBody: function mobileBody() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
   },
   container: function container(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+  },
+  mobileContainer: function mobileContainer(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
   },
   containerWithoutHeader: function containerWithoutHeader(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding-top: ", " !important;\n    "])), is8pxTheme(t) ? t.sidePagePaddingTop : 0);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.sidePagePaddingTop);
+  },
+  mobileContainerWithoutHeader: function mobileContainerWithoutHeader(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.mobileSidePagePaddingTop);
   },
   containerWithoutFooter: function containerWithoutFooter(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", " !important;\n    "])), is8pxTheme(t) ? t.sidePagePaddingBottom : 0);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
   },
   containerWithPanel: function containerWithPanel(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", " !important;\n    "])), is8pxTheme(t) ? t.sidePagePaddingBottom : 0);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+  },
+  focusLock: function focusLock() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
   },
   wrapper: function wrapper(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n    "])), t.sidePageBgDefault);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])), t.sidePageBgDefault);
   },
-  layout: function layout() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])));
+  wrapperLeft: function wrapperLeft() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
+  },
+  wrapperMarginLeft: function wrapperMarginLeft() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      margin-left: 20px;\n    "])));
+  },
+  wrapperMarginRight: function wrapperMarginRight() {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      margin-right: 20px;\n    "])));
+  },
+  headerWrapper: function headerWrapper() {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
+  },
+  mobileHeader: function mobileHeader(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
   },
   headerFixed: function headerFixed(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: 0 1px ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageBgDefault, t.sidePageBorderColor, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
   },
   title: function title(t) {
     var paddingRight = parseInt(t.sidePageCloseButtonPadding) + parseInt(t.sidePageCloseButtonLegacyPaddingLeft) + parseInt(t.sidePageCloseIconSize);
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+  },
+  mobileTitle: function mobileTitle(t) {
+    var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.mobileSidePagePaddingLeft, paddingRight);
   },
   titleFixed: function titleFixed() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
   },
   background: function background() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
   },
   backgroundGray: function backgroundGray(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
   },
   shadow: function shadow(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        box-shadow: ", ";\n      }\n    "])), cssName(styles.wrapper(t)), t.sidePageContainerShadow);
-  },
-  leftSide: function leftSide(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      right: auto;\n\n      & ", " {\n        float: left;\n      }\n    "])), cssName(styles.wrapper(t)));
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
   },
   close: function close(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      position: absolute;\n      right: ", ";\n      text-align: center;\n      text-decoration: none;\n      width: ", ";\n      padding: 0 ", ";\n      margin: 0 -", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sidePageCloseButtonColor, t.sidePageCloseButtonPadding, t.sidePageCloseIconSize, t.sidePageCloseButtonClickAreaX, t.sidePageCloseButtonClickAreaX, t.sidePageCloseButtonHoverColor);
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+  },
+  mobileClose: function mobileClose(t) {
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+  },
+  closeFocus: function closeFocus(t) {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
+  },
+  wrapperClose: function wrapperClose(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
+  },
+  mobileWrapperClose: function mobileWrapperClose(t) {
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
   },
   panel: function panel(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      border-top: 0 !important;\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
   },
-  closeIcon: function closeIcon(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      width: ", ";\n      line-height: 0;\n    "])), t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+  wrapperCloseFixed: function wrapperCloseFixed(t) {
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
   },
-  fixed: function fixed(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n    "])), t.sidePageHeaderFixedLineHeight);
+  footerWrapper: function footerWrapper() {
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
-  footer: function footer() {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
+  footer: function footer(t) {
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "])), t.sidePageFooterTextColor);
+  },
+  positionStatic: function positionStatic() {
+    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
   },
   footerContent: function footerContent(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+  },
+  mobileFooterContent: function mobileFooterContent(t) {
+    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "])), t.mobileSidePageFooterPadding);
   },
   footerFixed: function footerFixed(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-top: 1px solid ", ";\n    "])), t.sidePageBgDefault, t.sidePageBorderColor);
+    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
   },
   transitionLeft: function transitionLeft() {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
+    return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
   },
   transitionRight: function transitionRight() {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
+    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
   },
   transitionActive: function transitionActive() {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0) !important;\n    "])));
+    return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
   },
   transitionLeave: function transitionLeave() {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
+    return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/SidePage/SidePage.styles/SidePage.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","cssName","memoizeStyle","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","headerFixed","sidePageBorderColor","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickAreaX","sidePageCloseButtonHoverColor","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","closeIcon","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive","jsStyles"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\nimport { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      height: 100%;\r\n      position: fixed;\r\n      right: 0;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  overlay() {\r\n    return css`\r\n      position: fixed;\r\n      top: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n    `;\r\n  },\r\n\r\n  body() {\r\n    return css`\r\n      height: 100%;\r\n      z-index: 0;\r\n    `;\r\n  },\r\n\r\n  container(t: Theme) {\r\n    return css`\r\n      padding-left: ${t.sidePagePaddingLeft};\r\n      padding-right: ${t.sidePagePaddingRight};\r\n    `;\r\n  },\r\n\r\n  containerWithoutHeader(t: Theme) {\r\n    return css`\r\n      padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0} !important;\r\n    `;\r\n  },\r\n\r\n  containerWithoutFooter(t: Theme) {\r\n    return css`\r\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\r\n    `;\r\n  },\r\n\r\n  containerWithPanel(t: Theme) {\r\n    return css`\r\n      padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\r\n    `;\r\n  },\r\n\r\n  wrapper(t: Theme) {\r\n    return css`\r\n      background: ${t.sidePageBgDefault};\r\n      float: right;\r\n      height: 100%;\r\n      width: 100%;\r\n      overflow-y: auto;\r\n      position: relative;\r\n      white-space: normal;\r\n    `;\r\n  },\r\n\r\n  layout() {\r\n    return css`\r\n      align-items: stretch;\r\n      display: flex;\r\n      flex-direction: column;\r\n    `;\r\n  },\r\n\r\n  header(t: Theme) {\r\n    return css`\r\n      font-size: ${t.sidePageHeaderFontSize};\r\n      line-height: ${t.sidePageHeaderLineHeight};\r\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\r\n      width: 100%;\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  headerFixed(t: Theme) {\r\n    return css`\r\n      background: ${t.sidePageBgDefault};\r\n      box-shadow: 0 1px ${t.sidePageBorderColor};\r\n      font-size: ${t.sidePageHeaderFixedFontSize};\r\n      line-height: ${t.sidePageHeaderFixedLineHeight};\r\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\r\n    `;\r\n  },\r\n\r\n  title(t: Theme) {\r\n    const paddingRight =\r\n      parseInt(t.sidePageCloseButtonPadding) +\r\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\r\n      parseInt(t.sidePageCloseIconSize);\r\n    return css`\r\n      padding-left: ${t.sidePagePaddingLeft};\r\n      padding-right: ${paddingRight}px;\r\n    `;\r\n  },\r\n\r\n  titleFixed() {\r\n    return css`\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    `;\r\n  },\r\n\r\n  background() {\r\n    return css`\r\n      height: 100%;\r\n      position: absolute;\r\n      width: 100%;\r\n    `;\r\n  },\r\n\r\n  backgroundGray(t: Theme) {\r\n    return css`\r\n      background: ${t.sidePageBackingBg};\r\n      opacity: ${t.sidePageBackingBgOpacity};\r\n    `;\r\n  },\r\n\r\n  shadow(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.wrapper(t))}& {\r\n        box-shadow: ${t.sidePageContainerShadow};\r\n      }\r\n    `;\r\n  },\r\n\r\n  leftSide(t: Theme) {\r\n    return css`\r\n      left: 0;\r\n      right: auto;\r\n\r\n      & ${cssName(styles.wrapper(t))} {\r\n        float: left;\r\n      }\r\n    `;\r\n  },\r\n\r\n  close(t: Theme) {\r\n    return css`\r\n      color: ${t.sidePageCloseButtonColor};\r\n      cursor: pointer;\r\n      position: absolute;\r\n      right: ${t.sidePageCloseButtonPadding};\r\n      text-align: center;\r\n      text-decoration: none;\r\n      width: ${t.sidePageCloseIconSize};\r\n      padding: 0 ${t.sidePageCloseButtonClickAreaX};\r\n      margin: 0 -${t.sidePageCloseButtonClickAreaX};\r\n\r\n      &:hover {\r\n        color: ${t.sidePageCloseButtonHoverColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  panel(t: Theme) {\r\n    return css`\r\n      background: ${t.sidePageFooterPanelBg} !important;\r\n      border-top: 0 !important;\r\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\r\n        ${t.sidePagePaddingLeft};\r\n    `;\r\n  },\r\n\r\n  closeIcon(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      height: ${t.sidePageCloseIconSize};\r\n      width: ${t.sidePageCloseIconSize};\r\n      line-height: 0;\r\n    `;\r\n  },\r\n\r\n  fixed(t: Theme) {\r\n    return css`\r\n      line-height: ${t.sidePageHeaderFixedLineHeight};\r\n    `;\r\n  },\r\n\r\n  footer() {\r\n    return css`\r\n      bottom: 0;\r\n      position: fixed;\r\n      z-index: 10;\r\n    `;\r\n  },\r\n\r\n  footerContent(t: Theme) {\r\n    return css`\r\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\r\n        ${t.sidePagePaddingLeft};\r\n    `;\r\n  },\r\n\r\n  footerFixed(t: Theme) {\r\n    return css`\r\n      background: ${t.sidePageBgDefault};\r\n      border-top: 1px solid ${t.sidePageBorderColor};\r\n    `;\r\n  },\r\n\r\n  transitionLeft() {\r\n    return css`\r\n      transform: translateX(100px);\r\n    `;\r\n  },\r\n\r\n  transitionRight() {\r\n    return css`\r\n      transform: translateX(-100px);\r\n    `;\r\n  },\r\n\r\n  transitionActive() {\r\n    return css`\r\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n      opacity: 1;\r\n      transform: translate(0, 0) !important;\r\n    `;\r\n  },\r\n\r\n  transitionLeave() {\r\n    return css`\r\n      opacity: 1;\r\n    `;\r\n  },\r\n\r\n  transitionLeaveActive() {\r\n    return css`\r\n      opacity: 0.01;\r\n      transition: opacity 0.15s ease-out;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["SidePage.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\n    `;\n  },\n\n  mobileRoot() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody() {\n    return css`\n      font-size: 16px;\n      line-height: 22px;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  mobileContainer(t: Theme) {\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${t.mobileSidePagePaddingRight};\n      padding-bottom: ${t.mobileSidePagePaddingBottom};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.sidePagePaddingTop};\n    `;\n  },\n\n  mobileContainerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileSidePagePaddingTop};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  focusLock() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  wrapperMarginLeft() {\n    return css`\n      margin-left: 20px;\n    `;\n  },\n\n  wrapperMarginRight() {\n    return css`\n      margin-right: 20px;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileSidePageHeaderFontSize};\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      font-size: ${t.sidePageHeaderFixedFontSize};\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonPadding) +\n      parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n      parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  mobileTitle(t: Theme) {\n    const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleFixed() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding: ${t.sidePageCloseButtonClickArea};\n      margin: -${t.sidePageCloseButtonClickArea};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  mobileClose(t: Theme) {\n    return css`\n      padding: ${t.mobileSidePageCloseButtonClickArea};\n      margin: -${t.mobileSidePageCloseButtonClickArea};\n      font-size: 0;\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonPadding};\n      top: 0;\n    `;\n  },\n\n  mobileWrapperClose(t: Theme) {\n    return css`\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      right: ${t.mobileSidePageCloseButtonPadding};\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  wrapperCloseFixed(t: Theme) {\n    return css`\n      line-height: ${t.sidePageHeaderFixedLineHeight};\n      padding: ${t.sidePageHeaderFixedPaddingY} 0;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ${t.sidePageFooterTextColor};\n    `;\n  },\n\n  positionStatic() {\n    return css`\n      position: static;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  mobileFooterContent(t: Theme) {\n    return css`\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ${t.mobileSidePageFooterPadding};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}

package/components/SidePage/SidePage.styles.d.ts

@@ -1,28 +1,43 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
+    mobileRoot(): string;
     overlay(): string;
-    body(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
     container(t: Theme): string;
+    mobileContainer(t: Theme): string;
     containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
     containerWithoutFooter(t: Theme): string;
     containerWithPanel(t: Theme): string;
+    focusLock(): string;
     wrapper(t: Theme): string;
-    layout(): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
     header(t: Theme): string;
+    mobileHeader(t: Theme): string;
     headerFixed(t: Theme): string;
     title(t: Theme): string;
+    mobileTitle(t: Theme): string;
     titleFixed(): string;
     background(): string;
     backgroundGray(t: Theme): string;
     shadow(t: Theme): string;
-    leftSide(t: Theme): string;
     close(t: Theme): string;
+    mobileClose(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    mobileWrapperClose(t: Theme): string;
     panel(t: Theme): string;
-    closeIcon(t: Theme): string;
-    fixed(t: Theme): string;
-    footer(): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
     footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
     footerFixed(t: Theme): string;
     transitionLeft(): string;
     transitionRight(): string;