@smart-react-components/ui/components/Overlay/OverlayElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
const overlayCSS = ({ theme, hasBackground }) => `
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  height: 100%;
  left: 0;
  padding: ${theme.$.length.overlay.space.y} ${theme.$.length.overlay.space.x};
  top: 0;
  touch-action: none;
  width: 100%;

  ${hasBackground
    ? `
      background: ${theme.$.color.overlay.background};
    `
    : ''}
`;
exports.default = (0, styled_components_1.default)(Div_1.default)(({ theme, breakpoint, hasBackground, isDisplayedWhenBreakpointNull }) => `
  position: fixed;
  z-index: ${theme.$.zIndex.overlay};

  ${breakpoint
    ? `
      @media(max-width: ${theme.$.length.breakpoint[breakpoint] - 1}px) {
        ${overlayCSS({ theme, hasBackground })};
      }
    `
    : isDisplayedWhenBreakpointNull ? overlayCSS({ theme, hasBackground }) : ''}
`);