npm - @semcore/fullscreen-modal - Versions diffs - 2.0.7 → 2.0.10 - Mend

@semcore/fullscreen-modal 2.0.7 → 2.0.10

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

Files changed (11) hide show

package/CHANGELOG.md +18 -0
package/README.md +67 -0
package/lib/cjs/FullscreenModal.js +13 -13
package/lib/cjs/style/fullscreen-modal.shadow.css +1 -0
package/lib/es6/FullscreenModal.js +13 -13
package/lib/es6/style/fullscreen-modal.shadow.css +1 -0
package/package.json +2 -2
package/src/FullscreenModal.jsx +0 -128
package/src/index.d.ts +0 -41
package/src/index.js +0 -1
package/src/style/fullscreen-modal.shadow.css +0 -128

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,24 @@
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+## [2.0.10] - 2022-07-21
+### Changed
+- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
+## [2.0.9] - 2022-07-13
+### Fixed
+- Fixed the font in Title
+## [2.0.8] - 2022-07-07
+### Changed
+- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/icon` [2.27.0 ~> 2.28.0], `@semcore/flex-box` [4.5.5 ~> 4.5.6]).
 ## [2.0.7] - 2022-06-02
 ### Changed

package/README.md CHANGED Viewed

@@ -0,0 +1,67 @@
+# @semcore/fullscreen-modal
+[![version](https://img.shields.io/npm/v/@semcore/fullscreen-modal.svg)](https://www.npmjs.com/@semcore/fullscreen-modal)
+[![downloads](https://img.shields.io/npm/dt/@semcore/fullscreen-modal.svg)](https://www.npmjs.com/package/@semcore/fullscreen-modal)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+> This component is part of the Intergalactic design system
+### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/fullscreen-modal/)
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+## Install
+```sh
+npm install @semcore/ui
+```
+## Usage
+```jsx
+import FullscreenModal from '@semcore/ui/fullscreen-modal';
+```
+<details>
+  <summary>Alternative installation and use</summary>
+**We do not recommend this usage path due to possible dependency and update issues.**
+### Install
+You can only install one package from the design system
+```sh
+npm install @semcore/fullscreen-modal @semcore/core
+```
+`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
+of the components that is discussed below. There should only be one version of the package in the project._
+### Usage
+You can use the package the same way but without `/ui/` in the import path.
+```jsx
+import FullscreenModal from '@semcore/fullscreen-modal';
+```
+</details>
+## 👤 Author
+[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+## 🤝 Contributing
+Contributions, issues and feature requests are welcome!
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+## Show your support
+Give a ⭐️ if this project helped you!
+## 📝 License
+This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.

package/lib/cjs/FullscreenModal.js CHANGED Viewed

@@ -56,22 +56,22 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SFullscreenOverlay_tysu9_gg_{padding:0}.___SFullscreenModal_tysu9_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_tysu9_gg_,.___SClose_tysu9_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_tysu9_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_tysu9_gg_:hover{color:#8a8e9b}.___SBack_tysu9_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_tysu9_gg_:hover{color:#484a54}.___SBackText_tysu9_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_tysu9_gg_,.___STitle_tysu9_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_tysu9_gg_{font-size:24px;line-height:1.17;font-weight:700;color:#191b23}.___SDescription_tysu9_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_tysu9_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_tysu9_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_tysu9_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_tysu9_gg_{display:flex;height:100%;overflow:auto}.___SSection_tysu9_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_tysu9_gg_{transition:none}}"
+".___SFullscreenOverlay_pndqi_gg_{padding:0}.___SFullscreenModal_pndqi_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_pndqi_gg_,.___SClose_pndqi_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_pndqi_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_pndqi_gg_:hover{color:#8a8e9b}.___SBack_pndqi_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_pndqi_gg_:hover{color:#484a54}.___SBackText_pndqi_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_pndqi_gg_,.___STitle_pndqi_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_pndqi_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_pndqi_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_pndqi_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_pndqi_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_pndqi_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_pndqi_gg_{display:flex;height:100%;overflow:auto}.___SSection_pndqi_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_pndqi_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "cdmogf_gg_")
+, "pndqi_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SFullscreenOverlay": "___SFullscreenOverlay_tysu9_gg_",
-  "__SFullscreenModal": "___SFullscreenModal_tysu9_gg_",
-  "__SBack": "___SBack_tysu9_gg_",
-  "__SClose": "___SClose_tysu9_gg_",
-  "__SBackText": "___SBackText_tysu9_gg_",
-  "__SDescription": "___SDescription_tysu9_gg_",
-  "__STitle": "___STitle_tysu9_gg_",
-  "__SHeader": "___SHeader_tysu9_gg_",
-  "__SFooter": "___SFooter_tysu9_gg_",
-  "__SBody": "___SBody_tysu9_gg_",
-  "__SSection": "___SSection_tysu9_gg_"
+  "__SFullscreenOverlay": "___SFullscreenOverlay_pndqi_gg_",
+  "__SFullscreenModal": "___SFullscreenModal_pndqi_gg_",
+  "__SBack": "___SBack_pndqi_gg_",
+  "__SClose": "___SClose_pndqi_gg_",
+  "__SBackText": "___SBackText_pndqi_gg_",
+  "__SDescription": "___SDescription_pndqi_gg_",
+  "__STitle": "___STitle_pndqi_gg_",
+  "__SHeader": "___SHeader_pndqi_gg_",
+  "__SFooter": "___SFooter_pndqi_gg_",
+  "__SBody": "___SBody_pndqi_gg_",
+  "__SSection": "___SSection_pndqi_gg_"
 });
 var FullscreenModalRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/style/fullscreen-modal.shadow.css CHANGED Viewed

