@codecademy/variance 0.20.6-alpha.edcdf7.0 → 0.21.0

package/dist/core.js

@@ -1,23 +1,15 @@
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
 import { createScaleLookup } from './scales/createScaleLookup';
 import { getStaticCss } from './utils/getStaticProperties';
@@ -28,49 +20,41 @@ export var variance = {
   createParser: function createParser(config) {
     var propNames = orderPropNames(config);
     var breakpoints;
-
     var parser = function parser(props) {
       var styles = {};
       var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
-
       if (breakpoints === undefined || breakpoints === null && theme !== null && theme !== void 0 && theme.breakpoints) {
         // Save the breakpoints if we can
         breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
-      } // Loops over all prop names on the configured config to check for configured styles
-
+      }
 
+      // Loops over all prop names on the configured config to check for configured styles
       propNames.forEach(function (prop) {
         var property = config[prop];
         var value = get(props, prop);
-
         switch (_typeof(value)) {
           case 'string':
           case 'number':
           case 'function':
             return Object.assign(styles, property.styleFn(value, prop, props));
           // handle any props configured with the responsive notation
-
           case 'object':
             if (!breakpoints) {
               return;
-            } // If it is an array the order of values is smallest to largest: [_, xs, ...]
-
-
+            }
+            // If it is an array the order of values is smallest to largest: [_, xs, ...]
             if (isMediaArray(value)) {
               return merge(styles, arrayParser(value, props, property, breakpoints.array));
-            } // Check to see if value is an object matching the responsive syntax and generate the styles.
-
-
+            }
+            // Check to see if value is an object matching the responsive syntax and generate the styles.
             if (isMediaMap(value)) {
               return merge(styles, objectParser(value, props, property, breakpoints.map));
             }
-
         }
       });
       return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
