@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/system/colors/utils.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { darken, setLightness, parseToRgb, parseToHsl, rgba, mix, getLuminance, toColorString } from 'polished';
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function setAlphaChannel(alpha, color) {
+  if (typeof alpha !== 'undefined') {
+    var _parseToRgb = parseToRgb(color),
+        red = _parseToRgb.red,
+        green = _parseToRgb.green,
+        blue = _parseToRgb.blue;
+
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
+  } else {
+    return color;
+  }
+}
+export function generateColorScale(_ref) {
+  var _ref2;
+
+  var key = _ref.key,
+      baseColor = _ref.baseColor;
+  return _ref2 = {}, _ref2[key + "-lightest"] = setLightness(0.94, baseColor), _ref2[key + "-lighter"] = setLightness(0.92, baseColor), _ref2[key + "-light"] = setLightness(0.7, baseColor), _ref2[key] = baseColor, _ref2[key + "-dark"] = darken(0.04, baseColor), _ref2[key + "-darker"] = darken(0.08, baseColor), _ref2[key + "-darkest"] = darken(0.16, baseColor), _ref2;
+}
+export function eachPalette(palette, getColor) {
+  return Object.keys(palette).map(function (key) {
+    var colorSet = palette[key];
+    var nextColors;
+
+    if (typeof colorSet === 'string') {
+      var _nextColors;
+
+      nextColors = (_nextColors = {}, _nextColors[key] = colorSet, _nextColors);
+    } else if (Array.isArray(colorSet)) {
+      // deal with scale values: color, color-0, color-1, etc.
+      nextColors = colorSet.reduce(function (flatColors, color, index) {
+        var _objectSpread2;
+
+        return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread2 = {}, _objectSpread2[key + "-" + index] = color, _objectSpread2));
+      }, {});
+    } else {
+      // if palette contains a "base" key spread under key name: primary, primary-light, etc.
+      if (colorSet.base) {
+        nextColors = Object.keys(colorSet).reduce(function (flatColors, colorSetKey) {
+          var _objectSpread3;
+
+          return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread3 = {}, _objectSpread3[colorSetKey === 'base' ? key : key + "-" + colorSetKey] = colorSet[colorSetKey], _objectSpread3));
+        }, {});
+      } else {
+        nextColors = Object.keys(colorSet).reduce(function (flatColors, colorSetKey) {
+          var _objectSpread4;
+
+          return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread4 = {}, _objectSpread4[colorSetKey] = colorSet[colorSetKey], _objectSpread4));
+        }, {});
+      }
+    }
+
+    return getColor({
+      name: capitalizeFirstLetter(key),
+      colors: nextColors
+    });
+  });
+}
+export function flattenPalette(palette) {
+  var parsedPalette = eachPalette(palette, function (_ref3) {
+    var colors = _ref3.colors;
+    return colors;
+  }).reduce(function (prevColors, nextColors) {
+    return _objectSpread(_objectSpread({}, prevColors), nextColors);
+  }, {}); // now that we have a resolved collection, run through it again to fill in any aliased colors
+
+  return Object.keys(parsedPalette).reduce(function (collection, key) {
+    var _objectSpread5;
+
+    var value = parsedPalette[key];
+    var aliasValue = parsedPalette[value];
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+  }, {});
+} // ported from ChromaJS
+// https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee
+
+var EPS = 1e-7;
+export function adjustLightness(amount, color) {
+  var _parseToRgb2 = parseToRgb(color),
+      _parseToRgb2$alpha = _parseToRgb2.alpha,
+      alpha = _parseToRgb2$alpha === void 0 ? 1 : _parseToRgb2$alpha;
+
+  var rgb;
+
+  if (amount === 0) {
+    rgb = rgba(0, 0, 0, alpha);
+  } else if (amount === 1) {
+    rgb = rgba(255, 255, 255, alpha);
+  } else {
+    var maxIteration = 20;
+
+    var test = function test(color1, color2) {
+      var mixed = mix(0.5, color1, color2);
+      var mixedlightness = getLuminance(mixed);
+
+      if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
+        return mixed;
+      }
+
+      if (mixedlightness > amount) {
+        return test(color1, mixed);
+      }
+
+      return test(mixed, color2);
+    };
+
+    rgb = getLuminance(color) > amount ? test('#000', color) : test(color, '#fff');
+  }
+
+  return rgb;
+}
+export function adjustSaturation(amount, color) {
+  var hsl = parseToHsl(color);
+  hsl.saturation += hsl.saturation * amount;
+  return toColorString(hsl);
+} // Color pallette functions
+
+export function createTone(color, desaturate) {
+  if (desaturate === void 0) {
+    desaturate = 0.5;
+  }
+
+  return function (value) {
+    // we clamp the number so we can generate better shades if 0 or 1 are passed,
+    // otherwise these colors would be pure black or white
+    var lightnessAmount = Math.min(Math.max(value, 0.05), 0.95);
+    return adjustSaturation(-value * desaturate, adjustLightness(lightnessAmount, color));
+  };
+} // calculations repurposed from jxnblk
+// https://github.com/jxnblk/monochrome/blob/master/src/palette.js#L22-L34
+
+export function createTones(color, desaturate) {
+  var tone = createTone(color, desaturate);
+  var lightness = getLuminance(color);
+  var lowerstep = lightness / 5;
+  var upperstep = (1 - lightness) / 6;
+  var lower = [4, 3, 2, 1].map(function (step) {
+    return tone(step * lowerstep);
+  });
+  var upper = [5, 4, 3, 2, 1, 0].map(function (step) {
+    return tone(lightness + step * upperstep);
+  });
+  return [].concat(upper, lower);
+}
+export function createColorScale(color, desaturate) {
+  return {
+    base: color,
+    text: getLuminance(color) < 0.5 ? '#fff' : '#000',
+    tone: createTone(color, desaturate),
+    tones: createTones(color, desaturate)
+  };
+}
+export function createColorScales(colors, desaturate) {
+  function colorReducer(parsedColors, key) {
+    var _objectSpread6;
+
+    return _objectSpread(_objectSpread({}, parsedColors), {}, (_objectSpread6 = {}, _objectSpread6[key] = createColorScale(colors[key], desaturate), _objectSpread6));
+  }
+
+  return Object.keys(colors).reduce(colorReducer, {});
+}
+export function flattenColorScales(colors) {
+  return Object.keys(colors).reduce(function (parsedColors, key) {
+    var color = colors[key];
+    parsedColors[key] = color.base;
+    color.tones.forEach(function (tone, index) {
+      parsedColors[key + "-" + index] = tone;
+    });
+    return parsedColors;
+  }, {});
+}

