import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import { getBreakpoints, getAlign, getJustify } from "../Flex/Flex.functions";
import isThemePalette from "../../utils/isThemePalette";
import contrast from "../../utils/contrast";
import brightness from "../../utils/brightness";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Blueprint = props => {
  const theme = useTheme();
  const {
    // Flex props
    display = "flex",
    align = "center",
    direction = "column",
    justify = "center",
    wrap = "wrap",
    alignContent = "start",
    as = null,
    // Box Props
    m = 0,
    mt = null,
    mr = null,
    mb = null,
    ml = null,
    // -----
    p = theme.layout.padding,
    pt = null,
    pr = null,
    pb = null,
    pl = null,
    // -----
    width = null,
    height = null,
    minWidth = null,
    maxWidth = null,
    minHeight = null,
    maxHeight = null,
    fullWidth = false,
    fullHeight = false,
    // Default props
    children,
    backgroundColor = "basic",
    hoverBackgroundColor = null,
    className = null,
    blur = 5,
    elevation = 10,
    elevationHover = 20,
    shape = "round",
    ...otherProps
  } = props; // as Component render

  const Component = as || "div";

  function handleBackgroundColor300() {
    return isThemePalette(backgroundColor) ? theme.palette[backgroundColor][300] : brightness(backgroundColor, 40);
  }

  function handleBackgroundColor500() {
    return isThemePalette(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor;
  }

  function handleBackgroundColor700() {
    return isThemePalette(backgroundColor) ? theme.palette[backgroundColor][700] : brightness(backgroundColor, -30);
  }

  function handleBackgroundColor900() {
    return isThemePalette(backgroundColor) ? theme.palette[backgroundColor][900] : brightness(backgroundColor, -50);
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 1.5em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleVariantsStyle() {
    return `
    color: ${contrast(handleBackgroundColor500())};
    background-size: .9rem .9rem;
    background-position: 50%;
    background-color: ${handleBackgroundColor500()};
    background-image: linear-gradient(${handleBackgroundColor300()} 1px,transparent 0),linear-gradient(90deg,${handleBackgroundColor300()} 1px,transparent 0);
    border: 1px solid ${handleBackgroundColor900()};
    box-shadow: inset 0 0 15px 2px ${handleBackgroundColor700()};
  `;
  }

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

  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Component, {
      "data-testid": "Wps-Container",
      ...otherProps,
      className: _JSXStyle.dynamic([["461581189", [handleShape(), handleVariantsStyle()]], ["1333584325", [getBreakpoints(display, "xs", d => d), getBreakpoints(direction, "xs", d => d), getBreakpoints(wrap, "xs", w => w), getBreakpoints(justify, "xs", getJustify), getBreakpoints(align, "xs", getAlign), getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(display, "sm", d => d), getBreakpoints(direction, "sm", d => d), getBreakpoints(wrap, "sm", w => w), getBreakpoints(justify, "sm", getJustify), getBreakpoints(align, "sm", getAlign), getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue), fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(display, "md", d => d), getBreakpoints(direction, "md", d => d), getBreakpoints(wrap, "md", w => w), getBreakpoints(justify, "md", getJustify), getBreakpoints(align, "md", getAlign), getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), fullWidth ? "100%" : getBreakpoints(width, "md", handleValue), fullHeight ? "100%" : getBreakpoints(height, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(display, "lg", d => d), getBreakpoints(direction, "lg", d => d), getBreakpoints(wrap, "lg", w => w), getBreakpoints(justify, "lg", getJustify), getBreakpoints(align, "lg", getAlign), getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue), fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(display, "xl", d => d), getBreakpoints(direction, "xl", d => d), getBreakpoints(wrap, "xl", w => w), getBreakpoints(justify, "xl", getJustify), getBreakpoints(align, "xl", getAlign), getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Container", className) || ""),
      children: children
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "461581189",
      dynamic: [handleShape(), handleVariantsStyle()],
      children: `.Wps-Container.__jsx-style-dynamic-selector{${handleShape()} ${handleVariantsStyle()} position:relative;-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;}`
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1333584325",
      dynamic: [getBreakpoints(display, "xs", d => d), getBreakpoints(direction, "xs", d => d), getBreakpoints(wrap, "xs", w => w), getBreakpoints(justify, "xs", getJustify), getBreakpoints(align, "xs", getAlign), getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(display, "sm", d => d), getBreakpoints(direction, "sm", d => d), getBreakpoints(wrap, "sm", w => w), getBreakpoints(justify, "sm", getJustify), getBreakpoints(align, "sm", getAlign), getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue), fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(display, "md", d => d), getBreakpoints(direction, "md", d => d), getBreakpoints(wrap, "md", w => w), getBreakpoints(justify, "md", getJustify), getBreakpoints(align, "md", getAlign), getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), fullWidth ? "100%" : getBreakpoints(width, "md", handleValue), fullHeight ? "100%" : getBreakpoints(height, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(display, "lg", d => d), getBreakpoints(direction, "lg", d => d), getBreakpoints(wrap, "lg", w => w), getBreakpoints(justify, "lg", getJustify), getBreakpoints(align, "lg", getAlign), getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue), fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(display, "xl", d => d), getBreakpoints(direction, "xl", d => d), getBreakpoints(wrap, "xl", w => w), getBreakpoints(justify, "xl", getJustify), getBreakpoints(align, "xl", getAlign), getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)],
      children: `.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "xs", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "xs", d => d)};-ms-flex-direction:${getBreakpoints(direction, "xs", d => d)};flex-direction:${getBreakpoints(direction, "xs", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "xs", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "xs", w => w)};flex-wrap:${getBreakpoints(wrap, "xs", w => w)};-webkit-box-pack:${getBreakpoints(justify, "xs", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "xs", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "xs", getJustify)};justify-content:${getBreakpoints(justify, "xs", getJustify)};-webkit-align-items:${getBreakpoints(align, "xs", getAlign)};-webkit-box-align:${getBreakpoints(align, "xs", getAlign)};-ms-flex-align:${getBreakpoints(align, "xs", getAlign)};align-items:${getBreakpoints(align, "xs", getAlign)};margin:${getBreakpoints(m, "xs", handleValue)};margin-top:${getBreakpoints(mt, "xs", handleValue)};margin-right:${getBreakpoints(mr, "xs", handleValue)};margin-bottom:${getBreakpoints(mb, "xs", handleValue)};margin-left:${getBreakpoints(ml, "xs", handleValue)};padding:${getBreakpoints(p, "xs", handleValue)};padding-top:${getBreakpoints(pt, "xs", handleValue)};padding-right:${getBreakpoints(pr, "xs", handleValue)};padding-bottom:${getBreakpoints(pb, "xs", handleValue)};padding-left:${getBreakpoints(pl, "xs", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue)};min-width:${getBreakpoints(minWidth, "xs", handleValue)};max-width:${getBreakpoints(maxWidth, "xs", handleValue)};min-height:${getBreakpoints(minHeight, "xs", handleValue)};max-height:${getBreakpoints(maxHeight, "xs", handleValue)};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "sm", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "sm", d => d)};-ms-flex-direction:${getBreakpoints(direction, "sm", d => d)};flex-direction:${getBreakpoints(direction, "sm", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "sm", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "sm", w => w)};flex-wrap:${getBreakpoints(wrap, "sm", w => w)};-webkit-box-pack:${getBreakpoints(justify, "sm", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "sm", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "sm", getJustify)};justify-content:${getBreakpoints(justify, "sm", getJustify)};-webkit-align-items:${getBreakpoints(align, "sm", getAlign)};-webkit-box-align:${getBreakpoints(align, "sm", getAlign)};-ms-flex-align:${getBreakpoints(align, "sm", getAlign)};align-items:${getBreakpoints(align, "sm", getAlign)};margin:${getBreakpoints(m, "sm", handleValue)};margin-top:${getBreakpoints(mt, "sm", handleValue)};margin-right:${getBreakpoints(mr, "sm", handleValue)};margin-bottom:${getBreakpoints(mb, "sm", handleValue)};margin-left:${getBreakpoints(ml, "sm", handleValue)};padding:${getBreakpoints(p, "sm", handleValue)};padding-top:${getBreakpoints(pt, "sm", handleValue)};padding-right:${getBreakpoints(pr, "sm", handleValue)};padding-bottom:${getBreakpoints(pb, "sm", handleValue)};padding-left:${getBreakpoints(pl, "sm", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue)};min-width:${getBreakpoints(minWidth, "sm", handleValue)};max-width:${getBreakpoints(maxWidth, "sm", handleValue)};min-height:${getBreakpoints(minHeight, "sm", handleValue)};max-height:${getBreakpoints(maxHeight, "sm", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "md", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "md", d => d)};-ms-flex-direction:${getBreakpoints(direction, "md", d => d)};flex-direction:${getBreakpoints(direction, "md", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "md", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "md", w => w)};flex-wrap:${getBreakpoints(wrap, "md", w => w)};-webkit-box-pack:${getBreakpoints(justify, "md", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "md", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "md", getJustify)};justify-content:${getBreakpoints(justify, "md", getJustify)};-webkit-align-items:${getBreakpoints(align, "md", getAlign)};-webkit-box-align:${getBreakpoints(align, "md", getAlign)};-ms-flex-align:${getBreakpoints(align, "md", getAlign)};align-items:${getBreakpoints(align, "md", getAlign)};margin:${getBreakpoints(m, "md", handleValue)};margin-top:${getBreakpoints(mt, "md", handleValue)};margin-right:${getBreakpoints(mr, "md", handleValue)};margin-bottom:${getBreakpoints(mb, "md", handleValue)};margin-left:${getBreakpoints(ml, "md", handleValue)};padding:${getBreakpoints(p, "md", handleValue)};padding-top:${getBreakpoints(pt, "md", handleValue)};padding-right:${getBreakpoints(pr, "md", handleValue)};padding-bottom:${getBreakpoints(pb, "md", handleValue)};padding-left:${getBreakpoints(pl, "md", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "md", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "md", handleValue)};min-width:${getBreakpoints(minWidth, "md", handleValue)};max-width:${getBreakpoints(maxWidth, "md", handleValue)};min-height:${getBreakpoints(minHeight, "md", handleValue)};max-height:${getBreakpoints(maxHeight, "md", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "lg", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "lg", d => d)};-ms-flex-direction:${getBreakpoints(direction, "lg", d => d)};flex-direction:${getBreakpoints(direction, "lg", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "lg", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "lg", w => w)};flex-wrap:${getBreakpoints(wrap, "lg", w => w)};-webkit-box-pack:${getBreakpoints(justify, "lg", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "lg", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "lg", getJustify)};justify-content:${getBreakpoints(justify, "lg", getJustify)};-webkit-align-items:${getBreakpoints(align, "lg", getAlign)};-webkit-box-align:${getBreakpoints(align, "lg", getAlign)};-ms-flex-align:${getBreakpoints(align, "lg", getAlign)};align-items:${getBreakpoints(align, "lg", getAlign)};margin:${getBreakpoints(m, "lg", handleValue)};margin-top:${getBreakpoints(mt, "lg", handleValue)};margin-right:${getBreakpoints(mr, "lg", handleValue)};margin-bottom:${getBreakpoints(mb, "lg", handleValue)};margin-left:${getBreakpoints(ml, "lg", handleValue)};padding:${getBreakpoints(p, "lg", handleValue)};padding-top:${getBreakpoints(pt, "lg", handleValue)};padding-right:${getBreakpoints(pr, "lg", handleValue)};padding-bottom:${getBreakpoints(pb, "lg", handleValue)};padding-left:${getBreakpoints(pl, "lg", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue)};min-width:${getBreakpoints(minWidth, "lg", handleValue)};max-width:${getBreakpoints(maxWidth, "lg", handleValue)};min-height:${getBreakpoints(minHeight, "lg", handleValue)};max-height:${getBreakpoints(maxHeight, "lg", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "xl", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "xl", d => d)};-ms-flex-direction:${getBreakpoints(direction, "xl", d => d)};flex-direction:${getBreakpoints(direction, "xl", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "xl", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "xl", w => w)};flex-wrap:${getBreakpoints(wrap, "xl", w => w)};-webkit-box-pack:${getBreakpoints(justify, "xl", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "xl", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "xl", getJustify)};justify-content:${getBreakpoints(justify, "xl", getJustify)};-webkit-align-items:${getBreakpoints(align, "xl", getAlign)};-webkit-box-align:${getBreakpoints(align, "xl", getAlign)};-ms-flex-align:${getBreakpoints(align, "xl", getAlign)};align-items:${getBreakpoints(align, "xl", getAlign)};margin:${getBreakpoints(m, "xl", handleValue)};margin-top:${getBreakpoints(mt, "xl", handleValue)};margin-right:${getBreakpoints(mr, "xl", handleValue)};margin-bottom:${getBreakpoints(mb, "xl", handleValue)};margin-left:${getBreakpoints(ml, "xl", handleValue)};padding:${getBreakpoints(p, "xl", handleValue)};padding-top:${getBreakpoints(pt, "xl", handleValue)};padding-right:${getBreakpoints(pr, "xl", handleValue)};padding-bottom:${getBreakpoints(pb, "xl", handleValue)};padding-left:${getBreakpoints(pl, "xl", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue)};min-width:${getBreakpoints(minWidth, "xl", handleValue)};max-width:${getBreakpoints(maxWidth, "xl", handleValue)};min-height:${getBreakpoints(minHeight, "xl", handleValue)};max-height:${getBreakpoints(maxHeight, "xl", handleValue)};}}`
    })]
  });
}; // const styles = (content) => {
//   return css`
//     ${content}
//   `;
// };