@codecademy/variance 0.21.4-alpha.fcfaa6.0 → 0.21.4

package/dist/core.js

@@ -1,3 +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) { 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 from 'lodash/get';
 import identity from 'lodash/identity';
 import isArray from 'lodash/isArray';
@@ -8,27 +20,24 @@ import { createScaleLookup } from './scales/createScaleLookup';
 import { getStaticCss } from './utils/getStaticProperties';
 import { orderPropNames } from './utils/propNames';
 import { arrayParser, isMediaArray, isMediaMap, objectParser, orderBreakpoints, parseBreakpoints } from './utils/responsive';
-export const variance = {
+export var variance = {
   // Parser to handle any set of configured props
-  createParser(config) {
-    const propNames = orderPropNames(config);
-    let breakpoints;
-    const parser = props => {
-      const styles = {};
-      const {
-        theme
-      } = props;
-      // Attempt to cache the breakpoints if we have not yet or if theme has become available.
-      if (breakpoints === undefined || breakpoints === null && theme?.breakpoints) {
+  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?.breakpoints);
+        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
-      propNames.forEach(prop => {
-        const property = config[prop];
-        const value = get(props, prop);
-        switch (typeof value) {
+      propNames.forEach(function (prop) {
+        var property = config[prop];
+        var value = get(props, prop);
+        switch (_typeof(value)) {
           case 'string':
           case 'number':
           case 'function':
@@ -52,38 +61,38 @@ export const variance = {
     };
     // return the parser function with the resulting meta information for further composition
     return Object.assign(parser, {
-      propNames,
-      config
+      propNames: propNames,
+      config: config
     });
   },
   // Given a single property configuration enrich the config with a transform function
   // that traverses the properties the function is responsible for.
-  createTransform(prop, config) {
-    const {
-      transform = identity,
-      property,
-      properties = [property],
-      scale
-    } = config;
-    const getScaleValue = createScaleLookup(scale);
-    const alwaysTransform = scale === undefined || isArray(scale);
-    return {
-      ...config,
-      prop,
-      styleFn: (value, prop, props) => {
-        const styles = {};
+  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;
+    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;
         }
-        let useTransform = false;
-        let intermediateValue;
-        let scaleValue;
-        switch (typeof value) {
+        var useTransform = false;
+        var intermediateValue;
+        var scaleValue;
+        switch (_typeof(value)) {
           case 'number':
           case 'string':
             scaleValue = getScaleValue(value, props);
             useTransform = scaleValue !== undefined || alwaysTransform;
-            intermediateValue = scaleValue ?? value;
+            intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
             break;
           case 'function':
             if (props.theme) {
@@ -96,12 +105,12 @@ export const variance = {
 
         // for each property look up the scale value from theme if passed and apply any
         // final transforms to the value
-        properties.forEach(property => {
-          let styleValue = intermediateValue;
+        properties.forEach(function (property) {
+          var styleValue = intermediateValue;
           if (useTransform && !isUndefined(styleValue)) {
             styleValue = transform(styleValue, property, props);
           }
-          switch (typeof styleValue) {
+          switch (_typeof(styleValue)) {
             case 'number':
             case 'string':
               return styles[property] = styleValue;
@@ -113,110 +122,100 @@ export const variance = {
         // return the resulting styles object
         return styles;
       }
-    };
+    });
   },
-  compose() {
+  compose: function compose() {
     for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
       parsers[_key] = arguments[_key];
     }
-    return this.createParser(parsers.reduce((carry, parser) => ({
-      ...carry,
-      ...parser.config
-    }), {}));
+    return this.createParser(parsers.reduce(function (carry, parser) {
+      return _objectSpread(_objectSpread({}, carry), parser.config);
+    }, {}));
   },
-  createCss(config) {
-    const parser = this.create(config);
-    const filteredProps = parser.propNames;
-    return cssProps => {
-      let cache;
-      const allKeys = Object.keys(cssProps);
+  createCss: function createCss(config) {
+    var parser = this.create(config);
+    var filteredProps = parser.propNames;
+    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 */
-      const selectors = allKeys.filter(key => !filteredProps.includes(key) && isObject(cssProps[key]));
+      var selectors = allKeys.filter(function (key) {
+        return !filteredProps.includes(key) && isObject(cssProps[key]);
+      });
 
       /** Static CSS Properties get extracted if they match neither syntax */
-      const staticCss = getStaticCss(cssProps, ['theme',
-      // Just in case this gets passed somehow
-      ...selectors, ...filteredProps]);
-      return _ref => {
-        let {
-          theme
-        } = _ref;
+      var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
+      return function (_ref) {
+        var theme = _ref.theme;
         if (cache) return cache;
-        const css = parser({
-          ...cssProps,
-          theme
-        });
-        selectors.forEach(selector => {
-          const selectorConfig = cssProps[selector] ?? {};
-          css[selector] = {
-            ...getStaticCss(selectorConfig, filteredProps),
-            ...parser({
-              ...selectorConfig,
-              theme
-            })
-          };
+        var css = parser(_objectSpread(_objectSpread({}, cssProps), {}, {
+          theme: theme
+        }));
+        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 */
-        cache = {
-          ...staticCss,
-          ...css
-        };
+        cache = _objectSpread(_objectSpread({}, staticCss), css);
         return cache;
       };
     };
   },
-  createVariant(config) {
-    const css = this.createCss(config);
-    return _ref2 => {
-      let {
-        prop = 'variant',
-        defaultVariant,
-        base = {},
-        variants
-      } = _ref2;
-      const baseFn = css(base);
-      const variantFns = {};
-      Object.keys(variants).forEach(key => {
-        const variantKey = key;
-        const cssProps = variants[variantKey];
+  createVariant: function createVariant(config) {
+    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;
+      var baseFn = css(base);
+      var variantFns = {};
+      Object.keys(variants).forEach(function (key) {
+        var variantKey = key;
+        var cssProps = variants[variantKey];
         variantFns[variantKey] = css(cssProps);
       });
-      return props => {
-        const {
-          [prop]: selected = defaultVariant
-        } = props;
-        const styles = {};
+      return function (props) {
+        var _variantFns;
+        var _props$prop = props[prop],
+          selected = _props$prop === void 0 ? defaultVariant : _props$prop;
+        var styles = {};
         if (!selected) return styles;
-        return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
+        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));
       };
     };
   },
-  createStates(config) {
-    const css = this.createCss(config);
-    return states => {
-      const orderedStates = Object.keys(states);
-      const stateFns = {};
-      orderedStates.forEach(key => {
-        const stateKey = key;
-        const cssProps = states[stateKey];
+  createStates: function createStates(config) {
+    var css = this.createCss(config);
+    return function (states) {
+      var orderedStates = Object.keys(states);
+      var stateFns = {};
+      orderedStates.forEach(function (key) {
+        var stateKey = key;
+        var cssProps = states[stateKey];
         stateFns[stateKey] = css(cssProps);
       });
-      return props => {
-        const styles = {};
-        orderedStates.forEach(state => {
+      return function (props) {
+        var styles = {};
+        orderedStates.forEach(function (state) {
           merge(styles, props[state] && stateFns[state](props));
         });
         return styles;
       };
     };
   },
-  create(config) {
-    const transforms = {};
+  create: function create(config) {
+    var transforms = {};
 
     // Create a transform function for each of the props
-    for (const prop in config) {
+    for (var prop in config) {
       if (typeof prop === 'string') {
         transforms[prop] = this.createTransform(prop, config[prop]);
       }

package/dist/createTheme/createTheme.js

@@ -1,121 +1,151 @@
+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, _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 from 'lodash/mapValues';
 import merge from 'lodash/merge';
 import { flattenScale } from '../utils/flattenScale';
 import { serializeTokens } from '../utils/serializeTokens';
-class ThemeBuilder {
-  #theme = (() => ({}))();
-  constructor(baseTheme) {
-    this.#theme = baseTheme;
+var _theme = new WeakMap();
+var ThemeBuilder = /*#__PURE__*/function () {
+  function ThemeBuilder(baseTheme) {
+    _classCallCheck(this, ThemeBuilder);
+    _theme.set(this, {
+      writable: true,
+      value: {}
+    });
+    _classPrivateFieldSet(this, _theme, baseTheme);
   }
   /**
    *
    * @param key A key of the current theme to transform into CSS Variables and Variable References
    * @example .createScaleVariables('fontSize')
    */
-  createScaleVariables(key) {
-    const {
-      variables,
-      tokens
-    } = serializeTokens(this.#theme[key], key, this.#theme);
-    this.#theme = merge({}, this.#theme, {
-      [key]: tokens,
-      _variables: {
+  _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;
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
         root: variables
-      },
-      _tokens: {
-        [key]: this.#theme[key]
-      }
-    });
-    return this;
-  }
+      }), _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' })
-   */
-  addColors(colors) {
-    const flatColors = flattenScale(colors);
-    const {
-      variables,
-      tokens
-    } = serializeTokens(flatColors, 'color', this.#theme);
-    this.#theme = merge({}, this.#theme, {
-      colors: tokens,
-      _variables: {
-        root: variables
-      },
-      _tokens: {
-        colors: flatColors
-      }
-    });
-    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;
+      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), {
+        colors: tokens,
+        _variables: {
+          root: variables
+        },
+        _tokens: {
+          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' } } })
-   */
-  addColorModes(initialMode, modeConfig) {
-    const modes = mapValues(modeConfig, mode => flattenScale(mode));
-    const {
-      tokens: colors,
-      variables
-    } = serializeTokens(mapValues(merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), color => this.#theme.colors[color]), 'color', this.#theme);
-    const getColorValue = color => this.#theme._tokens?.colors?.[color];
-    this.#theme = merge({}, this.#theme, {
-      colors,
-      modes,
-      mode: initialMode,
-      _getColorValue: getColorValue,
-      _variables: {
-        mode: variables
-      },
-      _tokens: {
-        modes: mapValues(modes, mode => mapValues(mode, getColorValue))
-      }
-    });
-    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;
+      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;
+      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,
+        mode: initialMode,
+        _getColorValue: getColorValue,
+        _variables: {
+          mode: variables
+        },
+        _tokens: {
+          modes: mapValues(modes, function (mode) {
+            return mapValues(mode, getColorValue);
+          })
+        }
+      }));
+      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' }))
-   */
-  addScale(key, createScale) {
-    this.#theme = merge({}, this.#theme, {
-      [key]: flattenScale(createScale(this.#theme))
-    });
-    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` }))
-   */
-  updateScale(key, updateFn) {
-    this.#theme = merge({}, this.#theme, {
-      [key]: updateFn(this.#theme[key])
-    });
-    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.
-   */
-  build() {
-    return merge({}, this.#theme, {
-      _variables: {},
-      _tokens: {}
-    });
-  }
-}
+    /**
+     * This finalizes the theme build and returns the final theme and variables to be provided.
+     */
+  }, {
+    key: "build",
+    value: function build() {
+      return merge({}, _classPrivateFieldGet(this, _theme), {
+        _variables: {},
+        _tokens: {}
+      });
+    }
+  }]);
+  return ThemeBuilder;
+}();
 export function createTheme(base) {
   return new ThemeBuilder(base);
 }

package/dist/createTheme/createTheme.test.js

@@ -1,7 +1,13 @@
+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) { 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/mapValues';
 import { createTheme } from './createTheme';
-describe('createTheme', () => {
-  const base = {
+describe('createTheme', function () {
+  var base = {
     breakpoints: {
       xs: '1',
       sm: '2',
@@ -10,46 +16,53 @@ describe('createTheme', () => {
       xl: '5'
     }
   };
-  it('works', () => {
-    expect(createTheme(base).build()).toEqual({
-      ...base,
+  it('works', function () {
+    expect(createTheme(base).build()).toEqual(_objectSpread(_objectSpread({}, base), {}, {
       _variables: {},
       _tokens: {}
-    });
+    }));
   });
-  it('adds a scale', () => {
-    const theme = createTheme(base).addScale('test', () => ({
-      test: 1,
-      test2: 2
-    })).build();
+  it('adds a scale', function () {
+    var theme = createTheme(base).addScale('test', function () {
+      return {
+        test: 1,
+        test2: 2
+      };
+    }).build();
     expect(theme.test).toEqual({
       test: 1,
       test2: 2
     });
   });
-  it('updates a scale', () => {
-    const builder = createTheme(base).addScale('test', () => ({
-      test: 1,
-      test2: 2
-    }));
+  it('updates a scale', function () {
+    var builder = createTheme(base).addScale('test', function () {
+      return {
+        test: 1,
+        test2: 2
+      };
+    });
     expect(builder.build().test).toEqual({
       test: 1,
       test2: 2
     });
-    builder.updateScale('test', () => ({
-      test3: 3
-    }));
+    builder.updateScale('test', function () {
+      return {
+        test3: 3
+      };
+    });
     expect(builder.build().test).toEqual({
       test: 1,
       test2: 2,
       test3: 3
     });
   });
-  it('serializes variables', () => {
-    const theme = createTheme(base).addScale('test', () => ({
-      test: 1,
-      test2: 2
-    })).createScaleVariables('test').build();
+  it('serializes variables', function () {
+    var theme = createTheme(base).addScale('test', function () {
+      return {
+        test: 1,
+        test2: 2
+      };
+    }).createScaleVariables('test').build();
     expect(theme.test).toEqual({
       test: 'var(--test-test)',
       test2: 'var(--test-test2)'
@@ -59,22 +72,24 @@ describe('createTheme', () => {
       '--test-test2': 2
     });
   });
-  describe('colors', () => {
-    const staticColors = {
+  describe('colors', function () {
+    var staticColors = {
       white: 'white',
       black: 'black',
       blue: 'blue',
       green: 'green',
       red: 'red'
     };
-    const cssVariableReferences = mapValues(staticColors, val => `var(--color-${val})`);
-    const builder = createTheme(base);
-    it('creates color variables', () => {
-      const theme = builder.addColors(staticColors).build();
+    var cssVariableReferences = mapValues(staticColors, function (val) {
+      return "var(--color-".concat(val, ")");
+    });
+    var builder = createTheme(base);
+    it('creates color variables', function () {
+      var theme = builder.addColors(staticColors).build();
       expect(theme.colors).toEqual(cssVariableReferences);
     });
-    it('adds colorModes', () => {
-      const theme = builder.addColors(staticColors).addColorModes('light', {
+    it('adds colorModes', function () {
+      var theme = builder.addColors(staticColors).addColorModes('light', {
         light: {
           primary: 'red'
         },
@@ -82,16 +97,17 @@ describe('createTheme', () => {
           primary: 'blue'
         }
       }).build();
-      expect(theme.colors).toEqual({
-        ...mapValues(staticColors, val => `var(--color-${val})`),
+      expect(theme.colors).toEqual(_objectSpread(_objectSpread({}, mapValues(staticColors, function (val) {
+        return "var(--color-".concat(val, ")");
+      })), {}, {
         primary: 'var(--color-primary)'
-      });
+      }));
       expect(theme._variables.mode).toEqual({
         '--color-primary': 'var(--color-red)'
       });
     });
-    it('returns value checker for colors', () => {
-      const theme = builder.addColors({
+    it('returns value checker for colors', function () {
+      var theme = builder.addColors({
         black: '#000000',
         white: '#FFFFFF'
       }).addColorModes('light', {
@@ -105,8 +121,8 @@ describe('createTheme', () => {
       expect(theme._getColorValue('white')).toEqual('#FFFFFF');
       expect(theme._getColorValue(theme.modes.light.primary)).toEqual('#000000');
     });
-    it('returns value checker for colors with deep values', () => {
-      const theme = builder.addColors({
+    it('returns value checker for colors with deep values', function () {
+      var theme = builder.addColors({
         black: '#000000',
         white: '#FFFFFF',
         gray: {
@@ -116,7 +132,7 @@ describe('createTheme', () => {
       }).addColorModes('light', {
         light: {
           primary: {
-            default: 'gray-200',
+            "default": 'gray-200',
             cool: {
               _: 'gray-300',
               town: 'black'
@@ -127,8 +143,8 @@ describe('createTheme', () => {
       expect(theme._getColorValue('gray-300')).toEqual('#666666');
       expect(theme._getColorValue(theme.modes.light['primary-default'])).toEqual('#eeeeee');
     });
-    it('merges color mode configurations when overriden', () => {
-      const theme = builder.addColors({
+    it('merges color mode configurations when overriden', function () {
+      var theme = builder.addColors({
         black: '#000000',
         white: '#FFFFFF'
       }).addColorModes('light', {
@@ -139,7 +155,7 @@ describe('createTheme', () => {
           }
         }
       }).build();
-      const override = createTheme(theme).addColorModes('light', {
+      var override = createTheme(theme).addColorModes('light', {
         light: {
           primary: {
             _: 'white',
@@ -149,8 +165,8 @@ describe('createTheme', () => {
       }).build();
       expect(override.modes.light.primary).toEqual('white');
     });
-    it('returns the raw values of color mode colors on the tokens object', () => {
-      const theme = createTheme(base).addColors({
+    it('returns the raw values of color mode colors on the tokens object', function () {
+      var theme = createTheme(base).addColors({
         black: '#000000',
         gray: {
           300: '#666666'

package/dist/scales/createScale.js

@@ -1 +1,3 @@
-export const createScale = () => [];
+export var createScale = function createScale() {
+  return [];
+};

package/dist/scales/createScaleLookup.js

@@ -2,15 +2,23 @@ import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
-export const createScaleLookup = scale => {
+export var createScaleLookup = function createScaleLookup(scale) {
   if (isString(scale)) {
-    return (val, props) => get(props, ['theme', scale, val]);
+    return function (val, props) {
+      return get(props, ['theme', scale, val]);
+    };
   }
   if (isArray(scale)) {
-    return val => val;
+    return function (val) {
+      return val;
+    };
   }
   if (isObject(scale)) {
-    return val => get(scale, val);
+    return function (val) {
+      return get(scale, val);
+    };
   }
-  return () => undefined;
+  return function () {
+    return undefined;
+  };
 };

package/dist/transforms/transformSize.js

@@ -1,25 +1,35 @@
+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 = 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/isNumber';
-export const percentageOrAbsolute = coordinate => {
+export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
   if (coordinate === 0) {
     return coordinate;
   }
   if (coordinate <= 1 && coordinate >= -1) {
-    return `${coordinate * 100}%`;
+    return "".concat(coordinate * 100, "%");
   }
-  return `${coordinate}px`;
+  return "".concat(coordinate, "px");
 };
-const valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
-export const transformSize = value => {
+var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
+export var transformSize = function transformSize(value) {
   if (isNumber(value)) {
     return percentageOrAbsolute(value);
   }
   if (value.includes('calc')) {
     return value;
   }
-  const [match, number, unit] = valueWithUnit.exec(value) || [];
+  var _ref = valueWithUnit.exec(value) || [],
+    _ref2 = _slicedToArray(_ref, 3),
+    match = _ref2[0],
+    number = _ref2[1],
+    unit = _ref2[2];
   if (match === undefined) {
     return value;
   }
-  const numericValue = parseFloat(number);
-  return !unit ? percentageOrAbsolute(numericValue) : `${numericValue}${unit}`;
+  var numericValue = parseFloat(number);
+  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
 };

package/dist/utils/flattenScale.js

@@ -1,3 +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) { 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/isObject';
 
 /**
@@ -5,31 +11,13 @@ import isObject from 'lodash/isObject';
  * Possibilities are returned as `k1.k2.k3`.
  */
 
-/** Returns valid paths of object T */
-
-/** Returns the value of a valid path P `k1.k2.k3` in object T */
-
-/** Check if path has a primitive end value and return only the union of end paths */
-
-/**
- * Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
- * { path: { sub: 1 } } => { 'path-sub': 1 }
- *
- */
-
 export function flattenScale(object, path) {
-  return Object.keys(object).reduce((carry, key) => {
-    const nextKey = path ? `${path}${key === '_' ? '' : `-${key}`}` : key;
-    const current = object[key];
+  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 {
-        ...carry,
-        ...flattenScale(current, nextKey)
-      };
+      return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
     }
-    return {
-      ...carry,
-      [nextKey]: object[key]
-    };
+    return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
   }, {});
 }

package/dist/utils/getStaticProperties.js

@@ -1,3 +1,7 @@
 import keys from 'lodash/keys';
 import pick from 'lodash/pick';
-export const getStaticCss = (props, filteredKeys) => pick(props, keys(props).filter(key => !filteredKeys.includes(key)));
+export var getStaticCss = function getStaticCss(props, filteredKeys) {
+  return pick(props, keys(props).filter(function (key) {
+    return !filteredKeys.includes(key);
+  }));
+};

package/dist/utils/propNames.js

@@ -1,10 +1,10 @@
-const SHORTHAND_PROPERTIES = ['border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderWidth', 'borderStyle', 'borderColor', 'background', 'flex', 'margin', 'padding', 'transition', 'gap', 'grid', 'gridArea', 'gridColumn', 'gridRow', 'gridTemplate', 'overflow', 'transition'];
-const SORT = {
+var SHORTHAND_PROPERTIES = ['border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderWidth', 'borderStyle', 'borderColor', 'background', 'flex', 'margin', 'padding', 'transition', 'gap', 'grid', 'gridArea', 'gridColumn', 'gridRow', 'gridTemplate', 'overflow', 'transition'];
+var SORT = {
   A_BEFORE_B: -1,
   B_BEFORE_A: 1,
   EQUAL: 1
 };
-const compare = (a, b) => {
+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;
@@ -14,34 +14,32 @@ const compare = (a, b) => {
  * Orders all properties by the most dependent props
  * @param config
  */
-export const orderPropNames = config => Object.keys(config).sort((a, b) => {
-  const {
-    [a]: aConf,
-    [b]: bConf
-  } = config;
-  const {
-    property: aProp,
-    properties: aProperties = []
-  } = aConf;
-  const {
-    property: bProp,
-    properties: bProperties = []
-  } = bConf;
-  const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
-  const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
-  if (aIsShorthand && bIsShorthand) {
-    const aNum = aProperties.length;
-    const bNum = bProperties.length;
-    if (aProp !== bProp) {
-      return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
+export var orderPropNames = function orderPropNames(config) {
+  return Object.keys(config).sort(function (a, b) {
+    var aConf = config[a],
+      bConf = config[b];
+    var aProp = aConf.property,
+      _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;
+    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 (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;
-});
+    if (aIsShorthand) return SORT.A_BEFORE_B;
+    if (bIsShorthand) return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+  });
+};

package/dist/utils/responsive.js

@@ -1,76 +1,79 @@
+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) { 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 from 'lodash/intersection';
 import omit from 'lodash/omit';
-const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
 
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
  */
-export const parseBreakpoints = breakpoints => {
+export var parseBreakpoints = function parseBreakpoints(breakpoints) {
   if (breakpoints === undefined) return null;
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  } = breakpoints ?? {};
-
-  // Ensure order for mapping
+  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
   return {
     map: breakpoints,
     array: [xs, sm, md, lg, xl]
   };
 };
-export const isMediaArray = val => Array.isArray(val);
-export const isMediaMap = val => intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
-export const objectParser = (value, props, config, breakpoints) => {
-  const styles = {};
-  const {
-    styleFn,
-    prop
-  } = config;
-  const {
-    _,
-    ...rest
-  } = value;
-  // the keyof 'base' is base styles
+export var isMediaArray = function isMediaArray(val) {
+  return Array.isArray(val);
+};
+export var isMediaMap = function isMediaMap(val) {
+  return intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
+};
+export var objectParser = function objectParser(value, props, config, breakpoints) {
+  var styles = {};
+  var styleFn = config.styleFn,
+    prop = config.prop;
+  var _ = value._,
+    rest = _objectWithoutProperties(value, ["_"]); // the keyof 'base' is base styles
   if (_) Object.assign(styles, styleFn(_, prop, props));
 
   // Map over remaining keys and merge the corresponding breakpoint styles
   // for that property.
-  Object.keys(breakpoints).forEach(breakpointKey => {
-    const bpStyles = rest[breakpointKey];
+  Object.keys(breakpoints).forEach(function (breakpointKey) {
+    var bpStyles = rest[breakpointKey];
     if (typeof bpStyles === 'undefined') return;
-    Object.assign(styles, {
-      [breakpoints[breakpointKey]]: styleFn(bpStyles, prop, props)
-    });
+    Object.assign(styles, _defineProperty({}, breakpoints[breakpointKey], styleFn(bpStyles, prop, props)));
   });
   return styles;
 };
-export const arrayParser = (value, props, config, breakpoints) => {
-  const styles = {};
-  const {
-    styleFn,
-    prop
-  } = config;
-  const [_, ...rest] = value;
-  // the first index is base styles
+export var arrayParser = function arrayParser(value, props, config, breakpoints) {
+  var styles = {};
+  var styleFn = config.styleFn,
+    prop = config.prop;
+  var _value = _toArray(value),
+    _ = _value[0],
+    rest = _value.slice(1); // the first index is base styles
   if (_) Object.assign(styles, styleFn(_, prop, props));
 
   // Map over each value in the array and merge the corresponding breakpoint styles
   // for that property.
-  rest.forEach((val, i) => {
-    const breakpointKey = breakpoints[i];
+  rest.forEach(function (val, i) {
+    var breakpointKey = breakpoints[i];
     if (!breakpointKey || typeof val === 'undefined') return;
-    Object.assign(styles, {
-      [breakpointKey]: styleFn(val, prop, props)
-    });
+    Object.assign(styles, _defineProperty({}, breakpointKey, styleFn(val, prop, props)));
   });
   return styles;
 };
-export const orderBreakpoints = (styles, breakpoints) => {
-  const orderedStyles = omit(styles, breakpoints);
-  breakpoints.forEach(bp => {
+export var orderBreakpoints = function orderBreakpoints(styles, breakpoints) {
+  var orderedStyles = omit(styles, breakpoints);
+  breakpoints.forEach(function (bp) {
     if (styles[bp]) {
       orderedStyles[bp] = styles[bp];
     }

package/dist/utils/serializeTokens.js

@@ -1,42 +1,33 @@
+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 from 'lodash/isObject';
 import merge from 'lodash/merge';
-
-/**
- * Returns an type of any object with { key: 'var(--key) }
- */
-
-const templateBreakpoints = (value, alias, theme) => {
+var templateBreakpoints = function templateBreakpoints(value, alias, theme) {
   if (isObject(value)) {
-    const {
-      _,
-      base,
-      ...rest
-    } = value;
-    const css = {
-      [alias]: _ ?? base
-    };
+    var _ = value._,
+      base = value.base,
+      rest = _objectWithoutProperties(value, ["_", "base"]);
+    var css = _defineProperty({}, alias, _ !== null && _ !== void 0 ? _ : base);
     if (theme) {
-      const {
-        breakpoints
-      } = theme;
-      Object.keys(breakpoints).forEach(key => {
-        css[breakpoints[key]] = {
-          [alias]: rest[key]
-        };
+      var breakpoints = theme.breakpoints;
+      Object.keys(breakpoints).forEach(function (key) {
+        css[breakpoints[key]] = _defineProperty({}, alias, rest[key]);
       });
     }
     return css;
   }
-  return {
-    [alias]: value
-  };
+  return _defineProperty({}, alias, value);
 };
-export const serializeTokens = (tokens, prefix, theme) => {
-  const tokenReferences = {};
-  const tokenVariables = {};
-  Object.keys(tokens).forEach(key => {
-    const varName = `--${prefix}-${key}`;
-    tokenReferences[key] = `var(${varName})`;
+export var serializeTokens = function serializeTokens(tokens, prefix, theme) {
+  var tokenReferences = {};
+  var tokenVariables = {};
+  Object.keys(tokens).forEach(function (key) {
+    var varName = "--".concat(prefix, "-").concat(key);
+    tokenReferences[key] = "var(".concat(varName, ")");
     merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
   });
   return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.21.4-alpha.fcfaa6.0",
+  "version": "0.21.4",
   "author": "codecaaron <aaron@codecademy.com>",
   "dependencies": {
     "csstype": "^3.0.7",
@@ -32,5 +32,5 @@
     "build": "nx build @codecademy/variance"
   },
   "types": "dist/index.d.ts",
-  "gitHead": "89ca070ee398d3e0f8ef8962c5482f4314c68f3c"
+  "gitHead": "a668807575304a6b738d5b328cbb5b1b108f3bd3"
 }