package/dist/esm/system/css.js

@@ -0,0 +1,6 @@
+import { parseCssStyles } from './parse-styles';
+export default (function (styles) {
+  return function (theme) {
+    return parseCssStyles(styles, null, theme);
+  };
+});

package/dist/esm/system/cxs.js

@@ -0,0 +1,101 @@
+var cache = {};
+var prefix = 'x';
+var isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
+var rules = [];
+
+var insert = function insert(rule) {
+  return rules.push(rule);
+};
+
+var hyphen = function hyphen(str) {
+  return str.replace(/[A-Z]|^ms/g, '-$&').toLowerCase();
+};
+
+var wrapMediaQuery = function wrapMediaQuery(rule, media) {
+  return media === '' ? rule : media + "{" + rule + "}";
+};
+
+var createRule = function createRule(name, selector, prop, value) {
+  var className = selector === '' ? "." + name : selector.includes('&') ? selector.replace('&', "." + name) : "." + name + selector;
+  return className.trim() + "{" + hyphen(prop) + ":" + value + "}";
+};
+
+function parse(styles, selector, parentMedia) {
+  if (selector === void 0) {
+    selector = '';
+  }
+
+  if (parentMedia === void 0) {
+    parentMedia = '';
+  }
+
+  var className = '';
+
+  for (var key in styles) {
+    var value = styles[key];
+
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    if (typeof value === 'object') {
+      var media = /^@/.test(key) ? key : null;
+      var chainedSelector = media ? selector : key.startsWith(':') ? "" + selector + key : selector + " " + key;
+      className += parse(value, chainedSelector, media || parentMedia);
+      continue;
+    }
+
+    var cacheKey = key + value + selector + parentMedia;
+
+    if (cache[cacheKey]) {
+      className += ' ' + cache[cacheKey];
+    } else {
+      var utilityClassName = prefix + rules.length.toString(36);
+      var rule = wrapMediaQuery(createRule(utilityClassName, selector, key, value), parentMedia);
+      insert(rule);
+      cache[cacheKey] = utilityClassName;
+      className += ' ' + utilityClassName;
+    }
+  }
+
+  return className;
+}
+
+function cxs() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+
+  return styles.map(function (style) {
+    return parse(style);
+  }).join(' ').trim();
+}
+
+cxs.css = function () {
+  return rules.sort().join('');
+};
+
+cxs.reset = function () {
+  cache = {};
+
+  while (rules.length) {
+    rules.pop();
+  }
+};
+
+if (typeof document !== 'undefined') {
+  var sheet = document.head.appendChild(document.createElement('style')).sheet;
+
+  insert = function insert(rule) {
+    try {
+      rules.push(rule);
+      sheet.insertRule(rule, sheet.cssRules.length);
+    } catch (error) {
+      if (isDev) {
+        console.warn('whoops, illegal rule inserted', rule);
+      }
+    }
+  };
+}
+
+export default cxs;

