@codecademy/variance 0.21.4 → 0.21.5-alpha.3f5626.0

package/dist/core.js

@@ -1,15 +1,3 @@
-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';
@@ -20,24 +8,27 @@ 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 var variance = {
+export const variance = {
   // Parser to handle any set of configured props
-  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) {
+  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) {
         // Save the breakpoints if we can
-        breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
+        breakpoints = parseBreakpoints(theme?.breakpoints);
       }
 
       // 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)) {
+      propNames.forEach(prop => {
+        const property = config[prop];
+        const value = get(props, prop);
+        switch (typeof value) {
           case 'string':
           case 'number':
           case 'function':
@@ -61,38 +52,38 @@ export var variance = {
     };
     // return the parser function with the resulting meta information for further composition
     return Object.assign(parser, {
-      propNames: propNames,
-      config: config
+      propNames,
+      config
     });
   },
   // Given a single property configuration enrich the config with a transform function
   // 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;
-    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 = {};
+  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 = {};
         if (isUndefined(value)) {
           return styles;
         }
-        var useTransform = false;
-        var intermediateValue;
-        var scaleValue;
-        switch (_typeof(value)) {
+        let useTransform = false;
+        let intermediateValue;
+        let scaleValue;
+        switch (typeof value) {
           case 'number':
           case 'string':
             scaleValue = getScaleValue(value, props);
             useTransform = scaleValue !== undefined || alwaysTransform;
-            intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
+            intermediateValue = scaleValue ?? value;
             break;
           case 'function':
             if (props.theme) {
@@ -105,12 +96,12 @@ export var variance = {
 
         // 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;
+        properties.forEach(property => {
+          let 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;
@@ -122,100 +113,110 @@ export var variance = {
         // return the resulting styles object
         return styles;
       }
-    });
+    };
   },
-  compose: function compose() {
+  compose() {
     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);
-    }, {}));
+    return this.createParser(parsers.reduce((carry, parser) => ({
+      ...carry,
+      ...parser.config
+    }), {}));
   },
-  createCss: function createCss(config) {
-    var parser = this.create(config);
-    var filteredProps = parser.propNames;
-    return function (cssProps) {
-      var cache;
-      var allKeys = Object.keys(cssProps);
+  createCss(config) {
+    const parser = this.create(config);
+    const filteredProps = parser.propNames;
+    return cssProps => {
+      let cache;
+      const 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 */
-      var selectors = allKeys.filter(function (key) {
-        return !filteredProps.includes(key) && isObject(cssProps[key]);
-      });
+      const selectors = allKeys.filter(key => !filteredProps.includes(key) && isObject(cssProps[key]));
 
       /** 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;
+      const staticCss = getStaticCss(cssProps, ['theme',
+      // Just in case this gets passed somehow
+      ...selectors, ...filteredProps]);
+      return _ref => {
+        let {
+          theme
+        } = _ref;
         if (cache) return cache;
-        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
-          })));
+        const css = parser({
+          ...cssProps,
+          theme
+        });
+        selectors.forEach(selector => {
+          const selectorConfig = cssProps[selector] ?? {};
+          css[selector] = {
+            ...getStaticCss(selectorConfig, filteredProps),
+            ...parser({
+              ...selectorConfig,
+              theme
+            })
+          };
         });
 
         /** Merge the static and generated css and save it to the cache */
-        cache = _objectSpread(_objectSpread({}, staticCss), css);
+        cache = {
+          ...staticCss,
+          ...css
+        };
         return cache;
       };
     };
   },
-  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];
+  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];
         variantFns[variantKey] = css(cssProps);
       });
-      return function (props) {
-        var _variantFns;
-        var _props$prop = props[prop],
-          selected = _props$prop === void 0 ? defaultVariant : _props$prop;
-        var styles = {};
+      return props => {
+        const {
+          [prop]: selected = defaultVariant
+        } = props;
+        const 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));
+        return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
       };
     };
   },
-  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];
+  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];
         stateFns[stateKey] = css(cssProps);
       });