@@ -66,6 +66,7 @@ STitle {
   font-size: var(--fs-500);
   line-height: var(--lh-500);
   font-weight: 700;
+  font-family: FactorA-Bold, sans-serif;
   color: var(--gray-800);
 }

package/lib/es6/FullscreenModal.js CHANGED Viewed

@@ -38,22 +38,22 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SFullscreenOverlay_tysu9_gg_{padding:0}.___SFullscreenModal_tysu9_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_tysu9_gg_,.___SClose_tysu9_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_tysu9_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_tysu9_gg_:hover{color:#8a8e9b}.___SBack_tysu9_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_tysu9_gg_:hover{color:#484a54}.___SBackText_tysu9_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_tysu9_gg_,.___STitle_tysu9_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_tysu9_gg_{font-size:24px;line-height:1.17;font-weight:700;color:#191b23}.___SDescription_tysu9_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_tysu9_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_tysu9_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_tysu9_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_tysu9_gg_{display:flex;height:100%;overflow:auto}.___SSection_tysu9_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_tysu9_gg_{transition:none}}"
+".___SFullscreenOverlay_pndqi_gg_{padding:0}.___SFullscreenModal_pndqi_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_pndqi_gg_,.___SClose_pndqi_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_pndqi_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_pndqi_gg_:hover{color:#8a8e9b}.___SBack_pndqi_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_pndqi_gg_:hover{color:#484a54}.___SBackText_pndqi_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_pndqi_gg_,.___STitle_pndqi_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_pndqi_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_pndqi_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_pndqi_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_pndqi_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_pndqi_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_pndqi_gg_{display:flex;height:100%;overflow:auto}.___SSection_pndqi_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_pndqi_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "cdmogf_gg_")
+, "pndqi_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SFullscreenOverlay": "___SFullscreenOverlay_tysu9_gg_",
-  "__SFullscreenModal": "___SFullscreenModal_tysu9_gg_",
-  "__SBack": "___SBack_tysu9_gg_",
-  "__SClose": "___SClose_tysu9_gg_",
-  "__SBackText": "___SBackText_tysu9_gg_",
-  "__SDescription": "___SDescription_tysu9_gg_",
-  "__STitle": "___STitle_tysu9_gg_",
-  "__SHeader": "___SHeader_tysu9_gg_",
-  "__SFooter": "___SFooter_tysu9_gg_",
-  "__SBody": "___SBody_tysu9_gg_",
-  "__SSection": "___SSection_tysu9_gg_"
+  "__SFullscreenOverlay": "___SFullscreenOverlay_pndqi_gg_",
+  "__SFullscreenModal": "___SFullscreenModal_pndqi_gg_",
+  "__SBack": "___SBack_pndqi_gg_",
+  "__SClose": "___SClose_pndqi_gg_",
+  "__SBackText": "___SBackText_pndqi_gg_",
+  "__SDescription": "___SDescription_pndqi_gg_",
+  "__STitle": "___STitle_pndqi_gg_",
+  "__SHeader": "___SHeader_pndqi_gg_",
+  "__SFooter": "___SFooter_pndqi_gg_",
+  "__SBody": "___SBody_pndqi_gg_",
+  "__SSection": "___SSection_pndqi_gg_"
 });
 var FullscreenModalRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/style/fullscreen-modal.shadow.css CHANGED Viewed