package/dist/esm/system/default-theme.js

@@ -0,0 +1,60 @@
+import icons from '../icons';
+import { boxSizes } from './box-sizes';
+import { buttonThemes } from './button-themes';
+import { colors } from './colors';
+var controlStyles = {
+  fill: 'surfaceTertiary',
+  stroke: 'separatorSecondary',
+  focusStroke: 'blue-5',
+  checkedFill: 'primary-light',
+  checkedStroke: 'primary'
+};
+var defaultTheme = {
+  boxSizes: boxSizes,
+  colors: colors,
+  icons: icons,
+  breakpoints: {
+    xs: 480,
+    sm: 600,
+    md: 720,
+    lg: 960,
+    xl: 1200
+  },
+  button: {
+    themes: buttonThemes
+  },
+  calendar: {
+    weekStartsOn: 0
+  },
+  checkbox: controlStyles,
+  radio: controlStyles,
+  elevations: ['0 2px 5px rgba(219,219,219,0.3)', '0 4px 12px rgba(0,0,0,0.12)', '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)', '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)', '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)', '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)'],
+  fontSizes: [30, 21, 18, 16, 14, 12, 10],
+  lineHeights: [40, 32, 24, 24, 20, 16, 16],
+  group: {
+    radius: 3
+  },
+  spinner: {
+    color: 'primary',
+    sizes: {
+      xxs: 1.5,
+      xs: 1.75,
+      sm: 2,
+      md: 2.5,
+      lg: 3,
+      xl: 5,
+      xxl: 8
+    },
+    thickness: {
+      xxs: 3,
+      xs: 3,
+      sm: 3,
+      md: 4,
+      lg: 5,
+      xl: 7,
+      xxl: 9
+    },
+    trackColor: 'primary-lighter'
+  }
+};
+export default defaultTheme;

package/dist/esm/system/index.js