-    }; // return the parser function with the resulting meta information for further composition
-
-
+    };
+    // return the parser function with the resulting meta information for further composition
     return Object.assign(parser, {
       propNames: propNames,
       config: config
@@ -80,28 +64,24 @@ export var variance = {
   // that traverses the properties the function is responsible for.
   createTransform: function createTransform(prop, config) {
     var _config$transform = config.transform,
-        transform = _config$transform === void 0 ? identity : _config$transform,
-        property = config.property,
-        _config$properties = config.properties,
-        properties = _config$properties === void 0 ? [property] : _config$properties,
-        scale = config.scale;
+      transform = _config$transform === void 0 ? identity : _config$transform,
+      property = config.property,
+      _config$properties = config.properties,
+      properties = _config$properties === void 0 ? [property] : _config$properties,
+      scale = config.scale;
     var getScaleValue = createScaleLookup(scale);
     var alwaysTransform = scale === undefined || isArray(scale);
     return _objectSpread(_objectSpread({}, config), {}, {
       prop: prop,
       styleFn: function styleFn(value, prop, props) {
         var _scaleValue;
-
         var styles = {};
-
         if (isUndefined(value)) {
           return styles;
         }
-
         var useTransform = false;
         var intermediateValue;
         var scaleValue;
-
         switch (_typeof(value)) {
           case 'number':
           case 'string':
@@ -109,39 +89,32 @@ export var variance = {
             useTransform = scaleValue !== undefined || alwaysTransform;
             intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
             break;
-
           case 'function':
             if (props.theme) {
               intermediateValue = value(props.theme);
             }
-
             break;
-
           default:
             return styles;
-        } // for each property look up the scale value from theme if passed and apply any
-        // final transforms to the value
-
+        }
 
+        // for each property look up the scale value from theme if passed and apply any
+        // final transforms to the value
         properties.forEach(function (property) {
           var styleValue = intermediateValue;
-
           if (useTransform && !isUndefined(styleValue)) {
             styleValue = transform(styleValue, property, props);
           }
-
           switch (_typeof(styleValue)) {
             case 'number':
             case 'string':
               return styles[property] = styleValue;
-
             case 'object':
               return Object.assign(styles, styleValue);
-
             default:
           }
-        }); // return the resulting styles object
-
+        });
+        // return the resulting styles object
         return styles;
       }
     });
@@ -150,7 +123,6 @@ export var variance = {
     for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
       parsers[_key] = arguments[_key];
     }
-
     return this.createParser(parsers.reduce(function (carry, parser) {
       return _objectSpread(_objectSpread({}, carry), parser.config);
     }, {}));
@@ -161,13 +133,13 @@ export var variance = {
     return function (cssProps) {
       var cache;
       var allKeys = Object.keys(cssProps);
-      /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
 
+      /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
       var selectors = allKeys.filter(function (key) {
         return !filteredProps.includes(key) && isObject(cssProps[key]);
       });
-      /** Static CSS Properties get extracted if they match neither syntax */
 
+      /** Static CSS Properties get extracted if they match neither syntax */
       var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
       return function (_ref) {
         var theme = _ref.theme;
@@ -177,14 +149,13 @@ export var variance = {
         }));
         selectors.forEach(function (selector) {
           var _cssProps$selector;
-
           var selectorConfig = (_cssProps$selector = cssProps[selector]) !== null && _cssProps$selector !== void 0 ? _cssProps$selector : {};
           css[selector] = _objectSpread(_objectSpread({}, getStaticCss(selectorConfig, filteredProps)), parser(_objectSpread(_objectSpread({}, selectorConfig), {}, {
             theme: theme
           })));
         });
-        /** Merge the static and generated css and save it to the cache */
 
+        /** Merge the static and generated css and save it to the cache */
         cache = _objectSpread(_objectSpread({}, staticCss), css);
         return cache;
       };
@@ -194,11 +165,11 @@ export var variance = {
     var css = this.createCss(config);
     return function (_ref2) {
       var _ref2$prop = _ref2.prop,
-          prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
-          defaultVariant = _ref2.defaultVariant,
-          _ref2$base = _ref2.base,
-          base = _ref2$base === void 0 ? {} : _ref2$base,
-          variants = _ref2.variants;
+        prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
+        defaultVariant = _ref2.defaultVariant,
+        _ref2$base = _ref2.base,
+        base = _ref2$base === void 0 ? {} : _ref2$base,
+        variants = _ref2.variants;
       var baseFn = css(base);
       var variantFns = {};
       Object.keys(variants).forEach(function (key) {
@@ -208,9 +179,8 @@ export var variance = {
       });
       return function (props) {
         var _variantFns;
-
         var _props$prop = props[prop],
-            selected = _props$prop === void 0 ? defaultVariant : _props$prop;
+          selected = _props$prop === void 0 ? defaultVariant : _props$prop;
         var styles = {};
         if (!selected) return styles;
         return merge(styles, baseFn(props), variantFns === null || variantFns === void 0 ? void 0 : (_variantFns = variantFns[selected]) === null || _variantFns === void 0 ? void 0 : _variantFns.call(variantFns, props));
@@ -237,15 +207,16 @@ export var variance = {
     };
   },
   create: function create(config) {
-    var transforms = {}; // Create a transform function for each of the props
+    var transforms = {};
 
+    // Create a transform function for each of the props
     for (var prop in config) {
       if (typeof prop === 'string') {
         transforms[prop] = this.createTransform(prop, config[prop]);
       }
-    } // Create a parser that handles all the props within the config
-
+    }
 
+    // Create a parser that handles all the props within the config
     return this.createParser(transforms);
   }
 };

package/dist/createTheme/createTheme.js

@@ -1,36 +1,26 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
-
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
-
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-
 import { mapValues, merge } from 'lodash';
 import { flattenScale } from '../utils/flattenScale';
 import { serializeTokens } from '../utils/serializeTokens';
-
 var _theme = new WeakMap();
-
 var ThemeBuilder = /*#__PURE__*/function () {
   function ThemeBuilder(baseTheme) {
     _classCallCheck(this, ThemeBuilder);
-
     _theme.set(this, {
       writable: true,
       value: {}
     });
-
     _classPrivateFieldSet(this, _theme, baseTheme);
   }
   /**
@@ -38,38 +28,31 @@ var ThemeBuilder = /*#__PURE__*/function () {
    * @param key A key of the current theme to transform into CSS Variables and Variable References
    * @example .createScaleVariables('fontSize')
    */
-
-
   _createClass(ThemeBuilder, [{
     key: "createScaleVariables",
     value: function createScaleVariables(key) {
       var _merge;
-
       var _serializeTokens = serializeTokens(_classPrivateFieldGet(this, _theme)[key], key, _classPrivateFieldGet(this, _theme)),
-          variables = _serializeTokens.variables,
-          tokens = _serializeTokens.tokens;
-
+        variables = _serializeTokens.variables,
+        tokens = _serializeTokens.tokens;
       _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
         root: variables
       }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
-
       return this;
     }
+
     /**
      *
      * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
      * @example .addColors({ navy: 'navy', hyper: 'purple' })
      */
-
   }, {
     key: "addColors",
     value: function addColors(colors) {
       var flatColors = flattenScale(colors);
-
       var _serializeTokens2 = serializeTokens(flatColors, 'color', _classPrivateFieldGet(this, _theme)),
-          variables = _serializeTokens2.variables,
-          tokens = _serializeTokens2.tokens;
-
+        variables = _serializeTokens2.variables,
+        tokens = _serializeTokens2.tokens;
       _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
         colors: tokens,
         _variables: {
@@ -79,38 +62,32 @@ var ThemeBuilder = /*#__PURE__*/function () {
           colors: flatColors
         }
       }));
-
       return this;
     }
+
     /**
      *
      * @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
      * @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
      * @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
      */
-
   }, {
     key: "addColorModes",
     value: function addColorModes(initialMode, modeConfig) {
       var _classPrivateFieldGet2,
-          _this = this;
-
+        _this = this;
       var modes = mapValues(modeConfig, function (mode) {
         return flattenScale(mode);
       });
-
       var _serializeTokens3 = serializeTokens(mapValues(merge({}, (_classPrivateFieldGet2 = _classPrivateFieldGet(this, _theme).modes) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[initialMode], modes[initialMode]), function (color) {
-        return _classPrivateFieldGet(_this, _theme).colors[color];
-      }), 'color', _classPrivateFieldGet(this, _theme)),
-          colors = _serializeTokens3.tokens,
-          variables = _serializeTokens3.variables;
-
+          return _classPrivateFieldGet(_this, _theme).colors[color];
+        }), 'color', _classPrivateFieldGet(this, _theme)),
+        colors = _serializeTokens3.tokens,
+        variables = _serializeTokens3.variables;
       var getColorValue = function getColorValue(color) {
         var _classPrivateFieldGet3, _classPrivateFieldGet4;
-
         return (_classPrivateFieldGet3 = _classPrivateFieldGet(_this, _theme)._tokens) === null || _classPrivateFieldGet3 === void 0 ? void 0 : (_classPrivateFieldGet4 = _classPrivateFieldGet3.colors) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4[color];
       };
-
       _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
         colors: colors,
         modes: modes,
@@ -125,41 +102,38 @@ var ThemeBuilder = /*#__PURE__*/function () {
           })
         }
       }));