@@ -66,6 +66,7 @@ STitle {
   font-size: var(--fs-500);
   line-height: var(--lh-500);
   font-weight: 700;
+  font-family: FactorA-Bold, sans-serif;
   color: var(--gray-800);
 }

package/package.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@semcore/fullscreen-modal",
   "description": "SEMRush FullscreenModal Component",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
-  "author": "Roman Lysov <r.lysov@semrush.com>",
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
     "build": "build --source=js",

package/src/FullscreenModal.jsx DELETED Viewed

@@ -1,128 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import Modal from '@semcore/modal';
-import { Flex, Box } from '@semcore/flex-box';
-import CloseIcon from '@semcore/icon/Close/l';
-import ArrowLeft from '@semcore/icon/ArrowLeft/m';
-import { Text } from '@semcore/typography';
-import fire from '@semcore/utils/lib/fire';
-import style from './style/fullscreen-modal.shadow.css';
-class FullscreenModalRoot extends Component {
-  static displayName = 'FullscreenModal';
-  static style = style;
-  bindHandlerClose = (trigger) => (e) => {
-    fire(this, 'onClose', trigger, e);
-  };
-  getCloseProps() {
-    return {
-      onClick: this.bindHandlerClose('onCloseClick'),
-    };
-  }
-  getBackProps() {
-    return {
-      onClick: this.bindHandlerClose('onBackClick'),
-    };
-  }
-  render() {
-    const SFullscreenModal = Root;
-    const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;
-    const SFullscreenOverlay = Modal.Overlay;
-    return sstyled(styles)(
-      <Modal
-        closable={false}
-        visible={visible}
-        onClose={onClose}
-        duration={duration}
-        disablePortal={disablePortal}
-      >
-        <SFullscreenOverlay>
-          <SFullscreenModal render={Modal.Window}>
-            {closable && <FullscreenModal.Close />}
-            <Children />
-          </SFullscreenModal>
-        </SFullscreenOverlay>
-      </Modal>,
-    );
-  }
-}
-function Header(props) {
-  const SHeader = Root;
-  const { Children, styles, title, description } = props;
-  return sstyled(styles)(
-    <SHeader render={Box}>
-      {title && <FullscreenModal.Title children={title} />}
-      {description && <FullscreenModal.Description children={description} />}
-      <Children />
-    </SHeader>,
-  );
-}
-function Body(props) {
-  const SBody = Root;
-  return sstyled(props.styles)(<SBody render={Box} />);
-}
-function Section(props) {
-  const SSection = Root;
-  return sstyled(props.styles)(<SSection render={Box} />);
-}
-function Footer(props) {
-  const SFooter = Root;
-  return sstyled(props.styles)(<SFooter render={Flex} />);
-}
-function Close(props) {
-  const SClose = Root;
-  return sstyled(props.styles)(<SClose render={CloseIcon} />);
-}
-function Title(props) {
-  const STitle = Root;
-  return sstyled(props.styles)(<STitle render={Text} tag="h4" />);
-}
-function Description(props) {
-  const SDescription = Root;
-  return sstyled(props.styles)(<SDescription render={Text} />);
-}
-function Back(props) {
-  const SBack = Root;
-  const SBackText = Text;
-  const { Children, styles } = props;
-  return sstyled(styles)(
-    <SBack render={Box}>
-      <ArrowLeft />
-      <SBackText>
-        <Children />
-      </SBackText>
-    </SBack>,
-  );
-}
-const FullscreenModal = createComponent(
-  FullscreenModalRoot,
-  {
-    Header,
-    Footer,
-    Close,
-    Back,
-    Body,
-    Section,
-    Title,
-    Description,
-  },
-  { parent: Modal },
-);
-export default FullscreenModal;