-      return function (props) {
-        var styles = {};
-        orderedStates.forEach(function (state) {
+      return props => {
+        const styles = {};
+        orderedStates.forEach(state => {
           merge(styles, props[state] && stateFns[state](props));
         });
         return styles;
       };
     };
   },
-  create: function create(config) {
-    var transforms = {};
+  create(config) {
+    const transforms = {};
 
     // Create a transform function for each of the props
-    for (var prop in config) {
+    for (const prop in config) {
       if (typeof prop === 'string') {
         transforms[prop] = this.createTransform(prop, config[prop]);
       }

package/dist/createTheme/createTheme.js

@@ -1,151 +1,121 @@
-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';
-var _theme = new WeakMap();
-var ThemeBuilder = /*#__PURE__*/function () {
-  function ThemeBuilder(baseTheme) {
-    _classCallCheck(this, ThemeBuilder);
-    _theme.set(this, {
-      writable: true,
-      value: {}
-    });
-    _classPrivateFieldSet(this, _theme, baseTheme);
+class ThemeBuilder {
+  #theme = (() => ({}))();
+  constructor(baseTheme) {
+    this.#theme = baseTheme;
   }
   /**
    *
    * @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;
-      _classPrivateFieldSet(this, _theme, merge({}, _classPrivateFieldGet(this, _theme), (_merge = {}, _defineProperty(_merge, key, tokens), _defineProperty(_merge, "_variables", {
+  createScaleVariables(key) {
+    const {
+      variables,
+      tokens
+    } = serializeTokens(this.#theme[key], key, this.#theme);
+    this.#theme = merge({}, this.#theme, {
+      [key]: tokens,
+      _variables: {
         root: variables
-      }), _defineProperty(_merge, "_tokens", _defineProperty({}, key, _classPrivateFieldGet(this, _theme)[key])), _merge)));
-      return this;
-    }
+      },
+      _tokens: {
+        [key]: this.#theme[key]
+      }
+    });
+    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 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 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 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 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 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 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;
-    }
+  /**
+   *
+   * @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;
+  }
 
-    /**
-     * 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;
-}();
+  /**
+   * This finalizes the theme build and returns the final theme and variables to be provided.
+   */
+  build() {
+    return merge({}, this.#theme, {
+      _variables: {},
+      _tokens: {}
+    });
+  }
+}
 export function createTheme(base) {
   return new ThemeBuilder(base);
 }

package/dist/createTheme/createTheme.test.js

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

package/dist/scales/createScale.js

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

package/dist/scales/createScaleLookup.js

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

package/dist/transforms/transformSize.js

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

package/dist/utils/flattenScale.js

@@ -1,9 +1,3 @@
-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';
 
 /**
@@ -11,13 +5,31 @@ 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(function (carry, key) {
-    var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
-    var current = object[key];
+  return Object.keys(object).reduce((carry, key) => {
+    const nextKey = path ? `${path}${key === '_' ? '' : `-${key}`}` : key;
+    const current = object[key];
     if (isObject(current)) {
-      return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
+      return {
+        ...carry,
+        ...flattenScale(current, nextKey)
+      };
     }
-    return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
+    return {
+      ...carry,
+      [nextKey]: object[key]
+    };
   }, {});
 }

package/dist/utils/getStaticProperties.js

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

package/dist/utils/propNames.js

@@ -1,10 +1,10 @@
-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 = {
+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 = {
   A_BEFORE_B: -1,
   B_BEFORE_A: 1,
   EQUAL: 1
 };
-var compare = function compare(a, b) {
+const compare = (a, b) => {
   if (a < b) return SORT.A_BEFORE_B;
   if (b < a) return SORT.B_BEFORE_A;
   return SORT.EQUAL;
@@ -14,32 +14,34 @@ var compare = function compare(a, b) {
  * 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];
-    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);
+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));
     }
-    if (aIsShorthand) return SORT.A_BEFORE_B;
-    if (bIsShorthand) return SORT.B_BEFORE_A;
-    return SORT.EQUAL;
-  });
-};
+    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,79 +1,76 @@
-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';
-var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
 
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
  */
-export var parseBreakpoints = function parseBreakpoints(breakpoints) {
+export const 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
+  const {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  } = breakpoints ?? {};
+
+  // Ensure order for mapping
   return {
     map: breakpoints,
     array: [xs, sm, md, lg, xl]
   };
 };
-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
+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
   if (_) Object.assign(styles, styleFn(_, prop, props));
 
   // Map over remaining keys and merge the corresponding breakpoint styles
   // for that property.
-  Object.keys(breakpoints).forEach(function (breakpointKey) {
-    var bpStyles = rest[breakpointKey];
+  Object.keys(breakpoints).forEach(breakpointKey => {
+    const bpStyles = rest[breakpointKey];
     if (typeof bpStyles === 'undefined') return;
-    Object.assign(styles, _defineProperty({}, breakpoints[breakpointKey], styleFn(bpStyles, prop, props)));
+    Object.assign(styles, {
+      [breakpoints[breakpointKey]]: styleFn(bpStyles, prop, props)
+    });
   });
   return 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
+export const arrayParser = (value, props, config, breakpoints) => {
+  const styles = {};
+  const {
+    styleFn,
+    prop
+  } = config;
+  const [_, ...rest] = value;
+  // 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(function (val, i) {
-    var breakpointKey = breakpoints[i];
+  rest.forEach((val, i) => {
+    const breakpointKey = breakpoints[i];
     if (!breakpointKey || typeof val === 'undefined') return;
-    Object.assign(styles, _defineProperty({}, breakpointKey, styleFn(val, prop, props)));
+    Object.assign(styles, {
+      [breakpointKey]: styleFn(val, prop, props)
+    });
   });
   return styles;
 };
-export var orderBreakpoints = function orderBreakpoints(styles, breakpoints) {
-  var orderedStyles = omit(styles, breakpoints);
-  breakpoints.forEach(function (bp) {
+export const orderBreakpoints = (styles, breakpoints) => {
+  const orderedStyles = omit(styles, breakpoints);
+  breakpoints.forEach(bp => {
     if (styles[bp]) {
       orderedStyles[bp] = styles[bp];
     }

package/dist/utils/serializeTokens.js

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