@class101/cdn-ui-system 0.0.3 → 0.0.7

package/core/props/image.js

@@ -1,1047 +1,8 @@
-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 order2 = Object.getOwnPropertyNames(test2).map(function(n) {
-          return test2[n];
-        });
-        if (order2.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/image.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(config9) {
-  var cache = {};
-  var parse = function parse2(props) {
-    var styles = {};
-    var shouldSort = false;
-    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
-    for (var _key in props) {
-      if (!config9[_key])
-        continue;
-      var sx = config9[_key];
-      var raw = props[_key];
-      var scale = get(props.theme, sx.scale, sx.defaults);
-      if (typeof raw === "object" && Array.isArray(raw)) {
-        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
-        cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
-        styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
-        continue;
-      }
-      (0, import_object_assign.default)(styles, sx(raw, scale, props));
-    }
-    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 = config9;
-  parse.propNames = Object.keys(config9);
-  parse.cache = cache;
-  var keys = Object.keys(config9).filter(function(k) {
-    return k !== "config";
-  });
-  if (keys.length > 1) {
-    keys.forEach(function(key) {
-      var _createParser;
-      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[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, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
-  properties = properties || [property];
-  var sx = function sx2(value, scale2, _props) {
-    var result = {};
-    var n = transform(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 config9 = {};
-  Object.keys(args).forEach(function(key) {
-    var conf = args[key];
-    if (conf === true) {
-      config9[key] = createStyleFunction({
-        property: key,
-        scale: key
-      });
-      return;
-    }
-    if (typeof conf === "function") {
-      config9[key] = conf;
-      return;
-    }
-    config9[key] = createStyleFunction(conf);
-  });
-  var parser = createParser(config9);
-  return parser;
-};
-var compose = function compose2() {
-  var config9 = {};
-  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)(config9, parser2.config);
-  });
-  var parser = createParser(config9);
-  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 _extends2;
-  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
-}, {});
-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(props) {
-    if (props === void 0) {
-      props = {};
-    }
-    var theme = _extends({}, defaultTheme, props.theme || props);
-    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 variant3 = css2(get3(theme, val))(theme);
-        result = _extends({}, result, variant3);
-        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 transform = get3(transforms, prop, get3);
-      var value = transform(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, props) {
-      return index_esm_default9(get(scale2, value, null))(props.theme);
-    };
-  } else {
-    sx = function sx2(value, scale2) {
-      return get(scale2, value, null);
-    };
-  }
-  sx.scale = scale || key;
-  sx.defaults = variants;
-  var config9 = (_config = {}, _config[prop] = sx, _config);
-  var parser = createParser(config9);
-  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;
 
 // libs/shared/ui-system/src/core/props/image.ts
+import {compose, system} from "https://jspm.dev/@class101/styled-system@5.3.1";
 var objectFit = system({
   objectFit: true
 });
@@ -1049,8 +10,3 @@ var image = compose(objectFit);
 export {
   image
 };
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/