-
       return this;
     }
+
     /**
      *
      * @param key A new key of theme
      * @param createScale A function that accepts the current theme and returns a new object of scale values.
      * @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
      */
-
   }, {
     key: "addScale",
     value: function addScale(key, createScale) {
       _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, flattenScale(createScale(_classPrivateFieldGet(this, _theme))))));
-
       return this;
     }
+
     /**
      *
      * @param key A current key of theme to be updated with new or computed values
      * @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
      * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
      */
-
   }, {
     key: "updateScale",
     value: function updateScale(key, updateFn) {
       _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), _defineProperty({}, key, updateFn(_classPrivateFieldGet(this, _theme)[key]))));
-
       return this;
     }
+
     /**
      * This finalizes the theme build and returns the final theme and variables to be provided.
      */
-
   }, {
     key: "build",
     value: function build() {
@@ -169,10 +143,8 @@ var ThemeBuilder = /*#__PURE__*/function () {
       });
     }
   }]);
-
   return ThemeBuilder;
 }();
-
 export function createTheme(base) {
   return new ThemeBuilder(base);
 }

package/dist/createTheme/createTheme.test.js

@@ -1,9 +1,9 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { mapValues } from 'lodash';
 import { createTheme } from './createTheme';
 describe('createTheme', function () {

package/dist/scales/createScaleLookup.js

@@ -5,19 +5,16 @@ export var createScaleLookup = function createScaleLookup(scale) {
       return get(props, ['theme', scale, val]);
     };
   }
-
   if (isArray(scale)) {
     return function (val) {
       return val;
     };
   }
-
   if (isObject(scale)) {
     return function (val) {
       return get(scale, val);
     };
   }
-
   return function () {
     return undefined;
   };

package/dist/transforms/transformSize.js

@@ -1,25 +1,17 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import { isNumber } from 'lodash';
 export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
   if (coordinate === 0) {
     return coordinate;
   }
-
   if (coordinate <= 1 && coordinate >= -1) {
     return "".concat(coordinate * 100, "%");
   }
-
   return "".concat(coordinate, "px");
 };
 var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