@@ -0,0 +1,17 @@
+export { boxSizes, getBoxSize } from './box-sizes';
+export { colors, createTones, eachPalette, flattenPalette, generateColorScale, getColor, palette, setAlphaChannel } from './colors';
+export { default as css } from './css';
+export { default as defaultTheme } from './default-theme';
+export { default as border } from './plugins/border';
+export { default as color } from './plugins/color';
+export { default as elevation } from './plugins/elevation';
+export { default as flex } from './plugins/flex';
+export { default as misc } from './plugins/misc';
+export { default as position } from './plugins/position';
+export { default as size } from './plugins/size';
+export { default as space } from './plugins/space';
+export { default as stroke } from './plugins/stroke';
+export { default as typography } from './plugins/typography';
+export { default as splitStyles } from './split-styles';
+export { default as useCss } from './use-css';
+export { getForegroundColor, isLightColor, navigateSize, parseColor, spacing, spacingValue, useBoxSize, useThemeProps, useThemeValue } from './utils';

package/dist/esm/system/parse-styles.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import stylePlugins from './plugins';
+import { colorStyleNames } from './style-names';
+var pluginCount = stylePlugins.length;
+export function parsePluginStyles(initialStyles, componentPlugin, theme) {
+  if (initialStyles === void 0) {
+    initialStyles = {};
+  }
+
+  var nextStyles = _objectSpread({}, initialStyles);
+
+  if (componentPlugin) {
+    nextStyles = componentPlugin.getStyles(nextStyles, theme);
+  }
+
+  for (var index = 0; index < pluginCount; index++) {
+    var stylePlugin = stylePlugins[index];
+    nextStyles = stylePlugin(nextStyles, theme);
+  }
+
+  if (nextStyles.css) {
+    nextStyles = _objectSpread(_objectSpread({}, nextStyles), parseCssStyles(nextStyles.css, componentPlugin, theme));
+    delete nextStyles.css;
+  }
+
+  return nextStyles;
+}
+export function parseStyles(style, plugin, theme) {
+  var parsedStyle = {};
+
+  for (var prop in style) {
+    var value = style[prop];
+    parsedStyle[prop] = colorStyleNames.indexOf(prop) === -1 && typeof value === 'object' ? parseStyles(value, plugin, theme) : value;
+  }
+
+  return parsePluginStyles(parsedStyle, plugin, theme);
+}
+export function parseCssStyles(style, plugin, theme) {
+  return style ? style.constructor === Array ? style.reduce(function (collection, styles) {
+    return _objectSpread(_objectSpread({}, collection), parseStyles(styles, plugin, theme));
+  }, {}) : parseStyles(style, plugin, theme) : null;
+}

package/dist/esm/system/plugins/border.js

