@class101/cdn-ui-system 0.0.3 → 0.0.7

package/core/props/index.js

@@ -1,2087 +1,45 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
-};
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[Object.keys(cb)[0]])((mod = {exports: {}}).exports, mod), mod.exports;
-};
-var __reExport = (target, module, desc) => {
-  if (module && typeof module === "object" || typeof module === "function") {
-    for (let key of __getOwnPropNames(module))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, {get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable});
-  }
-  return target;
-};
-var __toModule = (module) => {
-  return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", module && module.__esModule && "default" in module ? {get: () => module.default, enumerable: true} : {value: module, enumerable: true})), module);
-};
-
 // tools/builders/framer-esm/build/react-shim.js
 import * as React from "react";
-var init_react_shim = __esm({
-  "tools/builders/framer-esm/build/react-shim.js"() {
-  }
-});
-
-// node_modules/object-assign/index.js
-var require_object_assign = __commonJS({
-  "node_modules/object-assign/index.js"(exports, module) {
-    init_react_shim();
-    "use strict";
-    var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-    var hasOwnProperty = Object.prototype.hasOwnProperty;
-    var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-    function toObject(val) {
-      if (val === null || val === void 0) {
-        throw new TypeError("Object.assign cannot be called with null or undefined");
-      }
-      return Object(val);
-    }
-    function shouldUseNative() {
-      try {
-        if (!Object.assign) {
-          return false;
-        }
-        var test1 = new String("abc");
-        test1[5] = "de";
-        if (Object.getOwnPropertyNames(test1)[0] === "5") {
-          return false;
-        }
-        var test2 = {};
-        for (var i = 0; i < 10; i++) {
-          test2["_" + String.fromCharCode(i)] = i;
-        }
-        var order22 = Object.getOwnPropertyNames(test2).map(function(n) {
-          return test2[n];
-        });
-        if (order22.join("") !== "0123456789") {
-          return false;
-        }
-        var test3 = {};
-        "abcdefghijklmnopqrst".split("").forEach(function(letter) {
-          test3[letter] = letter;
-        });
-        if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
-          return false;
-        }
-        return true;
-      } catch (err) {
-        return false;
-      }
-    }
-    module.exports = shouldUseNative() ? Object.assign : function(target, source) {
-      var from;
-      var to = toObject(target);
-      var symbols;
-      for (var s = 1; s < arguments.length; s++) {
-        from = Object(arguments[s]);
-        for (var key in from) {
-          if (hasOwnProperty.call(from, key)) {
-            to[key] = from[key];
-          }
-        }
-        if (getOwnPropertySymbols) {
-          symbols = getOwnPropertySymbols(from);
-          for (var i = 0; i < symbols.length; i++) {
-            if (propIsEnumerable.call(from, symbols[i])) {
-              to[symbols[i]] = from[symbols[i]];
-            }
-          }
-        }
-      }
-      return to;
-    };
-  }
-});
-
-// libs/shared/ui-system/src/core/props/index.ts
-init_react_shim();
-
-// node_modules/@class101/styled-system/dist/index.esm.js
-init_react_shim();
-
-// node_modules/@class101/styled-system__core/dist/index.esm.js
-init_react_shim();
-var import_object_assign = __toModule(require_object_assign());
-var merge = function merge2(a, b) {
-  var result = (0, import_object_assign.default)({}, a, b);
-  for (var key in a) {
-    var _assign;
-    if (!a[key] || typeof b[key] !== "object")
-      continue;
-    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
-  }
-  return result;
-};
-var sort = function sort2(obj) {
-  var next = {};
-  Object.keys(obj).sort(function(a, b) {
-    return a.localeCompare(b, void 0, {
-      numeric: true,
-      sensitivity: "base"
-    });
-  }).forEach(function(key) {
-    next[key] = obj[key];
-  });
-  return next;
-};
-var defaults = {
-  breakpoints: [40, 52, 64].map(function(n) {
-    return n + "em";
-  })
-};
-var createMediaQuery = function createMediaQuery2(n) {
-  return "@media screen and (min-width: " + n + ")";
-};
-var getValue = function getValue2(n, scale) {
-  return get(scale, n, n);
-};
-var get = function get2(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var createParser = function createParser2(config17) {
-  var cache = {};
-  var parse = function parse2(props2) {
-    var styles = {};
-    var shouldSort = false;
-    var isCacheDisabled = props2.theme && props2.theme.disableStyledSystemCache;
-    for (var _key in props2) {
-      if (!config17[_key])
-        continue;
-      var sx = config17[_key];
-      var raw = props2[_key];
-      var scale = get(props2.theme, sx.scale, sx.defaults);
-      if (typeof raw === "object" && Array.isArray(raw)) {
-        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props2.theme, "breakpoints", defaults.breakpoints);
-        cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
-        styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props2));
-        continue;
-      }
-      (0, import_object_assign.default)(styles, sx(raw, scale, props2));
-    }
-    if (shouldSort) {
-      styles = sort(styles);
-    }
-    var sortedStyles = {};
-    var mediaQueryStyles = {};
-    for (var key in styles) {
-      if (key.startsWith("@media")) {
-        mediaQueryStyles[key] = styles[key];
-        continue;
-      }
-      sortedStyles[key] = styles[key];
-    }
-    return merge(sortedStyles, mediaQueryStyles);
-  };
-  parse.config = config17;
-  parse.propNames = Object.keys(config17);
-  parse.cache = cache;
-  var keys = Object.keys(config17).filter(function(k) {
-    return k !== "config";
-  });
-  if (keys.length > 1) {
-    keys.forEach(function(key) {
-      var _createParser;
-      parse[key] = createParser2((_createParser = {}, _createParser[key] = config17[key], _createParser));
-    });
-  }
-  return parse;
-};
-var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
-  var styles = {};
-  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
-    var media = mediaQueries[i];
-    var style = sx(value, scale, _props);
-    if (!media) {
-      (0, import_object_assign.default)(styles, style);
-    } else {
-      var _assign2;
-      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
-    }
-  });
-  return styles;
-};
-var createStyleFunction = function createStyleFunction2(_ref) {
-  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform2 = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
-  properties = properties || [property];
-  var sx = function sx2(value, scale2, _props) {
-    var result = {};
-    var n = transform2(value, scale2, _props);
-    if (n === null)
-      return;
-    properties.forEach(function(prop) {
-      result[prop] = n;
-    });
-    return result;
-  };
-  sx.scale = scale;
-  sx.defaults = defaultScale;
-  return sx;
-};
-var system = function system2(args) {
-  if (args === void 0) {
-    args = {};
-  }
-  var config17 = {};
-  Object.keys(args).forEach(function(key) {
-    var conf = args[key];
-    if (conf === true) {
-      config17[key] = createStyleFunction({
-        property: key,
-        scale: key
-      });
-      return;
-    }
-    if (typeof conf === "function") {
-      config17[key] = conf;
-      return;
-    }
-    config17[key] = createStyleFunction(conf);
-  });
-  var parser = createParser(config17);
-  return parser;
-};
-var compose = function compose2() {
-  var config17 = {};
-  for (var _len = arguments.length, parsers = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
-    parsers[_key2] = arguments[_key2];
-  }
-  parsers.forEach(function(parser2) {
-    if (!parser2 || !parser2.config)
-      return;
-    (0, import_object_assign.default)(config17, parser2.config);
-  });
-  var parser = createParser(config17);
-  return parser;
-};
-
-// node_modules/@class101/styled-system__layout/dist/index.esm.js
-init_react_shim();
-var isNumber = function isNumber2(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getWidth = function getWidth2(n, scale) {
-  return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
-};
-var config = {
-  width: {
-    property: "width",
-    scale: "sizes",
-    transform: getWidth
-  },
-  height: {
-    property: "height",
-    scale: "sizes"
-  },
-  minWidth: {
-    property: "minWidth",
-    scale: "sizes"
-  },
-  minHeight: {
-    property: "minHeight",
-    scale: "sizes"
-  },
-  maxWidth: {
-    property: "maxWidth",
-    scale: "sizes"
-  },
-  maxHeight: {
-    property: "maxHeight",
-    scale: "sizes"
-  },
-  size: {
-    properties: ["width", "height"],
-    scale: "sizes"
-  },
-  overflow: true,
-  overflowX: true,
-  overflowY: true,
-  display: true,
-  verticalAlign: true
-};
-var layout = system(config);
-var index_esm_default = layout;
-
-// node_modules/@class101/styled-system__color/dist/index.esm.js
-init_react_shim();
-var config2 = {
-  color: {
-    property: "color",
-    scale: "colors"
-  },
-  backgroundColor: {
-    property: "backgroundColor",
-    scale: "colors"
-  },
-  opacity: true
-};
-config2.bg = config2.backgroundColor;
-var color = system(config2);
-var index_esm_default2 = color;
-
-// node_modules/@class101/styled-system__typography/dist/index.esm.js
-init_react_shim();
-var defaults2 = {
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var config3 = {
-  fontFamily: {
-    property: "fontFamily",
-    scale: "fonts"
-  },
-  fontSize: {
-    property: "fontSize",
-    scale: "fontSizes",
-    defaultScale: defaults2.fontSizes
-  },
-  fontWeight: {
-    property: "fontWeight",
-    scale: "fontWeights"
-  },
-  lineHeight: {
-    property: "lineHeight",
-    scale: "lineHeights"
-  },
-  letterSpacing: {
-    property: "letterSpacing",
-    scale: "letterSpacings"
-  },
-  textAlign: true,
-  fontStyle: true
-};
-var typography = system(config3);
-var index_esm_default3 = typography;
-
-// node_modules/@class101/styled-system__flexbox/dist/index.esm.js
-init_react_shim();
-var config4 = {
-  alignItems: true,
-  alignContent: true,
-  justifyItems: true,
-  justifyContent: true,
-  flexWrap: true,
-  flexDirection: true,
-  flex: true,
-  flexGrow: true,
-  flexShrink: true,
-  flexBasis: true,
-  justifySelf: true,
-  alignSelf: true,
-  order: true
-};
-var flexbox = system(config4);
-var index_esm_default4 = flexbox;
-
-// node_modules/@class101/styled-system__grid/dist/index.esm.js
-init_react_shim();
-var defaults3 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config5 = {
-  gridGap: {
-    property: "gridGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridColumnGap: {
-    property: "gridColumnGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridRowGap: {
-    property: "gridRowGap",
-    scale: "space",
-    defaultScale: defaults3.space
-  },
-  gridColumn: true,
-  gridRow: true,
-  gridAutoFlow: true,
-  gridAutoColumns: true,
-  gridAutoRows: true,
-  gridTemplateColumns: true,
-  gridTemplateRows: true,
-  gridTemplateAreas: true,
-  gridArea: true
-};
-var grid = system(config5);
-var index_esm_default5 = grid;
-
-// node_modules/@class101/styled-system__border/dist/index.esm.js
-init_react_shim();
-var config6 = {
-  border: {
-    property: "border",
-    scale: "borders"
-  },
-  borderWidth: {
-    property: "borderWidth",
-    scale: "borderWidths"
-  },
-  borderStyle: {
-    property: "borderStyle",
-    scale: "borderStyles"
-  },
-  borderColor: {
-    property: "borderColor",
-    scale: "colors"
-  },
-  borderRadius: {
-    property: "borderRadius",
-    scale: "radii"
-  },
-  borderTop: {
-    property: "borderTop",
-    scale: "borders"
-  },
-  borderTopLeftRadius: {
-    property: "borderTopLeftRadius",
-    scale: "radii"
-  },
-  borderTopRightRadius: {
-    property: "borderTopRightRadius",
-    scale: "radii"
-  },
-  borderRight: {
-    property: "borderRight",
-    scale: "borders"
-  },
-  borderBottom: {
-    property: "borderBottom",
-    scale: "borders"
-  },
-  borderBottomLeftRadius: {
-    property: "borderBottomLeftRadius",
-    scale: "radii"
-  },
-  borderBottomRightRadius: {
-    property: "borderBottomRightRadius",
-    scale: "radii"
-  },
-  borderLeft: {
-    property: "borderLeft",
-    scale: "borders"
-  },
-  borderX: {
-    properties: ["borderLeft", "borderRight"],
-    scale: "borders"
-  },
-  borderY: {
-    properties: ["borderTop", "borderBottom"],
-    scale: "borders"
-  }
-};
-config6.borderTopWidth = {
-  property: "borderTopWidth",
-  scale: "borderWidths"
-};
-config6.borderTopColor = {
-  property: "borderTopColor",
-  scale: "colors"
-};
-config6.borderTopStyle = {
-  property: "borderTopStyle",
-  scale: "borderStyles"
-};
-config6.borderTopLeftRadius = {
-  property: "borderTopLeftRadius",
-  scale: "radii"
-};
-config6.borderTopRightRadius = {
-  property: "borderTopRightRadius",
-  scale: "radii"
-};
-config6.borderBottomWidth = {
-  property: "borderBottomWidth",
-  scale: "borderWidths"
-};
-config6.borderBottomColor = {
-  property: "borderBottomColor",
-  scale: "colors"
-};
-config6.borderBottomStyle = {
-  property: "borderBottomStyle",
-  scale: "borderStyles"
-};
-config6.borderBottomLeftRadius = {
-  property: "borderBottomLeftRadius",
-  scale: "radii"
-};
-config6.borderBottomRightRadius = {
-  property: "borderBottomRightRadius",
-  scale: "radii"
-};
-config6.borderLeftWidth = {
-  property: "borderLeftWidth",
-  scale: "borderWidths"
-};
-config6.borderLeftColor = {
-  property: "borderLeftColor",
-  scale: "colors"
-};
-config6.borderLeftStyle = {
-  property: "borderLeftStyle",
-  scale: "borderStyles"
-};
-config6.borderRightWidth = {
-  property: "borderRightWidth",
-  scale: "borderWidths"
-};
-config6.borderRightColor = {
-  property: "borderRightColor",
-  scale: "colors"
-};
-config6.borderRightStyle = {
-  property: "borderRightStyle",
-  scale: "borderStyles"
-};
-var border = system(config6);
-var index_esm_default6 = border;
-
-// node_modules/@class101/styled-system__background/dist/index.esm.js
-init_react_shim();
-var config7 = {
-  background: true,
-  backgroundImage: true,
-  backgroundSize: true,
-  backgroundPosition: true,
-  backgroundRepeat: true
-};
-config7.bgImage = config7.backgroundImage;
-config7.bgSize = config7.backgroundSize;
-config7.bgPosition = config7.backgroundPosition;
-config7.bgRepeat = config7.backgroundRepeat;
-var background = system(config7);
-var index_esm_default7 = background;
-
-// node_modules/@class101/styled-system__position/dist/index.esm.js
-init_react_shim();
-var defaults4 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config8 = {
-  position: true,
-  zIndex: {
-    property: "zIndex",
-    scale: "zIndices"
-  },
-  top: {
-    property: "top",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  right: {
-    property: "right",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  bottom: {
-    property: "bottom",
-    scale: "space",
-    defaultScale: defaults4.space
-  },
-  left: {
-    property: "left",
-    scale: "space",
-    defaultScale: defaults4.space
-  }
-};
-var position = system(config8);
-var index_esm_default8 = position;
-
-// node_modules/@class101/styled-system__space/dist/index.esm.js
-init_react_shim();
-var defaults5 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var isNumber3 = function isNumber4(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getMargin = function getMargin2(n, scale) {
-  if (!isNumber3(n)) {
-    return get(scale, n, n);
-  }
-  var isNegative = n < 0;
-  var absolute = Math.abs(n);
-  var value = get(scale, absolute, absolute);
-  if (!isNumber3(value)) {
-    return isNegative ? "-" + value : value;
-  }
-  return value * (isNegative ? -1 : 1);
-};
-var configs = {};
-configs.margin = {
-  margin: {
-    property: "margin",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginTop: {
-    property: "marginTop",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginRight: {
-    property: "marginRight",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginBottom: {
-    property: "marginBottom",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginLeft: {
-    property: "marginLeft",
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginX: {
-    properties: ["marginLeft", "marginRight"],
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  },
-  marginY: {
-    properties: ["marginTop", "marginBottom"],
-    scale: "space",
-    transform: getMargin,
-    defaultScale: defaults5.space
-  }
-};
-configs.margin.m = configs.margin.margin;
-configs.margin.mt = configs.margin.marginTop;
-configs.margin.mr = configs.margin.marginRight;
-configs.margin.mb = configs.margin.marginBottom;
-configs.margin.ml = configs.margin.marginLeft;
-configs.margin.mx = configs.margin.marginX;
-configs.margin.my = configs.margin.marginY;
-configs.padding = {
-  padding: {
-    property: "padding",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingTop: {
-    property: "paddingTop",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingRight: {
-    property: "paddingRight",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingBottom: {
-    property: "paddingBottom",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingLeft: {
-    property: "paddingLeft",
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingX: {
-    properties: ["paddingLeft", "paddingRight"],
-    scale: "space",
-    defaultScale: defaults5.space
-  },
-  paddingY: {
-    properties: ["paddingTop", "paddingBottom"],
-    scale: "space",
-    defaultScale: defaults5.space
-  }
-};
-configs.padding.p = configs.padding.padding;
-configs.padding.pt = configs.padding.paddingTop;
-configs.padding.pr = configs.padding.paddingRight;
-configs.padding.pb = configs.padding.paddingBottom;
-configs.padding.pl = configs.padding.paddingLeft;
-configs.padding.px = configs.padding.paddingX;
-configs.padding.py = configs.padding.paddingY;
-var margin = system(configs.margin);
-var padding = system(configs.padding);
-var space = compose(margin, padding);
-
-// node_modules/@class101/styled-system__shadow/dist/index.esm.js
-init_react_shim();
-var shadow = system({
-  boxShadow: {
-    property: "boxShadow",
-    scale: "shadows"
-  },
-  textShadow: {
-    property: "textShadow",
-    scale: "shadows"
-  }
-});
-
-// node_modules/@class101/styled-system__variant/dist/index.esm.js
-init_react_shim();
-
-// node_modules/@class101/styled-system__css/dist/index.esm.js
-init_react_shim();
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-var get3 = function get4(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var defaultBreakpoints = [40, 52, 64].map(function(n) {
-  return n + "em";
-});
-var defaultTheme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases = {
-  bg: "backgroundColor",
-  m: "margin",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft",
-  mx: "marginX",
-  my: "marginY",
-  p: "padding",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  px: "paddingX",
-  py: "paddingY"
-};
-var multiples = {
-  marginX: ["marginLeft", "marginRight"],
-  marginY: ["marginTop", "marginBottom"],
-  paddingX: ["paddingLeft", "paddingRight"],
-  paddingY: ["paddingTop", "paddingBottom"],
-  size: ["width", "height"]
-};
-var scales = {
-  color: "colors",
-  backgroundColor: "colors",
-  borderColor: "colors",
-  margin: "space",
-  marginTop: "space",
-  marginRight: "space",
-  marginBottom: "space",
-  marginLeft: "space",
-  marginX: "space",
-  marginY: "space",
-  padding: "space",
-  paddingTop: "space",
-  paddingRight: "space",
-  paddingBottom: "space",
-  paddingLeft: "space",
-  paddingX: "space",
-  paddingY: "space",
-  top: "space",
-  right: "space",
-  bottom: "space",
-  left: "space",
-  gridGap: "space",
-  gridColumnGap: "space",
-  gridRowGap: "space",
-  gap: "space",
-  columnGap: "space",
-  rowGap: "space",
-  fontFamily: "fonts",
-  fontSize: "fontSizes",
-  fontWeight: "fontWeights",
-  lineHeight: "lineHeights",
-  letterSpacing: "letterSpacings",
-  border: "borders",
-  borderTop: "borders",
-  borderRight: "borders",
-  borderBottom: "borders",
-  borderLeft: "borders",
-  borderWidth: "borderWidths",
-  borderStyle: "borderStyles",
-  borderRadius: "radii",
-  borderTopRightRadius: "radii",
-  borderTopLeftRadius: "radii",
-  borderBottomRightRadius: "radii",
-  borderBottomLeftRadius: "radii",
-  borderTopWidth: "borderWidths",
-  borderTopColor: "colors",
-  borderTopStyle: "borderStyles",
-  borderBottomWidth: "borderWidths",
-  borderBottomColor: "colors",
-  borderBottomStyle: "borderStyles",
-  borderLeftWidth: "borderWidths",
-  borderLeftColor: "colors",
-  borderLeftStyle: "borderStyles",
-  borderRightWidth: "borderWidths",
-  borderRightColor: "colors",
-  borderRightStyle: "borderStyles",
-  outlineColor: "colors",
-  boxShadow: "shadows",
-  textShadow: "shadows",
-  zIndex: "zIndices",
-  width: "sizes",
-  minWidth: "sizes",
-  maxWidth: "sizes",
-  height: "sizes",
-  minHeight: "sizes",
-  maxHeight: "sizes",
-  flexBasis: "sizes",
-  size: "sizes",
-  fill: "colors",
-  stroke: "colors"
-};
-var positiveOrNegative = function positiveOrNegative2(scale, value) {
-  if (typeof value !== "number" || value >= 0) {
-    return get3(scale, value, value);
-  }
-  var absolute = Math.abs(value);
-  var n = get3(scale, absolute, absolute);
-  if (typeof n === "string")
-    return "-" + n;
-  return n * -1;
-};
-var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
-  var _extends22;
-  return _extends({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
-}, {});
-var responsive = function responsive2(styles) {
-  return function(theme) {
-    var next = {};
-    var breakpoints = get3(theme, "breakpoints", defaultBreakpoints);
-    var mediaQueries = [null].concat(breakpoints.map(function(n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-    for (var key in styles) {
-      var value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
-      if (value == null)
-        continue;
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-        next[media] = next[media] || {};
-        if (value[i] == null)
-          continue;
-        next[media][key] = value[i];
-      }
-    }
-    return next;
-  };
-};
-var css = function css2(args) {
-  return function(props2) {
-    if (props2 === void 0) {
-      props2 = {};
-    }
-    var theme = _extends({}, defaultTheme, props2.theme || props2);
-    var result = {};
-    var obj = typeof args === "function" ? args(theme) : args;
-    var styles = responsive(obj)(theme);
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === "function" ? x(theme) : x;
-      if (key === "variant") {
-        var variant5 = css2(get3(theme, val))(theme);
-        result = _extends({}, result, variant5);
-        continue;
-      }
-      if (val && typeof val === "object") {
-        result[key] = css2(val)(theme);
-        continue;
-      }
-      var prop = get3(aliases, key, key);
-      var scaleName = get3(scales, prop);
-      var scale = get3(theme, scaleName, get3(theme, prop, {}));
-      var transform2 = get3(transforms, prop, get3);
-      var value = transform2(scale, val, val);
-      if (multiples[prop]) {
-        var dirs = multiples[prop];
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-    return result;
-  };
-};
-var index_esm_default9 = css;
-
-// node_modules/@class101/styled-system__variant/dist/index.esm.js
-var variant = function variant2(_ref) {
-  var _config;
-  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
-  var sx;
-  if (Object.keys(variants).length) {
-    sx = function sx2(value, scale2, props2) {
-      return index_esm_default9(get(scale2, value, null))(props2.theme);
-    };
-  } else {
-    sx = function sx2(value, scale2) {
-      return get(scale2, value, null);
-    };
-  }
-  sx.scale = scale || key;
-  sx.defaults = variants;
-  var config17 = (_config = {}, _config[prop] = sx, _config);
-  var parser = createParser(config17);
-  return parser;
-};
-var buttonStyle = variant({
-  key: "buttons"
-});
-var textStyle = variant({
-  key: "textStyles",
-  prop: "textStyle"
-});
-var colorStyle = variant({
-  key: "colorStyles",
-  prop: "colors"
-});
-
-// node_modules/@class101/styled-system/dist/index.esm.js
-var width = index_esm_default.width;
-var height = index_esm_default.height;
-var minWidth = index_esm_default.minWidth;
-var minHeight = index_esm_default.minHeight;
-var maxWidth = index_esm_default.maxWidth;
-var maxHeight = index_esm_default.maxHeight;
-var size = index_esm_default.size;
-var verticalAlign = index_esm_default.verticalAlign;
-var display = index_esm_default.display;
-var overflow = index_esm_default.overflow;
-var overflowX = index_esm_default.overflowX;
-var overflowY = index_esm_default.overflowY;
-var opacity = index_esm_default2.opacity;
-var fontSize = index_esm_default3.fontSize;
-var fontFamily = index_esm_default3.fontFamily;
-var fontWeight = index_esm_default3.fontWeight;
-var lineHeight = index_esm_default3.lineHeight;
-var textAlign = index_esm_default3.textAlign;
-var fontStyle = index_esm_default3.fontStyle;
-var letterSpacing = index_esm_default3.letterSpacing;
-var alignItems = index_esm_default4.alignItems;
-var alignContent = index_esm_default4.alignContent;
-var justifyItems = index_esm_default4.justifyItems;
-var justifyContent = index_esm_default4.justifyContent;
-var flexWrap = index_esm_default4.flexWrap;
-var flexDirection = index_esm_default4.flexDirection;
-var flex = index_esm_default4.flex;
-var flexGrow = index_esm_default4.flexGrow;
-var flexShrink = index_esm_default4.flexShrink;
-var flexBasis = index_esm_default4.flexBasis;
-var justifySelf = index_esm_default4.justifySelf;
-var alignSelf = index_esm_default4.alignSelf;
-var order = index_esm_default4.order;
-var gridGap = index_esm_default5.gridGap;
-var gridColumnGap = index_esm_default5.gridColumnGap;
-var gridRowGap = index_esm_default5.gridRowGap;
-var gridColumn = index_esm_default5.gridColumn;
-var gridRow = index_esm_default5.gridRow;
-var gridAutoFlow = index_esm_default5.gridAutoFlow;
-var gridAutoColumns = index_esm_default5.gridAutoColumns;
-var gridAutoRows = index_esm_default5.gridAutoRows;
-var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
-var gridTemplateRows = index_esm_default5.gridTemplateRows;
-var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
-var gridArea = index_esm_default5.gridArea;
-var borderWidth = index_esm_default6.borderWidth;
-var borderStyle = index_esm_default6.borderStyle;
-var borderColor = index_esm_default6.borderColor;
-var borderTop = index_esm_default6.borderTop;
-var borderRight = index_esm_default6.borderRight;
-var borderBottom = index_esm_default6.borderBottom;
-var borderLeft = index_esm_default6.borderLeft;
-var borderRadius = index_esm_default6.borderRadius;
-var backgroundImage = index_esm_default7.backgroundImage;
-var backgroundSize = index_esm_default7.backgroundSize;
-var backgroundPosition = index_esm_default7.backgroundPosition;
-var backgroundRepeat = index_esm_default7.backgroundRepeat;
-var zIndex = index_esm_default8.zIndex;
-var top = index_esm_default8.top;
-var right = index_esm_default8.right;
-var bottom = index_esm_default8.bottom;
-var left = index_esm_default8.left;
-
-// node_modules/@styled-system/should-forward-prop/dist/index.esm.js
-init_react_shim();
-
-// node_modules/@emotion/memoize/dist/emotion-memoize.browser.esm.js
-init_react_shim();
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function(arg) {
-    if (cache[arg] === void 0)
-      cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-var emotion_memoize_browser_esm_default = memoize;
-
-// node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js
-init_react_shim();
-
-// node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize/dist/memoize.browser.esm.js
-init_react_shim();
-function memoize2(fn) {
-  var cache = {};
-  return function(arg) {
-    if (cache[arg] === void 0)
-      cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-var memoize_browser_esm_default = memoize2;
-
-// node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
-var index = memoize_browser_esm_default(function(prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
-});
-var is_prop_valid_browser_esm_default = index;
-
-// node_modules/styled-system/dist/index.esm.js
-init_react_shim();
-
-// node_modules/@styled-system/core/dist/index.esm.js
-init_react_shim();
-var import_object_assign2 = __toModule(require_object_assign());
-var merge3 = function merge4(a, b) {
-  var result = (0, import_object_assign2.default)({}, a, b);
-  for (var key in a) {
-    var _assign;
-    if (!a[key] || typeof b[key] !== "object")
-      continue;
-    (0, import_object_assign2.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign2.default)(a[key], b[key]), _assign));
-  }
-  return result;
-};
-var sort3 = function sort4(obj) {
-  var next = {};
-  Object.keys(obj).sort(function(a, b) {
-    return a.localeCompare(b, void 0, {
-      numeric: true,
-      sensitivity: "base"
-    });
-  }).forEach(function(key) {
-    next[key] = obj[key];
-  });
-  return next;
-};
-var defaults6 = {
-  breakpoints: [40, 52, 64].map(function(n) {
-    return n + "em";
-  })
-};
-var createMediaQuery3 = function createMediaQuery4(n) {
-  return "@media screen and (min-width: " + n + ")";
-};
-var getValue3 = function getValue4(n, scale) {
-  return get5(scale, n, n);
-};
-var get5 = function get6(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var createParser3 = function createParser4(config17) {
-  var cache = {};
-  var parse = function parse2(props2) {
-    var styles = {};
-    var shouldSort = false;
-    var isCacheDisabled = props2.theme && props2.theme.disableStyledSystemCache;
-    for (var key in props2) {
-      if (!config17[key])
-        continue;
-      var sx = config17[key];
-      var raw = props2[key];
-      var scale = get5(props2.theme, sx.scale, sx.defaults);
-      if (typeof raw === "object") {
-        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get5(props2.theme, "breakpoints", defaults6.breakpoints);
-        if (Array.isArray(raw)) {
-          cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery3));
-          styles = merge3(styles, parseResponsiveStyle3(cache.media, sx, scale, raw, props2));
-          continue;
-        }
-        if (raw !== null) {
-          styles = merge3(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props2));
-          shouldSort = true;
-        }
-        continue;
-      }
-      (0, import_object_assign2.default)(styles, sx(raw, scale, props2));
-    }
-    if (shouldSort) {
-      styles = sort3(styles);
-    }
-    return styles;
-  };
-  parse.config = config17;
-  parse.propNames = Object.keys(config17);
-  parse.cache = cache;
-  var keys = Object.keys(config17).filter(function(k) {
-    return k !== "config";
-  });
-  if (keys.length > 1) {
-    keys.forEach(function(key) {
-      var _createParser;
-      parse[key] = createParser4((_createParser = {}, _createParser[key] = config17[key], _createParser));
-    });
-  }
-  return parse;
-};
-var parseResponsiveStyle3 = function parseResponsiveStyle4(mediaQueries, sx, scale, raw, _props) {
-  var styles = {};
-  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
-    var media = mediaQueries[i];
-    var style = sx(value, scale, _props);
-    if (!media) {
-      (0, import_object_assign2.default)(styles, style);
-    } else {
-      var _assign2;
-      (0, import_object_assign2.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign2.default)({}, styles[media], style), _assign2));
-    }
-  });
-  return styles;
-};
-var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
-  var styles = {};
-  for (var key in raw) {
-    var breakpoint = breakpoints[key];
-    var value = raw[key];
-    var style = sx(value, scale, _props);
-    if (!breakpoint) {
-      (0, import_object_assign2.default)(styles, style);
-    } else {
-      var _assign3;
-      var media = createMediaQuery3(breakpoint);
-      (0, import_object_assign2.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign2.default)({}, styles[media], style), _assign3));
-    }
-  }
-  return styles;
-};
-var createStyleFunction3 = function createStyleFunction4(_ref) {
-  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform2 = _ref$transform === void 0 ? getValue3 : _ref$transform, defaultScale = _ref.defaultScale;
-  properties = properties || [property];
-  var sx = function sx2(value, scale2, _props) {
-    var result = {};
-    var n = transform2(value, scale2, _props);
-    if (n === null)
-      return;
-    properties.forEach(function(prop) {
-      result[prop] = n;
-    });
-    return result;
-  };
-  sx.scale = scale;
-  sx.defaults = defaultScale;
-  return sx;
-};
-var system3 = function system4(args) {
-  if (args === void 0) {
-    args = {};
-  }
-  var config17 = {};
-  Object.keys(args).forEach(function(key) {
-    var conf = args[key];
-    if (conf === true) {
-      config17[key] = createStyleFunction3({
-        property: key,
-        scale: key
-      });
-      return;
-    }
-    if (typeof conf === "function") {
-      config17[key] = conf;
-      return;
-    }
-    config17[key] = createStyleFunction3(conf);
-  });
-  var parser = createParser3(config17);
-  return parser;
-};
-var compose3 = function compose4() {
-  var config17 = {};
-  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
-    parsers[_key] = arguments[_key];
-  }
-  parsers.forEach(function(parser2) {
-    if (!parser2 || !parser2.config)
-      return;
-    (0, import_object_assign2.default)(config17, parser2.config);
-  });
-  var parser = createParser3(config17);
-  return parser;
-};
-
-// node_modules/@styled-system/layout/dist/index.esm.js
-init_react_shim();
-var isNumber5 = function isNumber6(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getWidth3 = function getWidth4(n, scale) {
-  return get5(scale, n, !isNumber5(n) || n > 1 ? n : n * 100 + "%");
-};
-var config9 = {
-  width: {
-    property: "width",
-    scale: "sizes",
-    transform: getWidth3
-  },
-  height: {
-    property: "height",
-    scale: "sizes"
-  },
-  minWidth: {
-    property: "minWidth",
-    scale: "sizes"
-  },
-  minHeight: {
-    property: "minHeight",
-    scale: "sizes"
-  },
-  maxWidth: {
-    property: "maxWidth",
-    scale: "sizes"
-  },
-  maxHeight: {
-    property: "maxHeight",
-    scale: "sizes"
-  },
-  size: {
-    properties: ["width", "height"],
-    scale: "sizes"
-  },
-  overflow: true,
-  overflowX: true,
-  overflowY: true,
-  display: true,
-  verticalAlign: true
-};
-var layout2 = system3(config9);
-var index_esm_default11 = layout2;
-
-// node_modules/@styled-system/color/dist/index.esm.js
-init_react_shim();
-var config10 = {
-  color: {
-    property: "color",
-    scale: "colors"
-  },
-  backgroundColor: {
-    property: "backgroundColor",
-    scale: "colors"
-  },
-  opacity: true
-};
-config10.bg = config10.backgroundColor;
-var color2 = system3(config10);
-var index_esm_default12 = color2;
-
-// node_modules/@styled-system/typography/dist/index.esm.js
-init_react_shim();
-var defaults7 = {
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var config11 = {
-  fontFamily: {
-    property: "fontFamily",
-    scale: "fonts"
-  },
-  fontSize: {
-    property: "fontSize",
-    scale: "fontSizes",
-    defaultScale: defaults7.fontSizes
-  },
-  fontWeight: {
-    property: "fontWeight",
-    scale: "fontWeights"
-  },
-  lineHeight: {
-    property: "lineHeight",
-    scale: "lineHeights"
-  },
-  letterSpacing: {
-    property: "letterSpacing",
-    scale: "letterSpacings"
-  },
-  textAlign: true,
-  fontStyle: true
-};
-var typography2 = system3(config11);
-var index_esm_default13 = typography2;
-
-// node_modules/@styled-system/flexbox/dist/index.esm.js
-init_react_shim();
-var config12 = {
-  alignItems: true,
-  alignContent: true,
-  justifyItems: true,
-  justifyContent: true,
-  flexWrap: true,
-  flexDirection: true,
-  flex: true,
-  flexGrow: true,
-  flexShrink: true,
-  flexBasis: true,
-  justifySelf: true,
-  alignSelf: true,
-  order: true
-};
-var flexbox2 = system3(config12);
-var index_esm_default14 = flexbox2;
-
-// node_modules/@styled-system/grid/dist/index.esm.js
-init_react_shim();
-var defaults8 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config13 = {
-  gridGap: {
-    property: "gridGap",
-    scale: "space",
-    defaultScale: defaults8.space
-  },
-  gridColumnGap: {
-    property: "gridColumnGap",
-    scale: "space",
-    defaultScale: defaults8.space
-  },
-  gridRowGap: {
-    property: "gridRowGap",
-    scale: "space",
-    defaultScale: defaults8.space
-  },
-  gridColumn: true,
-  gridRow: true,
-  gridAutoFlow: true,
-  gridAutoColumns: true,
-  gridAutoRows: true,
-  gridTemplateColumns: true,
-  gridTemplateRows: true,
-  gridTemplateAreas: true,
-  gridArea: true
-};
-var grid2 = system3(config13);
-var index_esm_default15 = grid2;
-
-// node_modules/@styled-system/border/dist/index.esm.js
-init_react_shim();
-var config14 = {
-  border: {
-    property: "border",
-    scale: "borders"
-  },
-  borderWidth: {
-    property: "borderWidth",
-    scale: "borderWidths"
-  },
-  borderStyle: {
-    property: "borderStyle",
-    scale: "borderStyles"
-  },
-  borderColor: {
-    property: "borderColor",
-    scale: "colors"
-  },
-  borderRadius: {
-    property: "borderRadius",
-    scale: "radii"
-  },
-  borderTop: {
-    property: "borderTop",
-    scale: "borders"
-  },
-  borderTopLeftRadius: {
-    property: "borderTopLeftRadius",
-    scale: "radii"
-  },
-  borderTopRightRadius: {
-    property: "borderTopRightRadius",
-    scale: "radii"
-  },
-  borderRight: {
-    property: "borderRight",
-    scale: "borders"
-  },
-  borderBottom: {
-    property: "borderBottom",
-    scale: "borders"
-  },
-  borderBottomLeftRadius: {
-    property: "borderBottomLeftRadius",
-    scale: "radii"
-  },
-  borderBottomRightRadius: {
-    property: "borderBottomRightRadius",
-    scale: "radii"
-  },
-  borderLeft: {
-    property: "borderLeft",
-    scale: "borders"
-  },
-  borderX: {
-    properties: ["borderLeft", "borderRight"],
-    scale: "borders"
-  },
-  borderY: {
-    properties: ["borderTop", "borderBottom"],
-    scale: "borders"
-  }
-};
-config14.borderTopWidth = {
-  property: "borderTopWidth",
-  scale: "borderWidths"
-};
-config14.borderTopColor = {
-  property: "borderTopColor",
-  scale: "colors"
-};
-config14.borderTopStyle = {
-  property: "borderTopStyle",
-  scale: "borderStyles"
-};
-config14.borderTopLeftRadius = {
-  property: "borderTopLeftRadius",
-  scale: "radii"
-};
-config14.borderTopRightRadius = {
-  property: "borderTopRightRadius",
-  scale: "radii"
-};
-config14.borderBottomWidth = {
-  property: "borderBottomWidth",
-  scale: "borderWidths"
-};
-config14.borderBottomColor = {
-  property: "borderBottomColor",
-  scale: "colors"
-};
-config14.borderBottomStyle = {
-  property: "borderBottomStyle",
-  scale: "borderStyles"
-};
-config14.borderBottomLeftRadius = {
-  property: "borderBottomLeftRadius",
-  scale: "radii"
-};
-config14.borderBottomRightRadius = {
-  property: "borderBottomRightRadius",
-  scale: "radii"
-};
-config14.borderLeftWidth = {
-  property: "borderLeftWidth",
-  scale: "borderWidths"
-};
-config14.borderLeftColor = {
-  property: "borderLeftColor",
-  scale: "colors"
-};
-config14.borderLeftStyle = {
-  property: "borderLeftStyle",
-  scale: "borderStyles"
-};
-config14.borderRightWidth = {
-  property: "borderRightWidth",
-  scale: "borderWidths"
-};
-config14.borderRightColor = {
-  property: "borderRightColor",
-  scale: "colors"
-};
-config14.borderRightStyle = {
-  property: "borderRightStyle",
-  scale: "borderStyles"
-};
-var border2 = system3(config14);
-var index_esm_default16 = border2;
-
-// node_modules/@styled-system/background/dist/index.esm.js
-init_react_shim();
-var config15 = {
-  background: true,
-  backgroundImage: true,
-  backgroundSize: true,
-  backgroundPosition: true,
-  backgroundRepeat: true
-};
-config15.bgImage = config15.backgroundImage;
-config15.bgSize = config15.backgroundSize;
-config15.bgPosition = config15.backgroundPosition;
-config15.bgRepeat = config15.backgroundRepeat;
-var background2 = system3(config15);
-var index_esm_default17 = background2;
-
-// node_modules/@styled-system/position/dist/index.esm.js
-init_react_shim();
-var defaults9 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var config16 = {
-  position: true,
-  zIndex: {
-    property: "zIndex",
-    scale: "zIndices"
-  },
-  top: {
-    property: "top",
-    scale: "space",
-    defaultScale: defaults9.space
-  },
-  right: {
-    property: "right",
-    scale: "space",
-    defaultScale: defaults9.space
-  },
-  bottom: {
-    property: "bottom",
-    scale: "space",
-    defaultScale: defaults9.space
-  },
-  left: {
-    property: "left",
-    scale: "space",
-    defaultScale: defaults9.space
-  }
-};
-var position2 = system3(config16);
-var index_esm_default18 = position2;
-
-// node_modules/@styled-system/space/dist/index.esm.js
-init_react_shim();
-var defaults10 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
-};
-var isNumber7 = function isNumber8(n) {
-  return typeof n === "number" && !isNaN(n);
-};
-var getMargin3 = function getMargin4(n, scale) {
-  if (!isNumber7(n)) {
-    return get5(scale, n, n);
-  }
-  var isNegative = n < 0;
-  var absolute = Math.abs(n);
-  var value = get5(scale, absolute, absolute);
-  if (!isNumber7(value)) {
-    return isNegative ? "-" + value : value;
-  }
-  return value * (isNegative ? -1 : 1);
-};
-var configs2 = {};
-configs2.margin = {
-  margin: {
-    property: "margin",
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginTop: {
-    property: "marginTop",
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginRight: {
-    property: "marginRight",
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginBottom: {
-    property: "marginBottom",
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginLeft: {
-    property: "marginLeft",
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginX: {
-    properties: ["marginLeft", "marginRight"],
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  },
-  marginY: {
-    properties: ["marginTop", "marginBottom"],
-    scale: "space",
-    transform: getMargin3,
-    defaultScale: defaults10.space
-  }
-};
-configs2.margin.m = configs2.margin.margin;
-configs2.margin.mt = configs2.margin.marginTop;
-configs2.margin.mr = configs2.margin.marginRight;
-configs2.margin.mb = configs2.margin.marginBottom;
-configs2.margin.ml = configs2.margin.marginLeft;
-configs2.margin.mx = configs2.margin.marginX;
-configs2.margin.my = configs2.margin.marginY;
-configs2.padding = {
-  padding: {
-    property: "padding",
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingTop: {
-    property: "paddingTop",
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingRight: {
-    property: "paddingRight",
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingBottom: {
-    property: "paddingBottom",
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingLeft: {
-    property: "paddingLeft",
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingX: {
-    properties: ["paddingLeft", "paddingRight"],
-    scale: "space",
-    defaultScale: defaults10.space
-  },
-  paddingY: {
-    properties: ["paddingTop", "paddingBottom"],
-    scale: "space",
-    defaultScale: defaults10.space
-  }
-};
-configs2.padding.p = configs2.padding.padding;
-configs2.padding.pt = configs2.padding.paddingTop;
-configs2.padding.pr = configs2.padding.paddingRight;
-configs2.padding.pb = configs2.padding.paddingBottom;
-configs2.padding.pl = configs2.padding.paddingLeft;
-configs2.padding.px = configs2.padding.paddingX;
-configs2.padding.py = configs2.padding.paddingY;
-var margin2 = system3(configs2.margin);
-var padding2 = system3(configs2.padding);
-var space2 = compose3(margin2, padding2);
-
-// node_modules/@styled-system/shadow/dist/index.esm.js
-init_react_shim();
-var shadow2 = system3({
-  boxShadow: {
-    property: "boxShadow",
-    scale: "shadows"
-  },
-  textShadow: {
-    property: "textShadow",
-    scale: "shadows"
-  }
-});
-
-// node_modules/@styled-system/variant/dist/index.esm.js
-init_react_shim();
-
-// node_modules/@styled-system/css/dist/index.esm.js
-init_react_shim();
-function _extends2() {
-  _extends2 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends2.apply(this, arguments);
-}
-var get7 = function get8(obj, key, def, p, undef) {
-  key = key && key.split ? key.split(".") : [key];
-  for (p = 0; p < key.length; p++) {
-    obj = obj ? obj[key[p]] : undef;
-  }
-  return obj === undef ? def : obj;
-};
-var defaultBreakpoints2 = [40, 52, 64].map(function(n) {
-  return n + "em";
-});
-var defaultTheme2 = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
-};
-var aliases2 = {
-  bg: "backgroundColor",
-  m: "margin",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft",
-  mx: "marginX",
-  my: "marginY",
-  p: "padding",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  px: "paddingX",
-  py: "paddingY"
-};
-var multiples2 = {
-  marginX: ["marginLeft", "marginRight"],
-  marginY: ["marginTop", "marginBottom"],
-  paddingX: ["paddingLeft", "paddingRight"],
-  paddingY: ["paddingTop", "paddingBottom"],
-  size: ["width", "height"]
-};
-var scales2 = {
-  color: "colors",
-  backgroundColor: "colors",
-  borderColor: "colors",
-  margin: "space",
-  marginTop: "space",
-  marginRight: "space",
-  marginBottom: "space",
-  marginLeft: "space",
-  marginX: "space",
-  marginY: "space",
-  padding: "space",
-  paddingTop: "space",
-  paddingRight: "space",
-  paddingBottom: "space",
-  paddingLeft: "space",
-  paddingX: "space",
-  paddingY: "space",
-  top: "space",
-  right: "space",
-  bottom: "space",
-  left: "space",
-  gridGap: "space",
-  gridColumnGap: "space",
-  gridRowGap: "space",
-  gap: "space",
-  columnGap: "space",
-  rowGap: "space",
-  fontFamily: "fonts",
-  fontSize: "fontSizes",
-  fontWeight: "fontWeights",
-  lineHeight: "lineHeights",
-  letterSpacing: "letterSpacings",
-  border: "borders",
-  borderTop: "borders",
-  borderRight: "borders",
-  borderBottom: "borders",
-  borderLeft: "borders",
-  borderWidth: "borderWidths",
-  borderStyle: "borderStyles",
-  borderRadius: "radii",
-  borderTopRightRadius: "radii",
-  borderTopLeftRadius: "radii",
-  borderBottomRightRadius: "radii",
-  borderBottomLeftRadius: "radii",
-  borderTopWidth: "borderWidths",
-  borderTopColor: "colors",
-  borderTopStyle: "borderStyles",
-  borderBottomWidth: "borderWidths",
-  borderBottomColor: "colors",
-  borderBottomStyle: "borderStyles",
-  borderLeftWidth: "borderWidths",
-  borderLeftColor: "colors",
-  borderLeftStyle: "borderStyles",
-  borderRightWidth: "borderWidths",
-  borderRightColor: "colors",
-  borderRightStyle: "borderStyles",
-  outlineColor: "colors",
-  boxShadow: "shadows",
-  textShadow: "shadows",
-  zIndex: "zIndices",
-  width: "sizes",
-  minWidth: "sizes",
-  maxWidth: "sizes",
-  height: "sizes",
-  minHeight: "sizes",
-  maxHeight: "sizes",
-  flexBasis: "sizes",
-  size: "sizes",
-  fill: "colors",
-  stroke: "colors"
-};
-var positiveOrNegative3 = function positiveOrNegative4(scale, value) {
-  if (typeof value !== "number" || value >= 0) {
-    return get7(scale, value, value);
-  }
-  var absolute = Math.abs(value);
-  var n = get7(scale, absolute, absolute);
-  if (typeof n === "string")
-    return "-" + n;
-  return n * -1;
-};
-var transforms2 = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
-  var _extends22;
-  return _extends2({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative3, _extends22));
-}, {});
-var responsive3 = function responsive4(styles) {
-  return function(theme) {
-    var next = {};
-    var breakpoints = get7(theme, "breakpoints", defaultBreakpoints2);
-    var mediaQueries = [null].concat(breakpoints.map(function(n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
-    for (var key in styles) {
-      var value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
-      if (value == null)
-        continue;
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-        if (!media) {
-          next[key] = value[i];
-          continue;
-        }
-        next[media] = next[media] || {};
-        if (value[i] == null)
-          continue;
-        next[media][key] = value[i];
-      }
-    }
-    return next;
-  };
-};
-var css3 = function css4(args) {
-  return function(props2) {
-    if (props2 === void 0) {
-      props2 = {};
-    }
-    var theme = _extends2({}, defaultTheme2, {}, props2.theme || props2);
-    var result = {};
-    var obj = typeof args === "function" ? args(theme) : args;
-    var styles = responsive3(obj)(theme);
-    for (var key in styles) {
-      var x = styles[key];
-      var val = typeof x === "function" ? x(theme) : x;
-      if (key === "variant") {
-        var variant5 = css4(get7(theme, val))(theme);
-        result = _extends2({}, result, {}, variant5);
-        continue;
-      }
-      if (val && typeof val === "object") {
-        result[key] = css4(val)(theme);
-        continue;
-      }
-      var prop = get7(aliases2, key, key);
-      var scaleName = get7(scales2, prop);
-      var scale = get7(theme, scaleName, get7(theme, prop, {}));
-      var transform2 = get7(transforms2, prop, get7);
-      var value = transform2(scale, val, val);
-      if (multiples2[prop]) {
-        var dirs = multiples2[prop];
-        for (var i = 0; i < dirs.length; i++) {
-          result[dirs[i]] = value;
-        }
-      } else {
-        result[prop] = value;
-      }
-    }
-    return result;
-  };
-};
-var index_esm_default19 = css3;
-
-// node_modules/@styled-system/variant/dist/index.esm.js
-var variant3 = function variant4(_ref) {
-  var _config;
-  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
-  var sx;
-  if (Object.keys(variants).length) {
-    sx = function sx2(value, scale2, props2) {
-      return index_esm_default19(get5(scale2, value, null))(props2.theme);
-    };
-  } else {
-    sx = function sx2(value, scale2) {
-      return get5(scale2, value, null);
-    };
-  }
-  sx.scale = scale || key;
-  sx.defaults = variants;
-  var config17 = (_config = {}, _config[prop] = sx, _config);
-  var parser = createParser3(config17);
-  return parser;
-};
-var buttonStyle2 = variant3({
-  key: "buttons"
-});
-var textStyle2 = variant3({
-  key: "textStyles",
-  prop: "textStyle"
-});
-var colorStyle2 = variant3({
-  key: "colorStyles",
-  prop: "colors"
-});
-
-// node_modules/styled-system/dist/index.esm.js
-var width2 = index_esm_default11.width;
-var height2 = index_esm_default11.height;
-var minWidth2 = index_esm_default11.minWidth;
-var minHeight2 = index_esm_default11.minHeight;
-var maxWidth2 = index_esm_default11.maxWidth;
-var maxHeight2 = index_esm_default11.maxHeight;
-var size2 = index_esm_default11.size;
-var verticalAlign2 = index_esm_default11.verticalAlign;
-var display2 = index_esm_default11.display;
-var overflow2 = index_esm_default11.overflow;
-var overflowX2 = index_esm_default11.overflowX;
-var overflowY2 = index_esm_default11.overflowY;
-var opacity2 = index_esm_default12.opacity;
-var fontSize2 = index_esm_default13.fontSize;
-var fontFamily2 = index_esm_default13.fontFamily;
-var fontWeight2 = index_esm_default13.fontWeight;
-var lineHeight2 = index_esm_default13.lineHeight;
-var textAlign2 = index_esm_default13.textAlign;
-var fontStyle2 = index_esm_default13.fontStyle;
-var letterSpacing2 = index_esm_default13.letterSpacing;
-var alignItems2 = index_esm_default14.alignItems;
-var alignContent2 = index_esm_default14.alignContent;
-var justifyItems2 = index_esm_default14.justifyItems;
-var justifyContent2 = index_esm_default14.justifyContent;
-var flexWrap2 = index_esm_default14.flexWrap;
-var flexDirection2 = index_esm_default14.flexDirection;
-var flex2 = index_esm_default14.flex;
-var flexGrow2 = index_esm_default14.flexGrow;
-var flexShrink2 = index_esm_default14.flexShrink;
-var flexBasis2 = index_esm_default14.flexBasis;
-var justifySelf2 = index_esm_default14.justifySelf;
-var alignSelf2 = index_esm_default14.alignSelf;
-var order2 = index_esm_default14.order;
-var gridGap2 = index_esm_default15.gridGap;
-var gridColumnGap2 = index_esm_default15.gridColumnGap;
-var gridRowGap2 = index_esm_default15.gridRowGap;
-var gridColumn2 = index_esm_default15.gridColumn;
-var gridRow2 = index_esm_default15.gridRow;
-var gridAutoFlow2 = index_esm_default15.gridAutoFlow;
-var gridAutoColumns2 = index_esm_default15.gridAutoColumns;
-var gridAutoRows2 = index_esm_default15.gridAutoRows;
-var gridTemplateColumns2 = index_esm_default15.gridTemplateColumns;
-var gridTemplateRows2 = index_esm_default15.gridTemplateRows;
-var gridTemplateAreas2 = index_esm_default15.gridTemplateAreas;
-var gridArea2 = index_esm_default15.gridArea;
-var borderWidth2 = index_esm_default16.borderWidth;
-var borderStyle2 = index_esm_default16.borderStyle;
-var borderColor2 = index_esm_default16.borderColor;
-var borderTop2 = index_esm_default16.borderTop;
-var borderRight2 = index_esm_default16.borderRight;
-var borderBottom2 = index_esm_default16.borderBottom;
-var borderLeft2 = index_esm_default16.borderLeft;
-var borderRadius2 = index_esm_default16.borderRadius;
-var backgroundImage2 = index_esm_default17.backgroundImage;
-var backgroundSize2 = index_esm_default17.backgroundSize;
-var backgroundPosition2 = index_esm_default17.backgroundPosition;
-var backgroundRepeat2 = index_esm_default17.backgroundRepeat;
-var zIndex2 = index_esm_default18.zIndex;
-var top2 = index_esm_default18.top;
-var right2 = index_esm_default18.right;
-var bottom2 = index_esm_default18.bottom;
-var left2 = index_esm_default18.left;
-
-// node_modules/@styled-system/should-forward-prop/dist/index.esm.js
-var all = compose3(space2, typography2, color2, layout2, flexbox2, border2, background2, position2, grid2, shadow2, buttonStyle2, textStyle2, colorStyle2);
-var props = all.propNames;
-var createShouldForwardProp = function createShouldForwardProp2(props2) {
-  var regex = new RegExp("^(" + props2.join("|") + ")$");
-  return emotion_memoize_browser_esm_default(function(prop) {
-    return is_prop_valid_browser_esm_default(prop) && !regex.test(prop);
-  });
-};
-var index_esm_default21 = createShouldForwardProp(props);
 
 // libs/shared/ui-system/src/core/props/index.ts
+import {compose} from "https://jspm.dev/@class101/styled-system@5.3.1";
+import {createShouldForwardProp} from "https://jspm.dev/@styled-system/should-forward-prop@5.1.5";
 import {action} from "./action.js";
 import {animator} from "./animator.js";
-import {background as background3} from "./background.js";
-import {border as border3} from "./border.js";
-import {color as color3} from "./color.js";
-import {flexbox as flexbox3} from "./flexbox.js";
+import {background} from "./background.js";
+import {border} from "./border.js";
+import {color} from "./color.js";
+import {flexbox} from "./flexbox.js";
 import {image} from "./image.js";
 import {video} from "./video.js";
-import {layout as layout3} from "./layout.js";
-import {position as position3} from "./position.js";
-import {shadow as shadow3} from "./shadow.js";
-import {space as space3} from "./space.js";
-import {typography as typography3} from "./typography.js";
+import {layout} from "./layout.js";
+import {position} from "./position.js";
+import {shadow} from "./shadow.js";
+import {space} from "./space.js";
+import {typography} from "./typography.js";
 import {transition} from "./transition.js";
 import {transform} from "./transform.js";
 import {icon} from "./icon.js";
 import {skipForwardProps} from "./utils/skipForwardProps.js";
-var styledSystem = compose(action, animator, background3, border3, color3, flexbox3, icon, image, layout3, position3, space3, shadow3, typography3, transform, transition, transform, video);
+var styledSystem = compose(action, animator, background, border, color, flexbox, icon, image, layout, position, space, shadow, typography, transform, transition, transform, video);
 var shouldForwardProp = createShouldForwardProp(styledSystem.propNames);
 export {
   action,
   animator,
-  background3 as background,
-  border3 as border,
-  color3 as color,
-  flexbox3 as flexbox,
+  background,
+  border,
+  color,
+  flexbox,
   icon,
   image,
-  layout3 as layout,
-  position3 as position,
-  shadow3 as shadow,
+  layout,
+  position,
+  shadow,
   shouldForwardProp,
   skipForwardProps,
-  space3 as space,
+  space,
   styledSystem,
   transform,
-  typography3 as typography,
+  typography,
   video
 };
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/