@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.3

package/dist/esm/system/button-themes.js

@@ -0,0 +1,281 @@
+export var buttonThemes = {
+  "default": {
+    fill: {
+      color: 'foreground',
+      backgroundColor: 'grey-3',
+      hover: {
+        backgroundColor: 'grey-4'
+      },
+      active: {
+        backgroundColor: 'grey-5'
+      }
+    },
+    outline: {
+      stroke: 'separatorSecondary',
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    },
+    naked: {
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    }
+  },
+  white: {
+    fill: {
+      color: 'primary',
+      backgroundColor: 'white',
+      hover: {
+        backgroundColor: 'grey-0'
+      },
+      active: {
+        backgroundColor: 'grey-1'
+      }
+    },
+    outline: {
+      stroke: 'white',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  light: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'light-1',
+      hover: {
+        backgroundColor: 'light-2'
+      },
+      active: {
+        backgroundColor: 'light-3'
+      }
+    },
+    outline: {
+      stroke: 'light-3',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'light-9',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  dark: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'dark-0',
+      hover: {
+        backgroundColor: 'dark-1'
+      },
+      active: {
+        backgroundColor: 'dark-2'
+      }
+    },
+    outline: {
+      stroke: 'dark-3',
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    },
+    naked: {
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    }
+  },
+  primary: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'primary',
+      hover: {
+        backgroundColor: 'primary-dark'
+      },
+      active: {
+        backgroundColor: 'primary-darker'
+      }
+    },
+    outline: {
+      stroke: 'primary',
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    },
+    naked: {
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    }
+  },
+  warning: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'yellow-5',
+      hover: {
+        backgroundColor: 'yellow-4'
+      },
+      active: {
+        backgroundColor: 'yellow-3'
+      }
+    },
+    outline: {
+      stroke: 'yellow-5',
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    },
+    naked: {
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    }
+  },
+  error: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'error',
+      hover: {
+        backgroundColor: 'error-dark'
+      },
+      active: {
+        backgroundColor: 'error-darker'
+      }
+    },
+    outline: {
+      stroke: 'error',
+      color: 'error',
+      hover: {
+        backgroundColor: 'error-lightest'
+      },
+      active: {
+        backgroundColor: 'error-lighter'
+      }
+    },
+    naked: {
+      color: 'error',
+      hover: {
+        backgroundColor: 'error-lightest'
+      },
+      active: {
+        backgroundColor: 'error-lighter'
+      }
+    }
+  },
+  success: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'success',
+      hover: {
+        backgroundColor: 'success-dark'
+      },
+      active: {
+        backgroundColor: 'success-darker'
+      }
+    },
+    outline: {
+      stroke: 'success',
+      color: 'success',
+      hover: {
+        backgroundColor: 'success-lightest'
+      },
+      active: {
+        backgroundColor: 'success-lighter'
+      }
+    },
+    naked: {
+      color: 'success',
+      hover: {
+        backgroundColor: 'success-lightest'
+      },
+      active: {
+        backgroundColor: 'success-lighter'
+      }
+    }
+  },
+  info: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-4'
+      },
+      active: {
+        backgroundColor: 'blue-3'
+      }
+    },
+    outline: {
+      stroke: 'blue-5',
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    },
+    naked: {
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    }
+  }
+};

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