@@ -0,0 +1,85 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function appendPixel(value) {
+  return typeof value === 'number' ? value + 'px' : value;
+}
+
+function border(_ref) {
+  var borderWidth = _ref.borderWidth,
+      borderTopWidth = _ref.borderTopWidth,
+      borderRightWidth = _ref.borderRightWidth,
+      borderBottomWidth = _ref.borderBottomWidth,
+      borderLeftWidth = _ref.borderLeftWidth,
+      radius = _ref.radius,
+      radiusTop = _ref.radiusTop,
+      radiusRight = _ref.radiusRight,
+      radiusBottom = _ref.radiusBottom,
+      radiusLeft = _ref.radiusLeft,
+      styles = _objectWithoutPropertiesLoose(_ref, ["borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft"]);
+
+  if (typeof borderWidth !== 'undefined') {
+    styles.borderTopWidth = appendPixel(borderWidth);
+    styles.borderRightWidth = appendPixel(borderWidth);
+    styles.borderBottomWidth = appendPixel(borderWidth);
+    styles.borderLeftWidth = appendPixel(borderWidth);
+  }
+
+  if (typeof borderTopWidth !== 'undefined') {
+    styles.borderTopWidth = appendPixel(borderTopWidth);
+  }
+
+  if (typeof borderRightWidth !== 'undefined') {
+    styles.borderRightWidth = appendPixel(borderRightWidth);
+  }
+
+  if (typeof borderBottomWidth !== 'undefined') {
+    styles.borderBottomWidth = appendPixel(borderBottomWidth);
+  }
+
+  if (typeof borderLeftWidth !== 'undefined') {
+    styles.borderLeftWidth = appendPixel(borderLeftWidth);
+  }
+
+  if (typeof radius !== 'undefined') {
+    if (radius === 'circle') {
+      styles.borderRadius = '100%';
+    } else if (radius === 'pill') {
+      styles.borderRadius = '10em';
+    } else if (radius === 'pill-left') {
+      styles.borderTopLeftRadius = '10em';
+      styles.borderBottomLeftRadius = '10em';
+    } else if (radius === 'pill-right') {
+      styles.borderTopRightRadius = '10em';
+      styles.borderBottomRightRadius = '10em';
+    } else {
+      styles.borderTopLeftRadius = appendPixel(radius);
+      styles.borderTopRightRadius = appendPixel(radius);
+      styles.borderBottomRightRadius = appendPixel(radius);
+      styles.borderBottomLeftRadius = appendPixel(radius);
+    }
+  }
+
+  if (typeof radiusTop !== 'undefined') {
+    styles.borderTopLeftRadius = appendPixel(radiusTop);
+    styles.borderTopRightRadius = appendPixel(radiusTop);
+  }
+
+  if (typeof radiusRight !== 'undefined') {
+    styles.borderTopRightRadius = appendPixel(radiusRight);
+    styles.borderBottomRightRadius = appendPixel(radiusRight);
+  }
+
+  if (typeof radiusBottom !== 'undefined') {
+    styles.borderBottomRightRadius = appendPixel(radiusBottom);
+    styles.borderBottomLeftRadius = appendPixel(radiusBottom);
+  }
+
+  if (typeof radiusLeft !== 'undefined') {
+    styles.borderTopLeftRadius = appendPixel(radiusLeft);
+    styles.borderBottomLeftRadius = appendPixel(radiusLeft);
+  }
+
+  return styles;
+}
+
+export default border;

package/dist/esm/system/plugins/color.js

