@class101/cdn-ui-system 0.0.7 → 0.0.11

package/chunk-XXMJSYNO.js

@@ -0,0 +1,952 @@
+import {
+  require_object_assign
+} from "./chunk-R4HM35UZ.js";
+import {
+  __toModule,
+  init_react_shim
+} from "./chunk-VIIHQGZ3.js";
+
+// 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 config = {
+  width: {
+    property: "width",
+    scale: "sizes"
+  },
+  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__border/dist/index.esm.js
+init_react_shim();
+var config5 = {
+  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"
+  }
+};
+config5.borderTopWidth = {
+  property: "borderTopWidth",
+  scale: "borderWidths"
+};
+config5.borderTopColor = {
+  property: "borderTopColor",
+  scale: "colors"
+};
+config5.borderTopStyle = {
+  property: "borderTopStyle",
+  scale: "borderStyles"
+};
+config5.borderTopLeftRadius = {
+  property: "borderTopLeftRadius",
+  scale: "radii"
+};
+config5.borderTopRightRadius = {
+  property: "borderTopRightRadius",
+  scale: "radii"
+};
+config5.borderBottomWidth = {
+  property: "borderBottomWidth",
+  scale: "borderWidths"
+};
+config5.borderBottomColor = {
+  property: "borderBottomColor",
+  scale: "colors"
+};
+config5.borderBottomStyle = {
+  property: "borderBottomStyle",
+  scale: "borderStyles"
+};
+config5.borderBottomLeftRadius = {
+  property: "borderBottomLeftRadius",
+  scale: "radii"
+};
+config5.borderBottomRightRadius = {
+  property: "borderBottomRightRadius",
+  scale: "radii"
+};
+config5.borderLeftWidth = {
+  property: "borderLeftWidth",
+  scale: "borderWidths"
+};
+config5.borderLeftColor = {
+  property: "borderLeftColor",
+  scale: "colors"
+};
+config5.borderLeftStyle = {
+  property: "borderLeftStyle",
+  scale: "borderStyles"
+};
+config5.borderRightWidth = {
+  property: "borderRightWidth",
+  scale: "borderWidths"
+};
+config5.borderRightColor = {
+  property: "borderRightColor",
+  scale: "colors"
+};
+config5.borderRightStyle = {
+  property: "borderRightStyle",
+  scale: "borderStyles"
+};
+var border = system(config5);
+var index_esm_default5 = border;
+
+// node_modules/@class101/styled-system__background/dist/index.esm.js
+init_react_shim();
+var config6 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config6.bgImage = config6.backgroundImage;
+config6.bgSize = config6.backgroundSize;
+config6.bgPosition = config6.backgroundPosition;
+config6.bgRepeat = config6.backgroundRepeat;
+var background = system(config6);
+var index_esm_default6 = background;
+
+// node_modules/@class101/styled-system__position/dist/index.esm.js
+init_react_shim();
+var defaults3 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config7 = {
+  position: true,
+  zIndex: {
+    property: "zIndex",
+    scale: "zIndices"
+  },
+  top: {
+    property: "top",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  right: {
+    property: "right",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  bottom: {
+    property: "bottom",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  left: {
+    property: "left",
+    scale: "space",
+    defaultScale: defaults3.space
+  }
+};
+var position = system(config7);
+var index_esm_default7 = position;
+
+// node_modules/@class101/styled-system__space/dist/index.esm.js
+init_react_shim();
+var defaults4 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber = function isNumber2(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getMargin = function getMargin2(n, scale) {
+  if (!isNumber(n)) {
+    return get(scale, n, n);
+  }
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute, absolute);
+  if (!isNumber(value)) {
+    return isNegative ? "-" + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: "margin",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginTop: {
+    property: "marginTop",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginRight: {
+    property: "marginRight",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginBottom: {
+    property: "marginBottom",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginLeft: {
+    property: "marginLeft",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginX: {
+    properties: ["marginLeft", "marginRight"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginY: {
+    properties: ["marginTop", "marginBottom"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.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: defaults4.space
+  },
+  paddingTop: {
+    property: "paddingTop",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingRight: {
+    property: "paddingRight",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingBottom: {
+    property: "paddingBottom",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingLeft: {
+    property: "paddingLeft",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingX: {
+    properties: ["paddingLeft", "paddingRight"],
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingY: {
+    properties: ["paddingTop", "paddingBottom"],
+    scale: "space",
+    defaultScale: defaults4.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_default8 = 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_default8(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
+init_react_shim();
+
+// node_modules/@class101/styled-system__grid/dist/index.esm.js
+init_react_shim();
+var defaults5 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config8 = {
+  gridGap: {
+    property: "gridGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridColumnGap: {
+    property: "gridColumnGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridRowGap: {
+    property: "gridRowGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config8);
+var index_esm_default9 = grid;
+
+// 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_default9.gridGap;
+var gridColumnGap = index_esm_default9.gridColumnGap;
+var gridRowGap = index_esm_default9.gridRowGap;
+var gridColumn = index_esm_default9.gridColumn;
+var gridRow = index_esm_default9.gridRow;
+var gridAutoFlow = index_esm_default9.gridAutoFlow;
+var gridAutoColumns = index_esm_default9.gridAutoColumns;
+var gridAutoRows = index_esm_default9.gridAutoRows;
+var gridTemplateColumns = index_esm_default9.gridTemplateColumns;
+var gridTemplateRows = index_esm_default9.gridTemplateRows;
+var gridTemplateAreas = index_esm_default9.gridTemplateAreas;
+var gridArea = index_esm_default9.gridArea;
+var borderWidth = index_esm_default5.borderWidth;
+var borderStyle = index_esm_default5.borderStyle;
+var borderColor = index_esm_default5.borderColor;
+var borderTop = index_esm_default5.borderTop;
+var borderRight = index_esm_default5.borderRight;
+var borderBottom = index_esm_default5.borderBottom;
+var borderLeft = index_esm_default5.borderLeft;
+var borderRadius = index_esm_default5.borderRadius;
+var backgroundImage = index_esm_default6.backgroundImage;
+var backgroundSize = index_esm_default6.backgroundSize;
+var backgroundPosition = index_esm_default6.backgroundPosition;
+var backgroundRepeat = index_esm_default6.backgroundRepeat;
+var zIndex = index_esm_default7.zIndex;
+var top = index_esm_default7.top;
+var right = index_esm_default7.right;
+var bottom = index_esm_default7.bottom;
+var left = index_esm_default7.left;
+
+export {
+  system,
+  compose,
+  layout,
+  color,
+  typography,
+  flexbox,
+  border,
+  background,
+  position,
+  space,
+  shadow,
+  variant
+};