package/src/index.d.ts DELETED Viewed

@@ -1,41 +0,0 @@
-import { ComponentProps } from 'react';
-import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
-import { IModalProps } from '@semcore/modal';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IIconProps } from '@semcore/icon';
-import { Text } from '@semcore/typography';
-export interface IFullscreenModalProps extends IModalProps {
-  /** This property is responsible for the visibility of the modal window */
-  hidden?: boolean;
-  /** Function that is invoked when hiding a component */
-  onClose?: (
-    trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
-    e?: React.MouseEvent | React.KeyboardEvent,
-  ) => void;
-}
-export interface IFullscreenModalHeaderProps extends IBoxProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-}
-export interface IFullscreenModalContext {
-  getBackProps: PropGetterFn;
-  getCloseProps: PropGetterFn;
-}
-declare const FullscreenModal: (<T>(
-  props: CProps<IFullscreenModalProps & T, IFullscreenModalContext>,
-) => ReturnEl) & {
-  Header: <T>(props: IFullscreenModalHeaderProps & T) => ReturnEl;
-  Footer: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Close: <T>(props: IIconProps & T) => ReturnEl;
-  Back: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Body: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Section: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Title: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
-  Description: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
-};
-export default FullscreenModal;

package/src/index.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export { default } from './FullscreenModal';

package/src/style/fullscreen-modal.shadow.css DELETED Viewed

@@ -1,128 +0,0 @@
-@import '@semcore/utils/style/var.css';
-SFullscreenOverlay {
-  padding: 0;
-}
-SFullscreenModal {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: var(--white);
-  border-radius: 0;
-  padding: 0;
-}
-SClose,
-SBack {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-}
-SClose {
-  top: 17px;
-  right: 23px;
-  padding: 12px;
-  color: var(--gray-300);
-  &:hover {
-    color: var(--gray-400);
-  }
-}
-SBack {
-  top: 8px;
-  left: 32px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-  color: var(--gray-500);
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  &:hover {
-    color: var(--gray-600);
-  }
-}
-SBackText {
-  margin-left: 4px;
-  font-size: var(--fs-200);
-  line-height: var(--lh-200);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-STitle,
-SDescription {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-STitle {
-  font-size: var(--fs-500);
-  line-height: var(--lh-500);
-  font-weight: 700;
-  color: var(--gray-800);
-}
-SDescription {
-  display: flex;
-  align-items: baseline;
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  color: var(--gray-500);
-  &::before {
-    content: '';
-    position: relative;
-    top: 4px;
-    display: block;
-    margin-left: 12px;
-    margin-right: 12px;
-    height: 24px;
-    width: 1px;
-    background-color: var(--gray-200);
-  }
-}
-SHeader {
-  display: flex;
-  align-items: baseline;
-  padding-left: 32px;
-  padding-bottom: 8px;
-  padding-right: 72px;
-  padding-top: 40px;
-  min-height: 76px;
-  box-shadow: inset 0 -1px 0 var(--gray-200);
-  box-sizing: border-box;
-}
-SFooter {
-  min-height: 52px;
-  box-shadow: inset 0 1px 1px 0 var(--gray-200);
-  box-sizing: border-box;
-}
-SBody {
-  display: flex;
-  height: 100%;
-  overflow: auto;
-}
-SSection {
-  padding-top: 24px;
-  padding-bottom: 24px;
-  padding-left: 32px;
-  padding-right: 32px;
-  flex: 1 1 auto;
-}
-@media (prefers-reduced-motion) {
-  SBackText {
-    transition: none;
-  }
-}