@@ -0,0 +1,38 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { parseColor } from '../utils';
+import { getCSSProperty } from '../../utils';
+
+function color(_ref, theme) {
+  var backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
+      borderBottomColor = _ref.borderBottomColor,
+      borderLeftColor = _ref.borderLeftColor,
+      borderRightColor = _ref.borderRightColor,
+      borderTopColor = _ref.borderTopColor,
+      color = _ref.color,
+      fill = _ref.fill,
+      stroke = _ref.stroke,
+      styles = _objectWithoutPropertiesLoose(_ref, ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke"]);
+
+  var colorProps = {
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    borderBottomColor: borderBottomColor,
+    borderLeftColor: borderLeftColor,
+    borderRightColor: borderRightColor,
+    borderTopColor: borderTopColor,
+    color: color,
+    fill: fill,
+    stroke: stroke
+  };
+  Object.keys(colorProps).forEach(function (key) {
+    var colorProp = colorProps[key];
+
+    if (colorProp) {
+      styles[key] = theme && theme.colors ? theme.colors[colorProp] ? getCSSProperty('colors', colorProp) : parseColor(colorProp) : parseColor(colorProp);
+    }
+  });
+  return styles;
+}
+
+export default color;

package/dist/esm/system/plugins/elevation.js

@@ -0,0 +1,14 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function elevation(_ref, theme) {
+  var _elevation = _ref.elevation,
+      styles = _objectWithoutPropertiesLoose(_ref, ["elevation"]);
+
+  if (typeof _elevation !== 'undefined') {
+    styles.boxShadow = theme.elevations[parseFloat(_elevation) - 1];
+  }
+
+  return styles;
+}
+
+export default elevation;

package/dist/esm/system/plugins/flex.js

@@ -0,0 +1,75 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { alignTypes, justifyTypes, spacingValue } from '../utils';
+
+function flex(_ref) {
+  if (_ref === void 0) {
+    _ref = {};
+  }
+
+  var _ref2 = _ref,
+      alignItems = _ref2.alignItems,
+      alignSelf = _ref2.alignSelf,
+      basis = _ref2.basis,
+      direction = _ref2.direction,
+      flexBasis = _ref2.flexBasis,
+      flexGrow = _ref2.flexGrow,
+      flexShrink = _ref2.flexShrink,
+      flexWrap = _ref2.flexWrap,
+      grow = _ref2.grow,
+      justifyContent = _ref2.justifyContent,
+      shrink = _ref2.shrink,
+      wrap = _ref2.wrap,
+      styles = _objectWithoutPropertiesLoose(_ref2, ["alignItems", "alignSelf", "basis", "direction", "flexBasis", "flexGrow", "flexShrink", "flexWrap", "grow", "justifyContent", "shrink", "wrap"]);
+
+  if (direction) {
+    styles.flexDirection = direction;
+  }
+
+  if (typeof wrap === 'undefined') {
+    wrap = flexWrap;
+  }
+
+  if (typeof wrap !== 'undefined') {
+    styles.flexWrap = wrap === 'reverse' ? 'wrap-reverse' : wrap === true || wrap === 'wrap' ? 'wrap' : 'nowrap';
+  }
+
+  if (typeof grow === 'undefined') {
+    grow = flexGrow;
+  }
+
+  if (typeof grow !== 'undefined') {
+    styles.flexGrow = grow === true ? 1 : grow;
+  }
+
+  if (typeof shrink === 'undefined') {
+    shrink = flexShrink;
+  }
+
+  if (typeof shrink !== 'undefined') {
+    styles.flexShrink = shrink === true ? 1 : shrink;
+  }
+
+  if (typeof basis === 'undefined') {
+    basis = flexBasis;
+  }
+
+  if (typeof basis !== 'undefined') {
+    styles.flexBasis = spacingValue(basis);
+  }
+
+  if (justifyContent) {
+    styles.justifyContent = justifyTypes[justifyContent] || justifyContent;
+  }
+
+  if (alignItems) {
+    styles.alignItems = alignTypes[alignItems] || alignItems;
+  }
+
+  if (alignSelf) {
+    styles.alignSelf = alignTypes[alignSelf] || alignSelf;
+  }
+
+  return styles;
+}
+
+export default flex;

package/dist/esm/system/plugins/grid.js

@@ -0,0 +1,44 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function grid(_ref) {
+  if (_ref === void 0) {
+    _ref = {};
+  }
+
+  var _ref2 = _ref,
+      column = _ref2.column,
+      columnStart = _ref2.columnStart,
+      columnEnd = _ref2.columnEnd,
+      row = _ref2.row,
+      rowStart = _ref2.rowStart,
+      rowEnd = _ref2.rowEnd,
+      styles = _objectWithoutPropertiesLoose(_ref2, ["column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd"]);
+
+  if (column !== undefined && styles.gridColumn === undefined) {
+    styles.gridColumn = column;
+  }
+
+  if (columnStart !== undefined && styles.gridColumnStart === undefined) {
+    styles.gridColumnStart = columnStart;
+  }
+
+  if (columnEnd !== undefined && styles.gridColumnEnd === undefined) {
+    styles.gridColumnEnd = columnEnd;
+  }
+
+  if (row !== undefined && styles.gridRow === undefined) {
+    styles.gridRow = row;
+  }
+
+  if (rowStart !== undefined && styles.gridRowStart === undefined) {
+    styles.gridRowStart = rowStart;
+  }
+
+  if (rowEnd !== undefined && styles.gridRowEnd === undefined) {
+    styles.gridRowEnd = rowEnd;
+  }
+
+  return styles;
+}
+
+export default grid;