@@ -27,21 +19,17 @@ export var transformSize = function transformSize(value) {
   if (isNumber(value)) {
     return percentageOrAbsolute(value);
   }
-
   if (value.includes('calc')) {
     return value;
   }
-
   var _ref = valueWithUnit.exec(value) || [],
-      _ref2 = _slicedToArray(_ref, 3),
-      match = _ref2[0],
-      number = _ref2[1],
-      unit = _ref2[2];
-
+    _ref2 = _slicedToArray(_ref, 3),
+    match = _ref2[0],
+    number = _ref2[1],
+    unit = _ref2[2];
   if (match === undefined) {
     return value;
   }
-
   var numericValue = parseFloat(number);
   return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
 };

package/dist/utils/flattenScale.js

@@ -1,10 +1,11 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { isObject } from 'lodash';
+
 /**
  * Returns an exhaustive list of all possible paths of an object T for keys K.
  * Possibilities are returned as `k1.k2.k3`.
@@ -14,11 +15,9 @@ export function flattenScale(object, path) {
   return Object.keys(object).reduce(function (carry, key) {
     var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
     var current = object[key];
-
     if (isObject(current)) {
       return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
     }
-
     return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
   }, {});
 }

package/dist/utils/propNames.js

@@ -4,47 +4,40 @@ var SORT = {
   B_BEFORE_A: 1,
   EQUAL: 1
 };
-
 var compare = function compare(a, b) {
   if (a < b) return SORT.A_BEFORE_B;
   if (b < a) return SORT.B_BEFORE_A;
   return SORT.EQUAL;
 };
+
 /**
  * Orders all properties by the most dependent props
  * @param config
  */
