"use strict";

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

exports.__esModule = true;
exports.Skeleton = 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 _brightness = _interopRequireDefault(require("../../utils/brightness"));

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

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

// Generated with util/create-component.js
const Skeleton = props => {
  const theme = (0, _useTheme.default)();
  const {
    type = "circle",
    radius = null,
    color = "shade",
    visible = true,
    // 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,
    children,
    className,
    ...otherProps
  } = props;

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

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

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

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

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

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

      case "circle":
        return "border-radius: 50%;";

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

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

  if (!visible) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: children
    });
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-Skeleton",
    ...otherProps,
    className: _style.default.dynamic([["1956402246", [visible ? "block" : "none", handleShape(), radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xs", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xs", handleValue) : "auto", handleBackgroundColor(), (0, _brightness.default)(handleBackgroundColor(), 20), theme.breakpoints.sm.min, radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "sm", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "sm", handleValue) : "auto", theme.breakpoints.md.min, radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "md", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "md", handleValue) : "auto", theme.breakpoints.lg.min, radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "lg", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "lg", handleValue) : "auto", theme.breakpoints.xl.min, radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xl", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xl", handleValue) : "auto"]], ["1524759144", [(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), (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)(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), (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)(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), (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)(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), (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)(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), (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-Skeleton", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1956402246",
      dynamic: [visible ? "block" : "none", handleShape(), radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xs", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xs", handleValue) : "auto", handleBackgroundColor(), (0, _brightness.default)(handleBackgroundColor(), 20), theme.breakpoints.sm.min, radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "sm", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "sm", handleValue) : "auto", theme.breakpoints.md.min, radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "md", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "md", handleValue) : "auto", theme.breakpoints.lg.min, radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "lg", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "lg", handleValue) : "auto", theme.breakpoints.xl.min, radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xl", handleValue) : "auto", radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xl", handleValue) : "auto"],
      children: `.Wps-Skeleton.__jsx-style-dynamic-selector{display:${visible ? "block" : "none"};${handleShape()} width:${radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xs", handleValue) : "auto"};height:${radius ? (0, _Flex.getBreakpoints)(radius, "xs", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xs", handleValue) : "auto"};-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:placeholderSkeleton-__jsx-style-dynamic-selector;animation-name:placeholderSkeleton-__jsx-style-dynamic-selector;-webkit-animation-timing-function:linear ease;animation-timing-function:linear ease;background:${handleBackgroundColor()};position:relative;background-image:linear-gradient( 90deg, rgba(255,255,255,0) 0, ${(0, _brightness.default)(handleBackgroundColor(), 20)}, rgba(255,255,255,0) );background-size:80px auto;background-repeat:no-repeat;background-position:left -40px top 0;}@-webkit-keyframes placeholderSkeleton-__jsx-style-dynamic-selector{0%{background-position:left -40px top 0;}50%{background-position:right -80px top 0;}auto{background-position:left -40px top 0;}}@keyframes placeholderSkeleton-__jsx-style-dynamic-selector{0%{background-position:left -40px top 0;}50%{background-position:right -80px top 0;}auto{background-position:left -40px top 0;}}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "sm", handleValue) : "auto"};height:${radius ? (0, _Flex.getBreakpoints)(radius, "sm", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "sm", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "md", handleValue) : "auto"};height:${radius ? (0, _Flex.getBreakpoints)(radius, "md", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "md", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "lg", handleValue) : "auto"};height:${radius ? (0, _Flex.getBreakpoints)(radius, "lg", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "lg", handleValue) : "auto"};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Skeleton.__jsx-style-dynamic-selector{width:${radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : width ? (0, _Flex.getBreakpoints)(width, "xl", handleValue) : "auto"};height:${radius ? (0, _Flex.getBreakpoints)(radius, "xl", handleValue) : height ? (0, _Flex.getBreakpoints)(height, "xl", handleValue) : "auto"};}}`
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1524759144",
      dynamic: [(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), (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)(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), (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)(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), (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)(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), (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)(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), (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-Skeleton.__jsx-style-dynamic-selector{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)};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-Skeleton.__jsx-style-dynamic-selector{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)};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-Skeleton.__jsx-style-dynamic-selector{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)};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-Skeleton.__jsx-style-dynamic-selector{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)};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-Skeleton.__jsx-style-dynamic-selector{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)};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)};}}`
    })]
  });
};

exports.Skeleton = Skeleton;