"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Page = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _Flex = require("../Flex/Flex.functions");

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const Page = props => {
  const theme = (0, _useTheme.default)();
  const {
    // Flex props
    display = "block",
    align = "start",
    direction = "column",
    justify = "start",
    wrap = "wrap",
    alignContent = "start",
    // Page Props
    m = 0,
    mt = null,
    mr = null,
    mb = null,
    ml = null,
    // -----
    p = 0,
    pt = null,
    pr = null,
    pb = null,
    pl = null,
    // -----
    width = null,
    height = null,
    minWidth = "100vw",
    maxWidth = null,
    minHeight = "100vh",
    maxHeight = null,
    fullWidth = false,
    fullHeight = false,
    // Default props
    children,
    backgroundColor = "background",
    className = null,
    ...otherProps
  } = props;

  function handleBackgroundColor() {
    switch (backgroundColor) {
      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return (0, _isThemePalette.default)(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor;
    }
  }

  function handleValue(value) {
    if (!value) return "";
    return value ? typeof value === "number" ? `${value * theme.layout.spacingUnit}px` : value : "";
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-Page",
    ...otherProps,
    className: _style.default.dynamic([["2327728036", [handleBackgroundColor()]], ["667378177", [(0, _Flex.getBreakpoints)(display, "xs", d => d), (0, _Flex.getBreakpoints)(direction, "xs", d => d), (0, _Flex.getBreakpoints)(wrap, "xs", w => w), (0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "xs", handleValue), (0, _Flex.getBreakpoints)(mt, "xs", handleValue), (0, _Flex.getBreakpoints)(mr, "xs", handleValue), (0, _Flex.getBreakpoints)(mb, "xs", handleValue), (0, _Flex.getBreakpoints)(ml, "xs", handleValue), (0, _Flex.getBreakpoints)(p, "xs", handleValue), (0, _Flex.getBreakpoints)(pt, "xs", handleValue), (0, _Flex.getBreakpoints)(pr, "xs", handleValue), (0, _Flex.getBreakpoints)(pb, "xs", handleValue), (0, _Flex.getBreakpoints)(pl, "xs", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xs", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xs", handleValue), (0, _Flex.getBreakpoints)(minWidth, "xs", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "xs", handleValue), (0, _Flex.getBreakpoints)(minHeight, "xs", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, (0, _Flex.getBreakpoints)(display, "sm", d => d), (0, _Flex.getBreakpoints)(direction, "sm", d => d), (0, _Flex.getBreakpoints)(wrap, "sm", w => w), (0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "sm", handleValue), (0, _Flex.getBreakpoints)(mt, "sm", handleValue), (0, _Flex.getBreakpoints)(mr, "sm", handleValue), (0, _Flex.getBreakpoints)(mb, "sm", handleValue), (0, _Flex.getBreakpoints)(ml, "sm", handleValue), (0, _Flex.getBreakpoints)(p, "sm", handleValue), (0, _Flex.getBreakpoints)(pt, "sm", handleValue), (0, _Flex.getBreakpoints)(pr, "sm", handleValue), (0, _Flex.getBreakpoints)(pb, "sm", handleValue), (0, _Flex.getBreakpoints)(pl, "sm", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "sm", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "sm", handleValue), (0, _Flex.getBreakpoints)(minWidth, "sm", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "sm", handleValue), (0, _Flex.getBreakpoints)(minHeight, "sm", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "sm", handleValue), theme.breakpoints.md.min, (0, _Flex.getBreakpoints)(display, "md", d => d), (0, _Flex.getBreakpoints)(direction, "md", d => d), (0, _Flex.getBreakpoints)(wrap, "md", w => w), (0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "md", handleValue), (0, _Flex.getBreakpoints)(mt, "md", handleValue), (0, _Flex.getBreakpoints)(mr, "md", handleValue), (0, _Flex.getBreakpoints)(mb, "md", handleValue), (0, _Flex.getBreakpoints)(ml, "md", handleValue), (0, _Flex.getBreakpoints)(p, "md", handleValue), (0, _Flex.getBreakpoints)(pt, "md", handleValue), (0, _Flex.getBreakpoints)(pr, "md", handleValue), (0, _Flex.getBreakpoints)(pb, "md", handleValue), (0, _Flex.getBreakpoints)(pl, "md", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "md", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "md", handleValue), (0, _Flex.getBreakpoints)(minWidth, "md", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "md", handleValue), (0, _Flex.getBreakpoints)(minHeight, "md", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "md", handleValue), theme.breakpoints.lg.min, (0, _Flex.getBreakpoints)(display, "lg", d => d), (0, _Flex.getBreakpoints)(direction, "lg", d => d), (0, _Flex.getBreakpoints)(wrap, "lg", w => w), (0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "lg", handleValue), (0, _Flex.getBreakpoints)(mt, "lg", handleValue), (0, _Flex.getBreakpoints)(mr, "lg", handleValue), (0, _Flex.getBreakpoints)(mb, "lg", handleValue), (0, _Flex.getBreakpoints)(ml, "lg", handleValue), (0, _Flex.getBreakpoints)(p, "lg", handleValue), (0, _Flex.getBreakpoints)(pt, "lg", handleValue), (0, _Flex.getBreakpoints)(pr, "lg", handleValue), (0, _Flex.getBreakpoints)(pb, "lg", handleValue), (0, _Flex.getBreakpoints)(pl, "lg", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "lg", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "lg", handleValue), (0, _Flex.getBreakpoints)(minWidth, "lg", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "lg", handleValue), (0, _Flex.getBreakpoints)(minHeight, "lg", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, (0, _Flex.getBreakpoints)(display, "xl", d => d), (0, _Flex.getBreakpoints)(direction, "xl", d => d), (0, _Flex.getBreakpoints)(wrap, "xl", w => w), (0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "xl", handleValue), (0, _Flex.getBreakpoints)(mt, "xl", handleValue), (0, _Flex.getBreakpoints)(mr, "xl", handleValue), (0, _Flex.getBreakpoints)(mb, "xl", handleValue), (0, _Flex.getBreakpoints)(ml, "xl", handleValue), (0, _Flex.getBreakpoints)(p, "xl", handleValue), (0, _Flex.getBreakpoints)(pt, "xl", handleValue), (0, _Flex.getBreakpoints)(pr, "xl", handleValue), (0, _Flex.getBreakpoints)(pb, "xl", handleValue), (0, _Flex.getBreakpoints)(pl, "xl", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xl", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xl", handleValue), (0, _Flex.getBreakpoints)(minWidth, "xl", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "xl", handleValue), (0, _Flex.getBreakpoints)(minHeight, "xl", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "xl", handleValue)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-Page", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "2327728036",
      dynamic: [handleBackgroundColor()],
      children: `.Wps-Page.__jsx-style-dynamic-selector{background:${handleBackgroundColor()};-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "667378177",
      dynamic: [(0, _Flex.getBreakpoints)(display, "xs", d => d), (0, _Flex.getBreakpoints)(direction, "xs", d => d), (0, _Flex.getBreakpoints)(wrap, "xs", w => w), (0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "xs", handleValue), (0, _Flex.getBreakpoints)(mt, "xs", handleValue), (0, _Flex.getBreakpoints)(mr, "xs", handleValue), (0, _Flex.getBreakpoints)(mb, "xs", handleValue), (0, _Flex.getBreakpoints)(ml, "xs", handleValue), (0, _Flex.getBreakpoints)(p, "xs", handleValue), (0, _Flex.getBreakpoints)(pt, "xs", handleValue), (0, _Flex.getBreakpoints)(pr, "xs", handleValue), (0, _Flex.getBreakpoints)(pb, "xs", handleValue), (0, _Flex.getBreakpoints)(pl, "xs", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xs", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xs", handleValue), (0, _Flex.getBreakpoints)(minWidth, "xs", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "xs", handleValue), (0, _Flex.getBreakpoints)(minHeight, "xs", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, (0, _Flex.getBreakpoints)(display, "sm", d => d), (0, _Flex.getBreakpoints)(direction, "sm", d => d), (0, _Flex.getBreakpoints)(wrap, "sm", w => w), (0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "sm", handleValue), (0, _Flex.getBreakpoints)(mt, "sm", handleValue), (0, _Flex.getBreakpoints)(mr, "sm", handleValue), (0, _Flex.getBreakpoints)(mb, "sm", handleValue), (0, _Flex.getBreakpoints)(ml, "sm", handleValue), (0, _Flex.getBreakpoints)(p, "sm", handleValue), (0, _Flex.getBreakpoints)(pt, "sm", handleValue), (0, _Flex.getBreakpoints)(pr, "sm", handleValue), (0, _Flex.getBreakpoints)(pb, "sm", handleValue), (0, _Flex.getBreakpoints)(pl, "sm", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "sm", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "sm", handleValue), (0, _Flex.getBreakpoints)(minWidth, "sm", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "sm", handleValue), (0, _Flex.getBreakpoints)(minHeight, "sm", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "sm", handleValue), theme.breakpoints.md.min, (0, _Flex.getBreakpoints)(display, "md", d => d), (0, _Flex.getBreakpoints)(direction, "md", d => d), (0, _Flex.getBreakpoints)(wrap, "md", w => w), (0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "md", handleValue), (0, _Flex.getBreakpoints)(mt, "md", handleValue), (0, _Flex.getBreakpoints)(mr, "md", handleValue), (0, _Flex.getBreakpoints)(mb, "md", handleValue), (0, _Flex.getBreakpoints)(ml, "md", handleValue), (0, _Flex.getBreakpoints)(p, "md", handleValue), (0, _Flex.getBreakpoints)(pt, "md", handleValue), (0, _Flex.getBreakpoints)(pr, "md", handleValue), (0, _Flex.getBreakpoints)(pb, "md", handleValue), (0, _Flex.getBreakpoints)(pl, "md", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "md", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "md", handleValue), (0, _Flex.getBreakpoints)(minWidth, "md", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "md", handleValue), (0, _Flex.getBreakpoints)(minHeight, "md", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "md", handleValue), theme.breakpoints.lg.min, (0, _Flex.getBreakpoints)(display, "lg", d => d), (0, _Flex.getBreakpoints)(direction, "lg", d => d), (0, _Flex.getBreakpoints)(wrap, "lg", w => w), (0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "lg", handleValue), (0, _Flex.getBreakpoints)(mt, "lg", handleValue), (0, _Flex.getBreakpoints)(mr, "lg", handleValue), (0, _Flex.getBreakpoints)(mb, "lg", handleValue), (0, _Flex.getBreakpoints)(ml, "lg", handleValue), (0, _Flex.getBreakpoints)(p, "lg", handleValue), (0, _Flex.getBreakpoints)(pt, "lg", handleValue), (0, _Flex.getBreakpoints)(pr, "lg", handleValue), (0, _Flex.getBreakpoints)(pb, "lg", handleValue), (0, _Flex.getBreakpoints)(pl, "lg", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "lg", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "lg", handleValue), (0, _Flex.getBreakpoints)(minWidth, "lg", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "lg", handleValue), (0, _Flex.getBreakpoints)(minHeight, "lg", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, (0, _Flex.getBreakpoints)(display, "xl", d => d), (0, _Flex.getBreakpoints)(direction, "xl", d => d), (0, _Flex.getBreakpoints)(wrap, "xl", w => w), (0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify), (0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign), (0, _Flex.getBreakpoints)(m, "xl", handleValue), (0, _Flex.getBreakpoints)(mt, "xl", handleValue), (0, _Flex.getBreakpoints)(mr, "xl", handleValue), (0, _Flex.getBreakpoints)(mb, "xl", handleValue), (0, _Flex.getBreakpoints)(ml, "xl", handleValue), (0, _Flex.getBreakpoints)(p, "xl", handleValue), (0, _Flex.getBreakpoints)(pt, "xl", handleValue), (0, _Flex.getBreakpoints)(pr, "xl", handleValue), (0, _Flex.getBreakpoints)(pb, "xl", handleValue), (0, _Flex.getBreakpoints)(pl, "xl", handleValue), fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xl", handleValue), fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xl", handleValue), (0, _Flex.getBreakpoints)(minWidth, "xl", handleValue), (0, _Flex.getBreakpoints)(maxWidth, "xl", handleValue), (0, _Flex.getBreakpoints)(minHeight, "xl", handleValue), (0, _Flex.getBreakpoints)(maxHeight, "xl", handleValue)],
      children: `.Wps-Page.__jsx-style-dynamic-selector{display:${(0, _Flex.getBreakpoints)(display, "xs", d => d)};-webkit-flex-direction:${(0, _Flex.getBreakpoints)(direction, "xs", d => d)};-ms-flex-direction:${(0, _Flex.getBreakpoints)(direction, "xs", d => d)};flex-direction:${(0, _Flex.getBreakpoints)(direction, "xs", d => d)};-webkit-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xs", w => w)};-ms-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xs", w => w)};flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xs", w => w)};-webkit-box-pack:${(0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify)};-webkit-justify-content:${(0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify)};-ms-flex-pack:${(0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify)};justify-content:${(0, _Flex.getBreakpoints)(justify, "xs", _Flex.getJustify)};-webkit-align-items:${(0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign)};-webkit-box-align:${(0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign)};-ms-flex-align:${(0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign)};align-items:${(0, _Flex.getBreakpoints)(align, "xs", _Flex.getAlign)};margin:${(0, _Flex.getBreakpoints)(m, "xs", handleValue)};margin-top:${(0, _Flex.getBreakpoints)(mt, "xs", handleValue)};margin-right:${(0, _Flex.getBreakpoints)(mr, "xs", handleValue)};margin-bottom:${(0, _Flex.getBreakpoints)(mb, "xs", handleValue)};margin-left:${(0, _Flex.getBreakpoints)(ml, "xs", handleValue)};padding:${(0, _Flex.getBreakpoints)(p, "xs", handleValue)};padding-top:${(0, _Flex.getBreakpoints)(pt, "xs", handleValue)};padding-right:${(0, _Flex.getBreakpoints)(pr, "xs", handleValue)};padding-bottom:${(0, _Flex.getBreakpoints)(pb, "xs", handleValue)};padding-left:${(0, _Flex.getBreakpoints)(pl, "xs", handleValue)};width:${fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xs", handleValue)};height:${fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xs", handleValue)};min-width:${(0, _Flex.getBreakpoints)(minWidth, "xs", handleValue)};max-width:${(0, _Flex.getBreakpoints)(maxWidth, "xs", handleValue)};min-height:${(0, _Flex.getBreakpoints)(minHeight, "xs", handleValue)};max-height:${(0, _Flex.getBreakpoints)(maxHeight, "xs", handleValue)};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Page.__jsx-style-dynamic-selector{display:${(0, _Flex.getBreakpoints)(display, "sm", d => d)};-webkit-flex-direction:${(0, _Flex.getBreakpoints)(direction, "sm", d => d)};-ms-flex-direction:${(0, _Flex.getBreakpoints)(direction, "sm", d => d)};flex-direction:${(0, _Flex.getBreakpoints)(direction, "sm", d => d)};-webkit-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "sm", w => w)};-ms-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "sm", w => w)};flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "sm", w => w)};-webkit-box-pack:${(0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify)};-webkit-justify-content:${(0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify)};-ms-flex-pack:${(0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify)};justify-content:${(0, _Flex.getBreakpoints)(justify, "sm", _Flex.getJustify)};-webkit-align-items:${(0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign)};-webkit-box-align:${(0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign)};-ms-flex-align:${(0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign)};align-items:${(0, _Flex.getBreakpoints)(align, "sm", _Flex.getAlign)};margin:${(0, _Flex.getBreakpoints)(m, "sm", handleValue)};margin-top:${(0, _Flex.getBreakpoints)(mt, "sm", handleValue)};margin-right:${(0, _Flex.getBreakpoints)(mr, "sm", handleValue)};margin-bottom:${(0, _Flex.getBreakpoints)(mb, "sm", handleValue)};margin-left:${(0, _Flex.getBreakpoints)(ml, "sm", handleValue)};padding:${(0, _Flex.getBreakpoints)(p, "sm", handleValue)};padding-top:${(0, _Flex.getBreakpoints)(pt, "sm", handleValue)};padding-right:${(0, _Flex.getBreakpoints)(pr, "sm", handleValue)};padding-bottom:${(0, _Flex.getBreakpoints)(pb, "sm", handleValue)};padding-left:${(0, _Flex.getBreakpoints)(pl, "sm", handleValue)};width:${fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "sm", handleValue)};height:${fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "sm", handleValue)};min-width:${(0, _Flex.getBreakpoints)(minWidth, "sm", handleValue)};max-width:${(0, _Flex.getBreakpoints)(maxWidth, "sm", handleValue)};min-height:${(0, _Flex.getBreakpoints)(minHeight, "sm", handleValue)};max-height:${(0, _Flex.getBreakpoints)(maxHeight, "sm", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Page.__jsx-style-dynamic-selector{display:${(0, _Flex.getBreakpoints)(display, "md", d => d)};-webkit-flex-direction:${(0, _Flex.getBreakpoints)(direction, "md", d => d)};-ms-flex-direction:${(0, _Flex.getBreakpoints)(direction, "md", d => d)};flex-direction:${(0, _Flex.getBreakpoints)(direction, "md", d => d)};-webkit-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "md", w => w)};-ms-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "md", w => w)};flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "md", w => w)};-webkit-box-pack:${(0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify)};-webkit-justify-content:${(0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify)};-ms-flex-pack:${(0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify)};justify-content:${(0, _Flex.getBreakpoints)(justify, "md", _Flex.getJustify)};-webkit-align-items:${(0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign)};-webkit-box-align:${(0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign)};-ms-flex-align:${(0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign)};align-items:${(0, _Flex.getBreakpoints)(align, "md", _Flex.getAlign)};margin:${(0, _Flex.getBreakpoints)(m, "md", handleValue)};margin-top:${(0, _Flex.getBreakpoints)(mt, "md", handleValue)};margin-right:${(0, _Flex.getBreakpoints)(mr, "md", handleValue)};margin-bottom:${(0, _Flex.getBreakpoints)(mb, "md", handleValue)};margin-left:${(0, _Flex.getBreakpoints)(ml, "md", handleValue)};padding:${(0, _Flex.getBreakpoints)(p, "md", handleValue)};padding-top:${(0, _Flex.getBreakpoints)(pt, "md", handleValue)};padding-right:${(0, _Flex.getBreakpoints)(pr, "md", handleValue)};padding-bottom:${(0, _Flex.getBreakpoints)(pb, "md", handleValue)};padding-left:${(0, _Flex.getBreakpoints)(pl, "md", handleValue)};width:${fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "md", handleValue)};height:${fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "md", handleValue)};min-width:${(0, _Flex.getBreakpoints)(minWidth, "md", handleValue)};max-width:${(0, _Flex.getBreakpoints)(maxWidth, "md", handleValue)};min-height:${(0, _Flex.getBreakpoints)(minHeight, "md", handleValue)};max-height:${(0, _Flex.getBreakpoints)(maxHeight, "md", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Page.__jsx-style-dynamic-selector{display:${(0, _Flex.getBreakpoints)(display, "lg", d => d)};-webkit-flex-direction:${(0, _Flex.getBreakpoints)(direction, "lg", d => d)};-ms-flex-direction:${(0, _Flex.getBreakpoints)(direction, "lg", d => d)};flex-direction:${(0, _Flex.getBreakpoints)(direction, "lg", d => d)};-webkit-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "lg", w => w)};-ms-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "lg", w => w)};flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "lg", w => w)};-webkit-box-pack:${(0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify)};-webkit-justify-content:${(0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify)};-ms-flex-pack:${(0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify)};justify-content:${(0, _Flex.getBreakpoints)(justify, "lg", _Flex.getJustify)};-webkit-align-items:${(0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign)};-webkit-box-align:${(0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign)};-ms-flex-align:${(0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign)};align-items:${(0, _Flex.getBreakpoints)(align, "lg", _Flex.getAlign)};margin:${(0, _Flex.getBreakpoints)(m, "lg", handleValue)};margin-top:${(0, _Flex.getBreakpoints)(mt, "lg", handleValue)};margin-right:${(0, _Flex.getBreakpoints)(mr, "lg", handleValue)};margin-bottom:${(0, _Flex.getBreakpoints)(mb, "lg", handleValue)};margin-left:${(0, _Flex.getBreakpoints)(ml, "lg", handleValue)};padding:${(0, _Flex.getBreakpoints)(p, "lg", handleValue)};padding-top:${(0, _Flex.getBreakpoints)(pt, "lg", handleValue)};padding-right:${(0, _Flex.getBreakpoints)(pr, "lg", handleValue)};padding-bottom:${(0, _Flex.getBreakpoints)(pb, "lg", handleValue)};padding-left:${(0, _Flex.getBreakpoints)(pl, "lg", handleValue)};width:${fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "lg", handleValue)};height:${fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "lg", handleValue)};min-width:${(0, _Flex.getBreakpoints)(minWidth, "lg", handleValue)};max-width:${(0, _Flex.getBreakpoints)(maxWidth, "lg", handleValue)};min-height:${(0, _Flex.getBreakpoints)(minHeight, "lg", handleValue)};max-height:${(0, _Flex.getBreakpoints)(maxHeight, "lg", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Page.__jsx-style-dynamic-selector{display:${(0, _Flex.getBreakpoints)(display, "xl", d => d)};-webkit-flex-direction:${(0, _Flex.getBreakpoints)(direction, "xl", d => d)};-ms-flex-direction:${(0, _Flex.getBreakpoints)(direction, "xl", d => d)};flex-direction:${(0, _Flex.getBreakpoints)(direction, "xl", d => d)};-webkit-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xl", w => w)};-ms-flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xl", w => w)};flex-wrap:${(0, _Flex.getBreakpoints)(wrap, "xl", w => w)};-webkit-box-pack:${(0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify)};-webkit-justify-content:${(0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify)};-ms-flex-pack:${(0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify)};justify-content:${(0, _Flex.getBreakpoints)(justify, "xl", _Flex.getJustify)};-webkit-align-items:${(0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign)};-webkit-box-align:${(0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign)};-ms-flex-align:${(0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign)};align-items:${(0, _Flex.getBreakpoints)(align, "xl", _Flex.getAlign)};margin:${(0, _Flex.getBreakpoints)(m, "xl", handleValue)};margin-top:${(0, _Flex.getBreakpoints)(mt, "xl", handleValue)};margin-right:${(0, _Flex.getBreakpoints)(mr, "xl", handleValue)};margin-bottom:${(0, _Flex.getBreakpoints)(mb, "xl", handleValue)};margin-left:${(0, _Flex.getBreakpoints)(ml, "xl", handleValue)};padding:${(0, _Flex.getBreakpoints)(p, "xl", handleValue)};padding-top:${(0, _Flex.getBreakpoints)(pt, "xl", handleValue)};padding-right:${(0, _Flex.getBreakpoints)(pr, "xl", handleValue)};padding-bottom:${(0, _Flex.getBreakpoints)(pb, "xl", handleValue)};padding-left:${(0, _Flex.getBreakpoints)(pl, "xl", handleValue)};width:${fullWidth ? "100%" : (0, _Flex.getBreakpoints)(width, "xl", handleValue)};height:${fullHeight ? "100%" : (0, _Flex.getBreakpoints)(height, "xl", handleValue)};min-width:${(0, _Flex.getBreakpoints)(minWidth, "xl", handleValue)};max-width:${(0, _Flex.getBreakpoints)(maxWidth, "xl", handleValue)};min-height:${(0, _Flex.getBreakpoints)(minHeight, "xl", handleValue)};max-height:${(0, _Flex.getBreakpoints)(maxHeight, "xl", handleValue)};}}`
    }), children]
  });
};

exports.Page = Page;