-
-
 export var orderPropNames = function orderPropNames(config) {
   return Object.keys(config).sort(function (a, b) {
     var aConf = config[a],
-        bConf = config[b];
+      bConf = config[b];
     var aProp = aConf.property,
-        _aConf$properties = aConf.properties,
-        aProperties = _aConf$properties === void 0 ? [] : _aConf$properties;
+      _aConf$properties = aConf.properties,
+      aProperties = _aConf$properties === void 0 ? [] : _aConf$properties;
     var bProp = bConf.property,
-        _bConf$properties = bConf.properties,
-        bProperties = _bConf$properties === void 0 ? [] : _bConf$properties;
+      _bConf$properties = bConf.properties,
+      bProperties = _bConf$properties === void 0 ? [] : _bConf$properties;
     var aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
     var bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
-
     if (aIsShorthand && bIsShorthand) {
       var aNum = aProperties.length;
       var bNum = bProperties.length;
-
       if (aProp !== bProp) {
         return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
       }
-
       if (aProp === bProp) {
         if (aNum === 0) return SORT.A_BEFORE_B;
         if (bNum === 0) return SORT.B_BEFORE_A;
       }
-
       return compare(bNum, aNum);
     }
-
     if (aIsShorthand) return SORT.A_BEFORE_B;
     if (bIsShorthand) return SORT.B_BEFORE_A;
     return SORT.EQUAL;

package/dist/utils/responsive.js

@@ -1,38 +1,29 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import { intersection, omit } from 'lodash';
 var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
  */
-
 export var parseBreakpoints = function parseBreakpoints(breakpoints) {
   if (breakpoints === undefined) return null;
-
   var _ref = breakpoints !== null && breakpoints !== void 0 ? breakpoints : {},
-      xs = _ref.xs,
-      sm = _ref.sm,
-      md = _ref.md,
-      lg = _ref.lg,
-      xl = _ref.xl; // Ensure order for mapping
-
-
+    xs = _ref.xs,
+    sm = _ref.sm,
+    md = _ref.md,
+    lg = _ref.lg,
+    xl = _ref.xl; // Ensure order for mapping
   return {
     map: breakpoints,
     array: [xs, sm, md, lg, xl]
@@ -47,15 +38,13 @@ export var isMediaMap = function isMediaMap(val) {
 export var objectParser = function objectParser(value, props, config, breakpoints) {
   var styles = {};
   var styleFn = config.styleFn,
-      prop = config.prop;
-
+    prop = config.prop;
   var _ = value._,
-      rest = _objectWithoutProperties(value, ["_"]); // the keyof 'base' is base styles
+    rest = _objectWithoutProperties(value, ["_"]); // the keyof 'base' is base styles
+  if (_) Object.assign(styles, styleFn(_, prop, props));
 
-
-  if (_) Object.assign(styles, styleFn(_, prop, props)); // Map over remaining keys and merge the corresponding breakpoint styles
+  // Map over remaining keys and merge the corresponding breakpoint styles
   // for that property.
-
   Object.keys(breakpoints).forEach(function (breakpointKey) {
     var bpStyles = rest[breakpointKey];
     if (typeof bpStyles === 'undefined') return;
@@ -66,16 +55,14 @@ export var objectParser = function objectParser(value, props, config, breakpoint
 export var arrayParser = function arrayParser(value, props, config, breakpoints) {
   var styles = {};
   var styleFn = config.styleFn,
-      prop = config.prop;
-
+    prop = config.prop;
   var _value = _toArray(value),
-      _ = _value[0],
-      rest = _value.slice(1); // the first index is base styles
+    _ = _value[0],
+    rest = _value.slice(1); // the first index is base styles
+  if (_) Object.assign(styles, styleFn(_, prop, props));
 
-
-  if (_) Object.assign(styles, styleFn(_, prop, props)); // Map over each value in the array and merge the corresponding breakpoint styles
+  // Map over each value in the array and merge the corresponding breakpoint styles
   // for that property.
-
   rest.forEach(function (val, i) {
     var breakpointKey = breakpoints[i];
     if (!breakpointKey || typeof val === 'undefined') return;

package/dist/utils/serializeTokens.js

@@ -1,32 +1,26 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import { isObject, merge } from 'lodash';
-
 var templateBreakpoints = function templateBreakpoints(value, alias, theme) {
   if (isObject(value)) {
     var _ = value._,
-        base = value.base,
-        rest = _objectWithoutProperties(value, ["_", "base"]);
-
+      base = value.base,
+      rest = _objectWithoutProperties(value, ["_", "base"]);
     var css = _defineProperty({}, alias, _ !== null && _ !== void 0 ? _ : base);
-
     if (theme) {
       var breakpoints = theme.breakpoints;
       Object.keys(breakpoints).forEach(function (key) {
         css[breakpoints[key]] = _defineProperty({}, alias, rest[key]);
       });
     }
-
     return css;
   }
-
   return _defineProperty({}, alias, value);
 };
-
 export var serializeTokens = function serializeTokens(tokens, prefix, theme) {
   var tokenReferences = {};
   var tokenVariables = {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.20.6-alpha.edcdf7.0",
+  "version": "0.21.0",
   "keywords": [
     "emotion",
     "css",
@@ -38,9 +38,9 @@
   "devDependencies": {
     "@emotion/jest": "^11.3.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react-test-renderer": "^18.0.0",
-    "react": "18.2.0",
-    "react-test-renderer": "18.2.0"
+    "@types/react-test-renderer": "^17.0.2",
+    "react": "^17.0.2",
+    "react-test-renderer": "^17.0.2"
   },
-  "gitHead": "43a434fd656f26e2c7cb6ec586626bc402dddf21"
+  "gitHead": "1a7d4bea5b266c92db94b6e901f000960c5c0fa5"
 }