@@ -0,0 +1,117 @@
+import { flattenPalette } from './utils'; // NOTE: this is a solution for using the UX palette in Tapestry-React
+// that will likely be replaced with a tokenized palette in the future
+
+var tapestry = {
+  create: {
+    create35: 'hsl(86deg 91% 35% / 100%)'
+  },
+  grays: {
+    light: {
+      neutral62: 'hsl(0deg 0% 62% / 100%)',
+      neutral81: 'hsl(0deg 0% 81% / 100%)'
+    }
+  },
+  interaction: {
+    interaction66: 'hsl(221deg 91% 66% / 100%)'
+  }
+};
+export var palette = {
+  tapestry: tapestry,
+  primary: {
+    lightest: 'hsl(88, 24%, 92%)',
+    lighter: 'hsl(88, 32%, 86%)',
+    light: 'hsl(88, 40%, 54%)',
+    base: 'hsl(88, 44%, 40%)',
+    dark: 'hsl(88, 46%, 36%)',
+    darker: 'hsl(88, 52%, 32%)',
+    darkest: 'hsl(88, 72%, 20%)'
+  },
+  warning: {
+    lightest: 'hsl(42, 87%, 97%)',
+    lighter: 'hsl(42, 87%, 94%)',
+    light: 'hsl(42, 87%, 90%)',
+    base: 'hsl(42, 84%, 63%)',
+    dark: 'hsl(42, 84%, 55%)',
+    darker: 'hsl(42, 84%, 49%)'
+  },
+  error: {
+    lightest: 'hsl(7, 60%, 97%)',
+    lighter: 'hsl(9, 59%, 93%)',
+    light: 'hsl(8, 60%, 85%)',
+    base: 'hsl(8, 60%, 47%)',
+    dark: 'hsl(8, 60%, 45%)',
+    darker: 'hsl(9, 61%, 43%)'
+  },
+  success: {
+    lightest: 'hsl(93, 53%, 97%)',
+    lighter: 'hsl(95, 50%, 91%)',
+    light: 'hsl(86, 91%, 35%)',
+    base: 'hsl(86, 91%, 27%)',
+    dark: 'hsl(86, 91%, 25%)',
+    darker: 'hsl(86, 91%, 23%)'
+  },
+  red: ['hsl(8, 73%, 96%)', 'hsl(8, 74%, 92%)', 'hsl(8, 75%, 88%)', 'hsl(8, 76%, 68%)', 'hsl(8, 77%, 60%)', 'hsl(8, 78%, 56%)', 'hsl(8, 79%, 52%)', 'hsl(8, 80%, 48%)', 'hsl(8, 81%, 40%)', 'hsl(8, 82%, 30%)'],
+  blue: ['hsl(197, 56%, 92%)', 'hsl(197, 56%, 88%)', 'hsl(197, 56%, 72%)', 'hsl(197, 56%, 64%)', 'hsl(197, 56%, 52%)', 'hsl(197, 56%, 44%)', 'hsl(197, 56%, 40%)', 'hsl(197, 56%, 32%)', 'hsl(197, 56%, 24%)', 'hsl(197, 56%, 20%)'],
+  green: ['hsl(96, 24%, 92%)', 'hsl(96, 30%, 84%)', 'hsl(96, 32%, 76%)', 'hsl(96, 34%, 72%)', 'hsl(96, 36%, 64%)', 'hsl(96, 40%, 58%)', 'hsl(96, 44%, 50%)', 'hsl(96, 48%, 40%)', 'hsl(96, 52%, 30%)', 'hsl(96, 60%, 20%)'],
+  yellow: ['hsl(50, 89%, 90%)', 'hsl(50, 90%, 86%)', 'hsl(50, 91%, 74%)', 'hsl(50, 92%, 68%)', 'hsl(50, 93%, 62%)', 'hsl(50, 94%, 56%)', 'hsl(50, 95%, 48%)', 'hsl(50, 96%, 40%)', 'hsl(50, 97%, 32%)', 'hsl(50, 98%, 26%)'],
+  light: ['hsla(0,0%,100%,0.16)', 'hsla(0,0%,100%,0.24)', 'hsla(0,0%,100%,0.32)', 'hsla(0,0%,100%,0.44)', 'hsla(0,0%,100%,0.50)', 'hsla(0,0%,100%,0.60)', 'hsla(0,0%,100%,0.68)', 'hsla(0,0%,100%,0.76)', 'hsla(0,0%,100%,0.88)', 'hsla(0,0%,100%,0.96)'],
+  dark: ['hsla(0,0%,0%,0.04)', 'hsla(0,0%,0%,0.08)', 'hsla(0,0%,0%,0.12)', 'hsla(0,0%,0%,0.16)', 'hsla(0,0%,0%,0.24)', 'hsla(0,0%,0%,0.32)', 'hsla(0,0%,0%,0.40)', 'hsla(0,0%,0%,0.46)', 'hsla(0,0%,0%,0.54)', 'hsla(0,0%,0%,0.68)'],
+  grey: ['hsl(200,1%,98%)', 'hsl(200,1%,96%)', 'hsl(200,1%,94%)', 'hsl(200,1%,92%)', 'hsl(200,1%,90%)', 'hsl(200,1%,86%)', 'hsl(200,1%,74%)', 'hsl(200,1%,58%)', 'hsl(200,1%,46%)', 'hsl(200,1%,28%)'],
+  foreground: {
+    foreground: 'grey-9',
+    foregroundSecondary: 'grey-8',
+    foregroundTertiary: 'grey-7'
+  },
+  background: {
+    background: 'hsl(30, 9%, 99%)',
+    backgroundSecondary: 'hsl(30, 9%, 97%)',
+    backgroundTertiary: 'hsl(30, 9%, 95%)'
+  },
+  surface: {
+    surface: 'white',
+    surfaceSecondary: 'grey-0',
+    surfaceTertiary: 'grey-1'
+  },
+  separator: {
+    separator: 'grey-6',
+    separatorSecondary: 'grey-5',
+    separatorTertiary: 'grey-4',
+    separatorHover: 'separator',
+    separatorFocus: 'primary',
+    separatorFocusSecondary: 'primary-lighter'
+  },
+  highlight: {
+    highlight: 'grey-2',
+    highlightSecondary: 'grey-3'
+  },
+  link: {
+    linkForeground: 'primary',
+    linkBackground: 'hsl(200,100%,98%)'
+  },
+  days: {
+    sunday: '#7DC156',
+    monday: '#789FF8',
+    tuesday: '#A193FD',
+    wednesday: '#D18CF6',
+    thursday: '#FA7EA4',
+    friday: '#F69688',
+    saturday: '#66BEEB'
+  },
+  apps: {
+    'check-ins': '#8c6999',
+    giving: '#f4c551',
+    groups: '#f58a4f',
+    'music-stand': '#4984c4',
+    pco: '#3565cf',
+    people: '#5781cf',
+    'planning-center': '#2266f7',
+    projector: '#f19900',
+    registrations: '#569690',
+    calendar: '#cc4832',
+    services: '#6a9639'
+  }
+};
+export var colors = flattenPalette(palette);
+export function getColor(key) {
+  return key ? colors[key] : colors;
+}

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

@@ -0,0 +1,2 @@
+export { colors, palette, getColor } from './colors';
+export { createTones, eachPalette, flattenPalette, generateColorScale, setAlphaChannel } from './utils';

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

@@ -0,0 +1,184 @@
+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';
+import { getCSSProperty } from '../../utils';
+
+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 ? getCSSProperty('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;