@animus-ui/core 0.1.1-beta.13 → 0.1.1-beta.14

package/dist/index.js

@@ -1,1229 +1,2068 @@
 import { isNumber, get, isArray, isObject, isString, isUndefined, identity, mapValues, omit, intersection, merge, pick, isEmpty, set, keys } from 'lodash';
-import styled from '@emotion/styled';
-
-const createScale = () => [];
-
-const percentageOrAbsolute = (coordinate) => {
-    if (coordinate === 0) {
-        return coordinate;
-    }
-    if (coordinate <= 1 && coordinate >= -1) {
-        return `${coordinate * 100}%`;
-    }
-    return `${coordinate}px`;
-};
-const valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
-const size = (value) => {
-    if (isNumber(value)) {
-        return percentageOrAbsolute(value);
-    }
-    if (value.includes('calc')) {
-        return value;
-    }
-    const [match, number, unit] = valueWithUnit.exec(value) || [];
-    if (match === undefined) {
-        return value;
-    }
-    const numericValue = parseFloat(number);
-    return !unit ? percentageOrAbsolute(numericValue) : `${numericValue}${unit}`;
+import _styled from '@emotion/styled/base';
+
+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 _objectSpread2(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 _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 _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+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;
+}
+
+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 _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _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 _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 _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 _classPrivateFieldGet(receiver, privateMap) {
+  var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get");
+
+  return _classApplyDescriptorGet(receiver, descriptor);
+}
+
+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 _classApplyDescriptorGet(receiver, descriptor) {
+  if (descriptor.get) {
+    return descriptor.get.call(receiver);
+  }
+
+  return descriptor.value;
+}
+
+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;
+  }
+}
+
+function _checkPrivateRedeclaration(obj, privateCollection) {
+  if (privateCollection.has(obj)) {
+    throw new TypeError("Cannot initialize the same private elements twice on an object");
+  }
+}
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) {
+  _checkPrivateRedeclaration(obj, privateMap);
+
+  privateMap.set(obj, value);
+}
+
+var createScale = function createScale() {
+  return [];
 };
 
-const gridItemMap = {
-    max: 'max-content',
-    min: 'min-content',
-};
-const unitlessNumber = new RegExp(/^[0-9]*$/);
-const isUnitlessNumber = (val) => unitlessNumber.test(val);
-const gridItem = (item) => {
-    const template = isUnitlessNumber(item)
-        ? `${item}fr`
-        : get(gridItemMap, item, item);
-    return `minmax(0, ${template})`;
-};
-const repeatGridItem = (item, count) => {
-    const template = gridItem(item);
-    return count > 1 ? `repeat(${count}, ${template})` : template;
-};
-const parseGridRatio = (val) => {
-    const items = val.split(':');
-    let repeated = ['', 0];
-    let gridStyle = '';
-    for (let i = 0; i < items.length + 1; i += 1) {
-        const delimiter = gridStyle.length > 0 ? ' ' : '';
-        const curr = items[i];
-        if (repeated?.[0] !== curr) {
-            if (repeated[0].length)
-                gridStyle += delimiter + repeatGridItem(...repeated);
-            if (curr)
-                repeated = [curr, 1];
-        }
-        else {
-            repeated[1] += 1;
-        }
-    }
-    return gridStyle;
-};
-const gridItemRatio = (val) => {
-    return isNumber(val) ? repeatGridItem('1', val) : parseGridRatio(val);
+var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
+  if (coordinate === 0) {
+    return coordinate;
+  }
+
+  if (coordinate <= 1 && coordinate >= -1) {
+    return "".concat(coordinate * 100, "%");
+  }
+
+  return "".concat(coordinate, "px");
 };
+var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
+var size = function size(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 numberToTemplate = (val, template) => (typeof val === 'number' ? template(val) : val);
-const numberToPx = (val) => {
-    return numberToTemplate(val, (pixels) => `${pixels}px`);
+  if (match === undefined) {
+    return value;
+  }
+
+  var numericValue = parseFloat(number);
+  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
+};
+
+var gridItemMap = {
+  max: 'max-content',
+  min: 'min-content'
 };
+var unitlessNumber = new RegExp(/^[0-9]*$/);
 
-const borderShorthand = (val) => {
-    return numberToTemplate(val, (width) => `${width}px solid currentColor`);
+var isUnitlessNumber = function isUnitlessNumber(val) {
+  return unitlessNumber.test(val);
 };
 
-const compatTheme = {
-    breakpoints: {
-        xs: 480,
-        sm: 768,
-        md: 1024,
-        lg: 1200,
-        xl: 1440,
-    },
-    spacing: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96],
-    fontSize: [64, 44, 34, 26, 22, 20, 18, 16, 14],
-    lineHeight: {
-        body: 1.5,
-        heading: 1,
-    },
-    fontWeight: [400, 600, 700],
-    fontFamily: {
-        body: 'Verdana, sans-serif',
-        heading: 'Verdana, Lato, sans-serif',
-        monospace: 'monospace',
-    },
-    radii: [2, 4, 6, 8],
-    borders: [1, 2, 3],
-    colors: {},
-    modes: {},
-    mode: undefined,
+var gridItem = function gridItem(item) {
+  var template = isUnitlessNumber(item) ? "".concat(item, "fr") : get(gridItemMap, item, item);
+  return "minmax(0, ".concat(template, ")");
 };
+var repeatGridItem = function repeatGridItem(item, count) {
+  var template = gridItem(item);
+  return count > 1 ? "repeat(".concat(count, ", ").concat(template, ")") : template;
+};
+var parseGridRatio = function parseGridRatio(val) {
+  var items = val.split(':');
+  var repeated = ['', 0];
+  var gridStyle = '';
+
+  for (var i = 0; i < items.length + 1; i += 1) {
+    var _repeated;
+
+    var delimiter = gridStyle.length > 0 ? ' ' : '';
+    var curr = items[i];
+
+    if (((_repeated = repeated) === null || _repeated === void 0 ? void 0 : _repeated[0]) !== curr) {
+      if (repeated[0].length) gridStyle += delimiter + repeatGridItem.apply(void 0, _toConsumableArray(repeated));
+      if (curr) repeated = [curr, 1];
+    } else {
+      repeated[1] += 1;
+    }
+  }
+
+  return gridStyle;
+};
+var gridItemRatio = function gridItemRatio(val) {
+  return isNumber(val) ? repeatGridItem('1', val) : parseGridRatio(val);
+};
+
+var numberToTemplate = function numberToTemplate(val, template) {
+  return typeof val === 'number' ? template(val) : val;
+};
+var numberToPx = function numberToPx(val) {
+  return numberToTemplate(val, function (pixels) {
+    return "".concat(pixels, "px");
+  });
+};
+
+var borderShorthand = function borderShorthand(val) {
+  return numberToTemplate(val, function (width) {
+    return "".concat(width, "px solid currentColor");
+  });
+};
+
+var compatTheme = {
+  breakpoints: {
+    xs: 480,
+    sm: 768,
+    md: 1024,
+    lg: 1200,
+    xl: 1440
+  },
+  spacing: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96],
+  fontSize: [64, 44, 34, 26, 22, 20, 18, 16, 14],
+  lineHeight: {
+    body: 1.5,
+    heading: 1
+  },
+  fontWeight: [400, 600, 700],
+  fontFamily: {
+    body: 'Verdana, sans-serif',
+    heading: 'Verdana, Lato, sans-serif',
+    monospace: 'monospace'
+  },
+  radii: [2, 4, 6, 8],
+  borders: [1, 2, 3],
+  colors: {},
+  modes: {},
+  mode: undefined
+};
+
+var lookupScaleValue = function lookupScaleValue(val, scale, theme) {
+  if (isArray(scale)) {
+    return val;
+  }
+
+  if (isObject(scale)) {
+    return get(scale, val);
+  }
+
+  if (isString(scale)) {
+    var usedScale = get(theme, scale, get(compatTheme, scale));
+    if (!usedScale) return undefined;
+    return isArray(usedScale) ? val : get(usedScale, val);
+  }
+
+  return undefined;
+};
+
+var createPropertyStyle = function createPropertyStyle(value, props, config) {
+  var _scaleValue;
+
+  var styles = {};
+  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,
+      variable = config.variable;
+  var alwaysTransform = scale === undefined || isArray(scale);
+
+  if (isUndefined(value)) {
+    return styles;
+  }
+
+  var useTransform = false;
+  var intermediateValue;
+  var scaleValue;
+
+  switch (_typeof(value)) {
+    case 'number':
+    case 'string':
+      scaleValue = lookupScaleValue(value, scale, props === null || props === void 0 ? void 0 : props.theme);
+      useTransform = scaleValue !== undefined || alwaysTransform;
+      intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
+      break;
 
-const lookupScaleValue = (val, scale, theme) => {
-    if (isArray(scale)) {
-        return val;
-    }
-    if (isObject(scale)) {
-        return get(scale, val);
-    }
-    if (isString(scale)) {
-        const usedScale = get(theme, scale, get(compatTheme, scale));
-        if (!usedScale)
-            return undefined;
-        return isArray(usedScale) ? val : get(usedScale, val);
-    }
-    return undefined;
+    case 'function':
+      if (props.theme) {
+        intermediateValue = value(props.theme);
+      }
+
+      break;
+
+    default:
+      return styles;
+  } // for each property look up the scale value from theme if passed and apply any
+  // final transforms to the value
+
+
+  properties.forEach(function (property) {
+    var styleValue = intermediateValue;
+
+    if (useTransform && !isUndefined(styleValue)) {
+      styleValue = transform(styleValue, property, props);
+    }
+
+    switch (_typeof(styleValue)) {
+      case 'number':
+      case 'string':
+        return styles[property] = styleValue;
+
+      case 'object':
+        return Object.assign(styles, styleValue);
+    }
+  });
+
+  if (variable) {
+    var styleValue = intermediateValue;
+
+    if (useTransform && !isUndefined(styleValue)) {
+      styleValue = transform(styleValue, property, props);
+    }
+
+    if (styleValue && _typeof(styleValue) !== 'object') {
+      styles[variable] = styleValue;
+    }
+  } // return the resulting styles object
+
+
+  return styles;
 };
 
-const createPropertyStyle = (value, props, config) => {
-    const styles = {};
-    const { transform = identity, property, properties = [property], scale, variable, } = config;
-    const alwaysTransform = scale === undefined || isArray(scale);
-    if (isUndefined(value)) {
-        return styles;
-    }
-    let useTransform = false;
-    let intermediateValue;
-    let scaleValue;
-    switch (typeof value) {
-        case 'number':
-        case 'string':
-            scaleValue = lookupScaleValue(value, scale, props?.theme);
-            useTransform = scaleValue !== undefined || alwaysTransform;
-            intermediateValue = scaleValue ?? value;
-            break;
-        case 'function':
-            if (props.theme) {
-                intermediateValue = value(props.theme);
-            }
-            break;
-        default:
-            return styles;
-    }
-    // for each property look up the scale value from theme if passed and apply any
-    // final transforms to the value
-    properties.forEach((property) => {
-        let styleValue = intermediateValue;
-        if (useTransform && !isUndefined(styleValue)) {
-            styleValue = transform(styleValue, property, props);
-        }
-        switch (typeof styleValue) {
-            case 'number':
-            case 'string':
-                return (styles[property] = styleValue);
-            case 'object':
-                return Object.assign(styles, styleValue);
-        }
-    });
-    if (variable) {
-        let styleValue = intermediateValue;
-        if (useTransform && !isUndefined(styleValue)) {
-            styleValue = transform(styleValue, property, props);
-        }
-        if (styleValue && typeof styleValue !== 'object') {
-            styles[variable] = styleValue;
-        }
-    }
-    // return the resulting styles object
-    return styles;
+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 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,
-};
-const compare = (a, b) => {
-    if (a < b)
-        return SORT.A_BEFORE_B;
-    if (b < a)
-        return SORT.B_BEFORE_A;
-    return SORT.EQUAL;
-};
+var compare = function compare(a, b) {
+  if (a < b) return SORT.A_BEFORE_B;
+  if (b < a) return SORT.B_BEFORE_A;
+  return SORT.EQUAL;
+};
 /**
  * Orders all properties by the most dependent props
  * @param config
- */
-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 (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;
-});
-
-const BREAKPOINT_KEYS$1 = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+ */
+
+
+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 (aIsShorthand) return SORT.A_BEFORE_B;
+    if (bIsShorthand) return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+  });
+};
+
+var _excluded$1 = ["_"];
+var BREAKPOINT_KEYS$1 = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
- */
-const templateMediaQuery$1 = (breakpoint) => `@media screen and (min-width: ${breakpoint}px)`;
-const createMediaQueries$1 = (breakpoints) => {
-    if (breakpoints === undefined)
-        return null;
-    const { xs, sm, md, lg, xl } = breakpoints ?? {};
-    // Ensure order for mapping
-    return {
-        map: mapValues(breakpoints, templateMediaQuery$1),
-        array: [xs, sm, md, lg, xl].map(templateMediaQuery$1),
-    };
-};
-const isMediaArray$1 = (val) => Array.isArray(val);
-const isMediaMap$1 = (val) => intersection(Object.keys(val), BREAKPOINT_KEYS$1).length > 0;
-const objectParser$1 = (value, props, config, breakpoints) => {
-    const styles = {};
-    const { _, ...rest } = value;
-    // the keyof 'base' is base styles
-    if (_)
-        Object.assign(styles, createPropertyStyle(_, props, config));
-    // Map over remaining keys and merge the corresponding breakpoint styles
-    // for that property.
-    Object.keys(breakpoints).forEach((breakpointKey) => {
-        const bpStyles = rest[breakpointKey];
-        if (typeof bpStyles === 'undefined')
-            return;
-        Object.assign(styles, {
-            [breakpoints[breakpointKey]]: createPropertyStyle(bpStyles, props, config),
-        });
-    });
-    return styles;
-};
-const arrayParser$1 = (value, props, config, breakpoints) => {
-    const styles = {};
-    const [_, ...rest] = value;
-    // the first index is base styles
-    if (_)
-        Object.assign(styles, createPropertyStyle(_, props, config));
-    // Map over each value in the array and merge the corresponding breakpoint styles
-    // for that property.
-    rest.forEach((val, i) => {
-        const breakpointKey = breakpoints[i];
-        if (!breakpointKey || typeof val === 'undefined')
-            return;
-        Object.assign(styles, {
-            [breakpointKey]: createPropertyStyle(val, props, config),
-        });
-    });
-    return styles;
-};
-const orderBreakpoints$1 = (styles, breakpoints) => {
-    const orderedStyles = omit(styles, breakpoints);
-    breakpoints.forEach((bp) => {
-        if (styles[bp]) {
-            orderedStyles[bp] = styles[bp];
-        }
-    });
-    return orderedStyles;
+ */
+
+var templateMediaQuery$1 = function templateMediaQuery(breakpoint) {
+  return "@media screen and (min-width: ".concat(breakpoint, "px)");
 };
 
-const renderPropValue$1 = (styles, prop, props, property, ctx) => {
-    const value = get(props, prop);
-    switch (typeof value) {
-        case 'string':
-        case 'number':
-        case 'function':
-            return Object.assign(styles, createPropertyStyle(value, props, property));
-        // handle any props configured with the responsive notation
-        case 'object':
-            if (!ctx.mediaQueries) {
-                return;
-            }
-            // If it is an array the order of values is smallest to largest: [_, xs, ...]
-            if (isMediaArray$1(value)) {
-                return merge(styles, arrayParser$1(value, props, property, ctx.mediaQueries.array));
-            }
-            // Check to see if value is an object matching the responsive syntax and generate the styles.
-            if (value && isMediaMap$1(value)) {
-                return merge(styles, objectParser$1(value, props, property, ctx.mediaQueries.map));
-            }
-    }
-};
-function createParser$1(config) {
-    const propNames = orderPropNames(config);
-    const ctx = {
-        mediaQueries: null,
-    };
-    const parser = (props, isCss = false) => {
-        const styles = {};
-        const { theme } = props;
-        // Attempt to cache the breakpoints if we have not yet or if theme has become available.
-        if (ctx.mediaQueries === null) {
-            // Save the breakpoints if we can
-            ctx.mediaQueries = createMediaQueries$1(theme?.breakpoints ?? compatTheme.breakpoints);
-        }
-        if (!isCss) {
-            // Loops over all prop names on the configured config to check for configured styles
-            propNames.forEach((prop) => {
-                const property = config[prop];
-                renderPropValue$1(styles, prop, props, property, ctx);
-            });
-        }
-        else {
-            // Loops over all prop names on the configured config to check for configured styles
-            Object.keys(props).forEach((prop) => {
-                const property = config[prop];
-                if (property) {
-                    renderPropValue$1(styles, prop, props, property, ctx);
-                }
-                else if (prop !== 'theme') {
-                    Object.assign(styles, { [prop]: get(props, prop) });
-                }
-            });
-        }
-        if (ctx.mediaQueries !== null)
-            return orderBreakpoints$1(styles, ctx.mediaQueries.array);
-        return styles;
-    };
-    // return the parser function with the resulting meta information for further composition
-    return Object.assign(parser, { propNames, config });
-}
+var createMediaQueries$1 = function createMediaQueries(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
+
 
-/* eslint-disable guard-for-in */
-const getSelectors = (base = {}, variants = {}, states = {}, filters) => {
-    const rules = {};
-    Object.entries(base).forEach(([key, styles]) => {
-        if (!filters.includes(key) && isObject(styles)) {
-            set(rules, [key, 'base'], styles);
-        }
-        else {
-            set(rules, ['primary', 'base', key], styles);
-        }
-    });
-    Object.entries(variants).forEach(([key, { variants: variantConfig }]) => {
-        Object.entries(variantConfig).forEach(([option, optionStyles]) => {
-            const optionId = `${key}-${option}`;
-            Object.entries(optionStyles).forEach(([key, styles]) => {
-                if (!filters.includes(key) && isObject(styles)) {
-                    set(rules, [key, optionId], styles);
-                }
-                else {
-                    set(rules, ['primary', optionId, key], styles);
-                }
-            });
-        });
-    });
-    Object.entries(states).forEach(([optionId, optionStyles]) => {
-        Object.entries(optionStyles).forEach(([key, styles]) => {
-            if (!filters.includes(key) && isObject(styles)) {
-                set(rules, [key, optionId], styles);
-            }
-            else {
-                set(rules, ['primary', optionId, key], styles);
-            }
-        });
-    });
-    return rules;
-};
-const createGetActiveStyleIds = (variants, states) => {
-    const vIds = Object.keys(variants);
-    const sIds = Object.keys(states);
-    return (props) => {
-        const activeIds = [];
-        vIds.forEach((id) => {
-            if (props[id]) {
-                activeIds.push(`${id}-${props[id]}`);
-            }
-        });
-        sIds.forEach((id) => {
-            if (props[id]) {
-                activeIds.push(id);
-            }
-        });
-        return activeIds;
-    };
-};
-const extractBreakpointStyles = (styles, medias) => {
-    const unscoped = {};
-    const breakpoint = {};
-    Object.entries(styles).forEach(([rule, value]) => {
-        const target = medias.includes(rule) ? breakpoint : unscoped;
-        target[rule] = value;
-    });
-    return [unscoped, breakpoint];
-};
-const applyOverride = (override = {}, baseResult, breakpointResult, parser, theme, media) => {
-    const [overrideStyles, overrideBreakpointStyles] = extractBreakpointStyles(parser({ ...override, theme }, true), media);
-    for (const rule in overrideStyles) {
-        baseResult[rule] = overrideStyles[rule];
-    }
-    media.forEach((mq) => {
-        const mqOverride = overrideBreakpointStyles[mq];
-        if (!mqOverride || isEmpty(mqOverride))
-            return;
-        if (!breakpointResult[mq]) {
-            breakpointResult[mq] = {};
-        }
-        const mqStyle = breakpointResult[mq];
-        for (const rule in mqOverride) {
-            mqStyle[rule] = mqOverride[rule];
-        }
-    });
-};
-const applyStyle = (resultStyles, config, props, ctx) => {
-    const { base } = config;
-    const { parser, getMediaSelectors, getActiveOverrides } = ctx;
-    const { theme } = props;
-    const overrides = Object.values(pick(config, getActiveOverrides(props)));
-    const media = getMediaSelectors(props);
-    const [styles, breakpointStyles] = extractBreakpointStyles(parser({ ...base, theme }, true), media);
-    for (const rule in styles) {
-        resultStyles[rule] = styles[rule];
-    }
-    overrides.forEach((override) => {
-        applyOverride(override, resultStyles, breakpointStyles, parser, theme, media);
-    });
-    media.forEach((media) => {
-        const bp = breakpointStyles[media];
-        if (!isEmpty(bp)) {
-            resultStyles[media] = bp;
-        }
-    });
-};
-const createStylist = (parser, base = {}, variants = {}, states = {}) => {
-    const selectorGroups = getSelectors(base, variants, states, parser.propNames);
-    const context = {
-        parser,
-        getMediaSelectors: ({ theme }) => {
-            const breakpoints = theme?.breakpoints ?? compatTheme.breakpoints;
-            return ['xs', 'sm', 'md', 'lg', 'xl'].map((key) => breakpoints[key]);
-        },
-        getActiveOverrides: createGetActiveStyleIds(variants, states),
-    };
-    return (props) => {
-        const { vars } = props;
-        const result = { ...vars };
-        Object.entries(selectorGroups).forEach(([selectorId, config = {}]) => {
-            if (selectorId === 'primary') {
-                applyStyle(result, config, props, context);
-            }
-            else {
-                result[selectorId] = {};
-                applyStyle(result[selectorId], config, props, context);
-            }
-        });
-        applyStyle(result, { base: parser(props) }, props, context);
-        return result;
-    };
+  return {
+    map: mapValues(breakpoints, templateMediaQuery$1),
+    array: [xs, sm, md, lg, xl].map(templateMediaQuery$1)
+  };
 };
+var isMediaArray$1 = function isMediaArray(val) {
+  return Array.isArray(val);
+};
+var isMediaMap$1 = function isMediaMap(val) {
+  return intersection(Object.keys(val), BREAKPOINT_KEYS$1).length > 0;
+};
+var objectParser$1 = function objectParser(value, props, config, breakpoints) {
+  var styles = {};
+
+  var _ = value._,
+      rest = _objectWithoutProperties(value, _excluded$1); // the keyof 'base' is base styles
+
+
+  if (_) Object.assign(styles, createPropertyStyle(_, props, config)); // Map over remaining keys and merge the corresponding breakpoint styles
+  // for that property.
+
+  Object.keys(breakpoints).forEach(function (breakpointKey) {
+    var bpStyles = rest[breakpointKey];
+    if (typeof bpStyles === 'undefined') return;
+    Object.assign(styles, _defineProperty({}, breakpoints[breakpointKey], createPropertyStyle(bpStyles, props, config)));
+  });
+  return styles;
+};
+var arrayParser$1 = function arrayParser(value, props, config, breakpoints) {
+  var styles = {};
+
+  var _value = _toArray(value),
+      _ = _value[0],
+      rest = _value.slice(1); // the first index is base styles
+
+
+  if (_) Object.assign(styles, createPropertyStyle(_, props, config)); // Map over each value in the array and merge the corresponding breakpoint styles
+  // for that property.
+
+  rest.forEach(function (val, i) {
+    var breakpointKey = breakpoints[i];
+    if (!breakpointKey || typeof val === 'undefined') return;
+    Object.assign(styles, _defineProperty({}, breakpointKey, createPropertyStyle(val, props, config)));
+  });
+  return styles;
+};
+var orderBreakpoints$1 = function orderBreakpoints(styles, breakpoints) {
+  var orderedStyles = omit(styles, breakpoints);
+  breakpoints.forEach(function (bp) {
+    if (styles[bp]) {
+      orderedStyles[bp] = styles[bp];
+    }
+  });
+  return orderedStyles;
+};
+
+var renderPropValue$1 = function renderPropValue(styles, prop, props, property, ctx) {
+  var value = get(props, prop);
+
+  switch (_typeof(value)) {
+    case 'string':
+    case 'number':
+    case 'function':
+      return Object.assign(styles, createPropertyStyle(value, props, property));
+    // handle any props configured with the responsive notation
+
+    case 'object':
+      if (!ctx.mediaQueries) {
+        return;
+      } // If it is an array the order of values is smallest to largest: [_, xs, ...]
+
+
+      if (isMediaArray$1(value)) {
+        return merge(styles, arrayParser$1(value, props, property, ctx.mediaQueries.array));
+      } // Check to see if value is an object matching the responsive syntax and generate the styles.
 
-class AnimusWithAll {
-    propRegistry = {};
-    groupRegistry = {};
-    parser = {};
-    baseStyles = {};
-    statesConfig = {};
-    variants = {};
-    activeGroups = {};
-    custom = {};
-    constructor(props, groups, parser, base, variants, states, activeGroups, custom) {
-        this.propRegistry = props;
-        this.groupRegistry = groups;
-        this.parser = parser;
-        this.baseStyles = base;
-        this.variants = variants;
-        this.statesConfig = states;
-        this.activeGroups = activeGroups;
-        this.custom = custom;
-    }
-    asComponent(component) {
-        const handler = createStylist(createParser$1({ ...this.parser.config, ...this.custom }), this.baseStyles, this.variants, this.statesConfig);
-        return styled(component)(handler);
-    }
-    build() {
-        const handler = createStylist(createParser$1({ ...this.parser.config, ...this.custom }), this.baseStyles, this.variants, this.statesConfig);
-        return handler;
-    }
-}
-class AnimusWithSystem extends AnimusWithAll {
-    constructor(props, groups, parser, base, variants, states, activeGroups) {
-        super(props, groups, parser, base, variants, states, activeGroups, {});
-    }
-    props(config) {
-        return new AnimusWithAll(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, this.activeGroups, config);
-    }
-}
-class AnimusWithStates extends AnimusWithSystem {
-    constructor(props, groups, parser, base, variants, states) {
-        super(props, groups, parser, base, variants, states, {});
-    }
-    groups(config) {
-        return new AnimusWithSystem(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, config);
-    }
-}
-class AnimusWithVariants extends AnimusWithStates {
-    constructor(props, groups, parser, base, variants) {
-        super(props, groups, parser, base, variants, {});
-    }
-    states(config) {
-        return new AnimusWithStates(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, config);
-    }
-    variant(options) {
-        const prop = options.prop || 'variant';
-        return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, { [prop]: options }));
-    }
-}
-class AnimusWithBase extends AnimusWithVariants {
-    constructor(props, groups, parser, base) {
-        super(props, groups, parser, base, {});
-    }
-    variant(options) {
-        const prop = options.prop || 'variant';
-        return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, { [prop]: options }));
-    }
-}
-class Animus extends AnimusWithBase {
-    constructor(props, groups) {
-        super(props, groups, createParser$1(props), {});
-    }
-    styles(config) {
-        return new AnimusWithBase(this.propRegistry, this.groupRegistry, this.parser, config);
-    }
-}
 
-class AnimusConfig {
-    #props = {};
-    #groups = {};
-    constructor(config, groups) {
-        this.#props = config || {};
-        this.#groups = groups || {};
-    }
-    addGroup(name, config) {
-        const newGroup = {
-            [name]: Object.keys(config),
-        };
-        return new AnimusConfig({ ...this.#props, ...config }, { ...this.#groups, ...newGroup });
-    }
-    build() {
-        const props = this.#props;
-        const groups = this.#groups;
-        return new Animus(props, groups);
-    }
+      if (value && isMediaMap$1(value)) {
+        return merge(styles, objectParser$1(value, props, property, ctx.mediaQueries.map));
+      }
+
+  }
+};
+
+function createParser$1(config) {
+  var propNames = orderPropNames(config);
+  var ctx = {
+    mediaQueries: null
+  };
+
+  var parser = function parser(props) {
+    var isCss = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var styles = {};
+    var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+
+    if (ctx.mediaQueries === null) {
+      var _theme$breakpoints;
+
+      // Save the breakpoints if we can
+      ctx.mediaQueries = createMediaQueries$1((_theme$breakpoints = theme === null || theme === void 0 ? void 0 : theme.breakpoints) !== null && _theme$breakpoints !== void 0 ? _theme$breakpoints : compatTheme.breakpoints);
+    }
+
+    if (!isCss) {
+      // Loops over all prop names on the configured config to check for configured styles
+      propNames.forEach(function (prop) {
+        var property = config[prop];
+        renderPropValue$1(styles, prop, props, property, ctx);
+      });
+    } else {
+      // Loops over all prop names on the configured config to check for configured styles
+      Object.keys(props).forEach(function (prop) {
+        var property = config[prop];
+
+        if (property) {
+          renderPropValue$1(styles, prop, props, property, ctx);
+        } else if (prop !== 'theme') {
+          Object.assign(styles, _defineProperty({}, prop, get(props, prop)));
+        }
+      });
+    }
+
+    if (ctx.mediaQueries !== null) return orderBreakpoints$1(styles, ctx.mediaQueries.array);
+    return styles;
+  }; // return the parser function with the resulting meta information for further composition
+
+
+  return Object.assign(parser, {
+    propNames: propNames,
+    config: config
+  });
 }
 
-const createAnimus = () => new AnimusConfig();
-
-const color = {
-    color: { property: 'color', scale: 'colors' },
-    textColor: { property: 'color', scale: 'colors' },
-    bg: { property: 'backgroundColor', scale: 'colors' },
-    borderColor: { property: 'borderColor', scale: 'colors' },
-    borderColorX: {
-        property: 'borderColor',
-        properties: ['borderLeftColor', 'borderRightColor'],
-        scale: 'colors',
-    },
-    borderColorY: {
-        property: 'borderColor',
-        properties: ['borderTopColor', 'borderBottomColor'],
-        scale: 'colors',
-    },
-    borderColorLeft: { property: 'borderLeftColor', scale: 'colors' },
-    borderColorRight: { property: 'borderRightColor', scale: 'colors' },
-    borderColorTop: { property: 'borderTopColor', scale: 'colors' },
-    borderColorBottom: { property: 'borderBottomColor', scale: 'colors' },
-};
-const border = {
-    border: {
-        property: 'border',
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderX: {
-        property: 'border',
-        properties: ['borderLeft', 'borderRight'],
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderY: {
-        property: 'border',
-        properties: ['borderTop', 'borderBottom'],
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderTop: {
-        property: 'borderTop',
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderRight: {
-        property: 'borderRight',
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderBottom: {
-        property: 'borderBottom',
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    borderLeft: {
-        property: 'borderLeft',
-        scale: 'borders',
-        transform: borderShorthand,
-    },
-    // Width
-    borderWidth: { property: 'borderWidth' },
-    borderWidthX: {
-        property: 'borderWidth',
-        properties: ['borderLeftWidth', 'borderRightWidth'],
-    },
-    borderWidthY: {
-        property: 'borderWidth',
-        properties: ['borderTopWidth', 'borderBottomWidth'],
-    },
-    borderWidthLeft: { property: 'borderLeftWidth' },
-    borderWidthRight: { property: 'borderRightWidth' },
-    borderWidthTop: { property: 'borderTopWidth' },
-    borderWidthBottom: { property: 'borderBottomWidth' },
-    // Radius
-    borderRadius: {
-        property: 'borderRadius',
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusLeft: {
-        property: 'borderRadius',
-        properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusTop: {
-        property: 'borderRadius',
-        properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusBottom: {
-        property: 'borderRadius',
-        properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusRight: {
-        property: 'borderRadius',
-        properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusTopLeft: {
-        property: 'borderTopLeftRadius',
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusTopRight: {
-        property: 'borderTopRightRadius',
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusBottomRight: {
-        property: 'borderBottomRightRadius',
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    borderRadiusBottomLeft: {
-        property: 'borderBottomLeftRadius',
-        scale: 'radii',
-        transform: numberToPx,
-    },
-    // Style
-    borderStyle: { property: 'borderStyle' },
-    borderStyleX: {
-        property: 'borderStyle',
-        properties: ['borderLeftStyle', 'borderRightStyle'],
-    },
-    borderStyleY: {
-        property: 'borderStyle',
-        properties: ['borderTopStyle', 'borderBottomStyle'],
-    },
-    borderStyleLeft: { property: 'borderLeftStyle' },
-    borderStyleRight: { property: 'borderRightStyle' },
-    borderStyleTop: { property: 'borderTopStyle' },
-    borderStyleBottom: { property: 'borderBottomStyle' },
-};
-const gaps = {
-    gap: { property: 'gap', scale: 'spacing' },
-    rowGap: { property: 'rowGap', scale: 'spacing' },
-    columnGap: { property: 'columnGap', scale: 'spacing' },
-};
-const selfAlignments = {
-    justifySelf: { property: 'justifySelf' },
-    alignSelf: { property: 'alignSelf' },
-    gridArea: { property: 'gridArea' },
-    area: { property: 'gridArea' },
-};
-const alignments = {
-    justifyContent: { property: 'justifyContent' },
-    justifyItems: { property: 'justifyItems' },
-    alignItems: { property: 'alignItems' },
-    alignContent: { property: 'alignContent' },
-    ...selfAlignments,
-};
-const flexItems = {
-    flexBasis: { property: 'flexBasis' },
-    flexShrink: { property: 'flexShrink' },
-    flexGrow: { property: 'flexGrow' },
-    order: { property: 'order' },
-};
-const flex = {
-    flexDirection: { property: 'flexDirection' },
-    flexWrap: { property: 'flexWrap' },
-    flex: { property: 'flex' },
-    ...alignments,
-    ...flexItems,
-    ...gaps,
-};
-const gridItems = {
-    gridColumn: { property: 'gridColumn' },
-    gridRow: { property: 'gridRow' },
-    gridColumnStart: { property: 'gridColumnStart' },
-    gridRowStart: { property: 'gridRowStart' },
-    gridColumnEnd: { property: 'gridColumnEnd' },
-    gridRowEnd: { property: 'gridRowEnd' },
-};
-const grid = {
-    gridAutoColumns: { property: 'gridAutoColumns' },
-    gridAutoRows: { property: 'gridAutoRows' },
-    gridTemplateColumns: { property: 'gridTemplateColumns' },
-    gridTemplateRows: { property: 'gridTemplateRows' },
-    gridTemplateAreas: { property: 'gridTemplateAreas' },
-    gridAutoFlow: { property: 'gridAutoFlow' },
-    flow: {
-        property: 'gridAutoFlow',
-        scale: createScale(),
-    },
-    cols: {
-        property: 'gridTemplateColumns',
-        transform: gridItemRatio,
-        scale: createScale(),
-    },
-    rows: {
-        property: 'gridTemplateRows',
-        transform: gridItemRatio,
-        scale: createScale(),
-    },
-    autoRows: {
-        property: 'gridAutoRows',
-        transform: gridItem,
-    },
-    autoCols: {
-        property: 'gridAutoColumns',
-        transform: gridItem,
-    },
-    alignAll: {
-        property: 'justifyContent',
-        properties: ['justifyContent', 'alignItems'],
-    },
-    ...alignments,
-    ...gridItems,
-    ...gaps,
-};
-const background = {
-    background: { property: 'background' },
-    backgroundImage: { property: 'backgroundImage' },
-    backgroundSize: { property: 'backgroundSize' },
-    backgroundRepeat: { property: 'backgroundRepeat' },
-    backgroundPosition: { property: 'backgroundPosition' },
-};
-const positioning = {
-    position: { property: 'position' },
-    inset: {
-        property: 'inset',
-        properties: ['top', 'right', 'bottom', 'left'],
-        transform: size,
-    },
-    top: { property: 'top', transform: size },
-    right: { property: 'right', transform: size },
-    bottom: { property: 'bottom', transform: size },
-    left: { property: 'left', transform: size },
-    zIndex: { property: 'zIndex' },
-    opacity: { property: 'opacity' },
-};
-const shadows = {
-    boxShadow: { property: 'boxShadow' },
-    textShadow: { property: 'textShadow' },
-};
-const layout = {
-    display: { property: 'display' },
-    overflow: { property: 'overflow' },
-    overflowX: { property: 'overflowX' },
-    overflowY: { property: 'overflowY' },
-    size: {
-        property: 'width',
-        properties: ['width', 'height'],
-        transform: size,
-    },
-    width: {
-        property: 'width',
-        transform: size,
-    },
-    minWidth: { property: 'minWidth', transform: size },
-    maxWidth: { property: 'maxWidth', transform: size },
-    height: { property: 'height', transform: size },
-    minHeight: {
-        property: 'minHeight',
-        transform: size,
-    },
-    maxHeight: {
-        property: 'maxHeight',
-        transform: size,
-    },
-    verticalAlign: { property: 'verticalAlign' },
-    ...selfAlignments,
-    ...gridItems,
-    ...flexItems,
-};
-const typography = {
-    fontFamily: { property: 'fontFamily', scale: 'fontFamily' },
-    fontWeight: {
-        property: 'fontWeight',
-        scale: 'fontWeight',
-    },
-    lineHeight: {
-        property: 'lineHeight',
-        scale: 'lineHeight',
-        lineHeight: 'lineHeight',
-    },
-    fontSize: {
-        property: 'fontSize',
-        scale: 'fontSize',
-    },
-    letterSpacing: { property: 'letterSpacing' },
-    textAlign: { property: 'textAlign' },
-    fontStyle: { property: 'fontStyle' },
-    textDecoration: { property: 'textDecoration' },
-    textTransform: { property: 'textTransform' },
-    whiteSpace: { property: 'whiteSpace' },
-};
-const margin = {
-    m: { property: 'margin', scale: 'spacing' },
-    mx: {
-        property: 'margin',
-        properties: ['marginLeft', 'marginRight'],
-        scale: 'spacing',
-    },
-    my: {
-        property: 'margin',
-        properties: ['marginTop', 'marginBottom'],
-        scale: 'spacing',
-    },
-    mt: { property: 'marginTop', scale: 'spacing' },
-    mb: { property: 'marginBottom', scale: 'spacing' },
-    mr: { property: 'marginRight', scale: 'spacing' },
-    ml: { property: 'marginLeft', scale: 'spacing' },
-};
-const padding = {
-    p: { property: 'padding', scale: 'spacing' },
-    px: {
-        property: 'padding',
-        properties: ['paddingLeft', 'paddingRight'],
-        scale: 'spacing',
-    },
-    py: {
-        property: 'padding',
-        properties: ['paddingTop', 'paddingBottom'],
-        scale: 'spacing',
-    },
-    pt: { property: 'paddingTop', scale: 'spacing' },
-    pb: { property: 'paddingBottom', scale: 'spacing' },
-    pr: { property: 'paddingRight', scale: 'spacing' },
-    pl: { property: 'paddingLeft', scale: 'spacing' },
-};
-const space = {
-    ...margin,
-    ...padding,
-};
-const mode = {
-    mode: { property: 'none', scale: 'mode' },
-};
-const vars = {
-    vars: { property: 'variables' },
-};
-const config = createAnimus()
-    .addGroup('flex', flex)
-    .addGroup('grid', grid)
-    .addGroup('mode', mode)
-    .addGroup('vars', vars)
-    .addGroup('space', space)
-    .addGroup('color', color)
-    .addGroup('layout', layout)
-    .addGroup('borders', border)
-    .addGroup('shadows', shadows)
-    .addGroup('background', background)
-    .addGroup('typography', typography)
-    .addGroup('positioning', positioning);
+var getSelectors = function getSelectors() {
+  var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var variants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var states = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var filters = arguments.length > 3 ? arguments[3] : undefined;
+  var rules = {};
+  Object.entries(base).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        styles = _ref2[1];
+
+    if (!filters.includes(key) && isObject(styles)) {
+      set(rules, [key, 'base'], styles);
+    } else {
+      set(rules, ['primary', 'base', key], styles);
+    }
+  });
+  Object.entries(variants).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        variantConfig = _ref4[1].variants;
+
+    Object.entries(variantConfig).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          option = _ref6[0],
+          optionStyles = _ref6[1];
+
+      var optionId = "".concat(key, "-").concat(option);
+      Object.entries(optionStyles).forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+            key = _ref8[0],
+            styles = _ref8[1];
+
+        if (!filters.includes(key) && isObject(styles)) {
+          set(rules, [key, optionId], styles);
+        } else {
+          set(rules, ['primary', optionId, key], styles);
+        }
+      });
+    });
+  });
+  Object.entries(states).forEach(function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 2),
+        optionId = _ref10[0],
+        optionStyles = _ref10[1];
+
+    Object.entries(optionStyles).forEach(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+          key = _ref12[0],
+          styles = _ref12[1];
+
+      if (!filters.includes(key) && isObject(styles)) {
+        set(rules, [key, optionId], styles);
+      } else {
+        set(rules, ['primary', optionId, key], styles);
+      }
+    });
+  });
+  return rules;
+};
+
+var createGetActiveStyleIds = function createGetActiveStyleIds(variants, states) {
+  var vIds = Object.keys(variants);
+  var sIds = Object.keys(states);
+  return function (props) {
+    var activeIds = [];
+    vIds.forEach(function (id) {
+      if (props[id]) {
+        activeIds.push("".concat(id, "-").concat(props[id]));
+      }
+    });
+    sIds.forEach(function (id) {
+      if (props[id]) {
+        activeIds.push(id);
+      }
+    });
+    return activeIds;
+  };
+};
+
+var extractBreakpointStyles = function extractBreakpointStyles(styles, medias) {
+  var unscoped = {};
+  var breakpoint = {};
+  Object.entries(styles).forEach(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+        rule = _ref14[0],
+        value = _ref14[1];
+
+    var target = medias.includes(rule) ? breakpoint : unscoped;
+    target[rule] = value;
+  });
+  return [unscoped, breakpoint];
+};
+
+var applyOverride = function applyOverride() {
+  var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var baseResult = arguments.length > 1 ? arguments[1] : undefined;
+  var breakpointResult = arguments.length > 2 ? arguments[2] : undefined;
+  var parser = arguments.length > 3 ? arguments[3] : undefined;
+  var theme = arguments.length > 4 ? arguments[4] : undefined;
+  var media = arguments.length > 5 ? arguments[5] : undefined;
+
+  var _extractBreakpointSty = extractBreakpointStyles(parser(_objectSpread2(_objectSpread2({}, override), {}, {
+    theme: theme
+  }), true), media),
+      _extractBreakpointSty2 = _slicedToArray(_extractBreakpointSty, 2),
+      overrideStyles = _extractBreakpointSty2[0],
+      overrideBreakpointStyles = _extractBreakpointSty2[1];
+
+  for (var rule in overrideStyles) {
+    baseResult[rule] = overrideStyles[rule];
+  }
+
+  media.forEach(function (mq) {
+    var mqOverride = overrideBreakpointStyles[mq];
+    if (!mqOverride || isEmpty(mqOverride)) return;
+
+    if (!breakpointResult[mq]) {
+      breakpointResult[mq] = {};
+    }
+
+    var mqStyle = breakpointResult[mq];
+
+    for (var _rule in mqOverride) {
+      mqStyle[_rule] = mqOverride[_rule];
+    }
+  });
+};
+
+var applyStyle = function applyStyle(resultStyles, config, props, ctx) {
+  var base = config.base;
+  var parser = ctx.parser,
+      getMediaSelectors = ctx.getMediaSelectors,
+      getActiveOverrides = ctx.getActiveOverrides;
+  var theme = props.theme;
+  var overrides = Object.values(pick(config, getActiveOverrides(props)));
+  var media = getMediaSelectors(props);
+
+  var _extractBreakpointSty3 = extractBreakpointStyles(parser(_objectSpread2(_objectSpread2({}, base), {}, {
+    theme: theme
+  }), true), media),
+      _extractBreakpointSty4 = _slicedToArray(_extractBreakpointSty3, 2),
+      styles = _extractBreakpointSty4[0],
+      breakpointStyles = _extractBreakpointSty4[1];
+
+  for (var rule in styles) {
+    resultStyles[rule] = styles[rule];
+  }
+
+  overrides.forEach(function (override) {
+    applyOverride(override, resultStyles, breakpointStyles, parser, theme, media);
+  });
+  media.forEach(function (media) {
+    var bp = breakpointStyles[media];
+
+    if (!isEmpty(bp)) {
+      resultStyles[media] = bp;
+    }
+  });
+};
+
+var createStylist = function createStylist(parser) {
+  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var selectorGroups = getSelectors(base, variants, states, parser.propNames);
+  var context = {
+    parser: parser,
+    getMediaSelectors: function getMediaSelectors(_ref15) {
+      var _theme$breakpoints;
+
+      var theme = _ref15.theme;
+      var breakpoints = (_theme$breakpoints = theme === null || theme === void 0 ? void 0 : theme.breakpoints) !== null && _theme$breakpoints !== void 0 ? _theme$breakpoints : compatTheme.breakpoints;
+      return ['xs', 'sm', 'md', 'lg', 'xl'].map(function (key) {
+        return breakpoints[key];
+      });
+    },
+    getActiveOverrides: createGetActiveStyleIds(variants, states)
+  };
+  return function (props) {
+    var vars = props.vars;
+
+    var result = _objectSpread2({}, vars);
+
+    Object.entries(selectorGroups).forEach(function (_ref16) {
+      var _ref17 = _slicedToArray(_ref16, 2),
+          selectorId = _ref17[0],
+          _ref17$ = _ref17[1],
+          config = _ref17$ === void 0 ? {} : _ref17$;
+
+      if (selectorId === 'primary') {
+        applyStyle(result, config, props, context);
+      } else {
+        result[selectorId] = {};
+        applyStyle(result[selectorId], config, props, context);
+      }
+    });
+    applyStyle(result, {
+      base: parser(props)
+    }, props, context);
+    return result;
+  };
+};
+
+var AnimusWithAll = /*#__PURE__*/function () {
+  function AnimusWithAll(props, groups, parser, base, variants, states, activeGroups, custom) {
+    _classCallCheck(this, AnimusWithAll);
+
+    _defineProperty(this, "propRegistry", {});
+
+    _defineProperty(this, "groupRegistry", {});
+
+    _defineProperty(this, "parser", {});
+
+    _defineProperty(this, "baseStyles", {});
+
+    _defineProperty(this, "statesConfig", {});
+
+    _defineProperty(this, "variants", {});
+
+    _defineProperty(this, "activeGroups", {});
+
+    _defineProperty(this, "custom", {});
+
+    this.propRegistry = props;
+    this.groupRegistry = groups;
+    this.parser = parser;
+    this.baseStyles = base;
+    this.variants = variants;
+    this.statesConfig = states;
+    this.activeGroups = activeGroups;
+    this.custom = custom;
+  }
+
+  _createClass(AnimusWithAll, [{
+    key: "asComponent",
+    value: function asComponent(component) {
+      var handler = createStylist(createParser$1(_objectSpread2(_objectSpread2({}, this.parser.config), this.custom)), this.baseStyles, this.variants, this.statesConfig);
+      return /*#__PURE__*/_styled(component, {
+        target: "e19x4vr0",
+        label: "AnimusWithAll"
+      })(handler, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuaW11cy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmUiLCJmaWxlIjoiQW5pbXVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWVyZ2UgfSBmcm9tICdsb2Rhc2gnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IGNyZWF0ZVBhcnNlciB9IGZyb20gJy4vc3R5bGVzL2NyZWF0ZVBhcnNlcic7XHJcbmltcG9ydCB7IGNyZWF0ZVN0eWxpc3QgfSBmcm9tICcuL3N0eWxlcy9jcmVhdGVTdHlsaXN0JztcclxuZXhwb3J0IGNsYXNzIEFuaW11c1dpdGhBbGwge1xyXG4gICAgcHJvcFJlZ2lzdHJ5ID0ge307XHJcbiAgICBncm91cFJlZ2lzdHJ5ID0ge307XHJcbiAgICBwYXJzZXIgPSB7fTtcclxuICAgIGJhc2VTdHlsZXMgPSB7fTtcclxuICAgIHN0YXRlc0NvbmZpZyA9IHt9O1xyXG4gICAgdmFyaWFudHMgPSB7fTtcclxuICAgIGFjdGl2ZUdyb3VwcyA9IHt9O1xyXG4gICAgY3VzdG9tID0ge307XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHZhcmlhbnRzLCBzdGF0ZXMsIGFjdGl2ZUdyb3VwcywgY3VzdG9tKSB7XHJcbiAgICAgICAgdGhpcy5wcm9wUmVnaXN0cnkgPSBwcm9wcztcclxuICAgICAgICB0aGlzLmdyb3VwUmVnaXN0cnkgPSBncm91cHM7XHJcbiAgICAgICAgdGhpcy5wYXJzZXIgPSBwYXJzZXI7XHJcbiAgICAgICAgdGhpcy5iYXNlU3R5bGVzID0gYmFzZTtcclxuICAgICAgICB0aGlzLnZhcmlhbnRzID0gdmFyaWFudHM7XHJcbiAgICAgICAgdGhpcy5zdGF0ZXNDb25maWcgPSBzdGF0ZXM7XHJcbiAgICAgICAgdGhpcy5hY3RpdmVHcm91cHMgPSBhY3RpdmVHcm91cHM7XHJcbiAgICAgICAgdGhpcy5jdXN0b20gPSBjdXN0b207XHJcbiAgICB9XHJcbiAgICBhc0NvbXBvbmVudChjb21wb25lbnQpIHtcclxuICAgICAgICBjb25zdCBoYW5kbGVyID0gY3JlYXRlU3R5bGlzdChjcmVhdGVQYXJzZXIoeyAuLi50aGlzLnBhcnNlci5jb25maWcsIC4uLnRoaXMuY3VzdG9tIH0pLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIHRoaXMuc3RhdGVzQ29uZmlnKTtcclxuICAgICAgICByZXR1cm4gc3R5bGVkKGNvbXBvbmVudCkoaGFuZGxlcik7XHJcbiAgICB9XHJcbiAgICBidWlsZCgpIHtcclxuICAgICAgICBjb25zdCBoYW5kbGVyID0gY3JlYXRlU3R5bGlzdChjcmVhdGVQYXJzZXIoeyAuLi50aGlzLnBhcnNlci5jb25maWcsIC4uLnRoaXMuY3VzdG9tIH0pLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIHRoaXMuc3RhdGVzQ29uZmlnKTtcclxuICAgICAgICByZXR1cm4gaGFuZGxlcjtcclxuICAgIH1cclxufVxyXG5jbGFzcyBBbmltdXNXaXRoU3lzdGVtIGV4dGVuZHMgQW5pbXVzV2l0aEFsbCB7XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHZhcmlhbnRzLCBzdGF0ZXMsIGFjdGl2ZUdyb3Vwcykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcywgYWN0aXZlR3JvdXBzLCB7fSk7XHJcbiAgICB9XHJcbiAgICBwcm9wcyhjb25maWcpIHtcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhBbGwodGhpcy5wcm9wUmVnaXN0cnksIHRoaXMuZ3JvdXBSZWdpc3RyeSwgdGhpcy5wYXJzZXIsIHRoaXMuYmFzZVN0eWxlcywgdGhpcy52YXJpYW50cywgdGhpcy5zdGF0ZXNDb25maWcsIHRoaXMuYWN0aXZlR3JvdXBzLCBjb25maWcpO1xyXG4gICAgfVxyXG59XHJcbmNsYXNzIEFuaW11c1dpdGhTdGF0ZXMgZXh0ZW5kcyBBbmltdXNXaXRoU3lzdGVtIHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcywge30pO1xyXG4gICAgfVxyXG4gICAgZ3JvdXBzKGNvbmZpZykge1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aFN5c3RlbSh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgdGhpcy5iYXNlU3R5bGVzLCB0aGlzLnZhcmlhbnRzLCB0aGlzLnN0YXRlc0NvbmZpZywgY29uZmlnKTtcclxuICAgIH1cclxufVxyXG5jbGFzcyBBbmltdXNXaXRoVmFyaWFudHMgZXh0ZW5kcyBBbmltdXNXaXRoU3RhdGVzIHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMpIHtcclxuICAgICAgICBzdXBlcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHZhcmlhbnRzLCB7fSk7XHJcbiAgICB9XHJcbiAgICBzdGF0ZXMoY29uZmlnKSB7XHJcbiAgICAgICAgcmV0dXJuIG5ldyBBbmltdXNXaXRoU3RhdGVzKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIGNvbmZpZyk7XHJcbiAgICB9XHJcbiAgICB2YXJpYW50KG9wdGlvbnMpIHtcclxuICAgICAgICBjb25zdCBwcm9wID0gb3B0aW9ucy5wcm9wIHx8ICd2YXJpYW50JztcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhWYXJpYW50cyh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgdGhpcy5iYXNlU3R5bGVzLCBtZXJnZSh0aGlzLnZhcmlhbnRzLCB7IFtwcm9wXTogb3B0aW9ucyB9KSk7XHJcbiAgICB9XHJcbn1cclxuY2xhc3MgQW5pbXVzV2l0aEJhc2UgZXh0ZW5kcyBBbmltdXNXaXRoVmFyaWFudHMge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB7fSk7XHJcbiAgICB9XHJcbiAgICB2YXJpYW50KG9wdGlvbnMpIHtcclxuICAgICAgICBjb25zdCBwcm9wID0gb3B0aW9ucy5wcm9wIHx8ICd2YXJpYW50JztcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhWYXJpYW50cyh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgdGhpcy5iYXNlU3R5bGVzLCBtZXJnZSh0aGlzLnZhcmlhbnRzLCB7IFtwcm9wXTogb3B0aW9ucyB9KSk7XHJcbiAgICB9XHJcbn1cclxuZXhwb3J0IGNsYXNzIEFuaW11cyBleHRlbmRzIEFuaW11c1dpdGhCYXNlIHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMpIHtcclxuICAgICAgICBzdXBlcihwcm9wcywgZ3JvdXBzLCBjcmVhdGVQYXJzZXIocHJvcHMpLCB7fSk7XHJcbiAgICB9XHJcbiAgICBzdHlsZXMoY29uZmlnKSB7XHJcbiAgICAgICAgcmV0dXJuIG5ldyBBbmltdXNXaXRoQmFzZSh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgY29uZmlnKTtcclxuICAgIH1cclxufVxyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmltdXMuanMubWFwIl19 */");
+    }
+  }, {
+    key: "build",
+    value: function build() {
+      var handler = createStylist(createParser$1(_objectSpread2(_objectSpread2({}, this.parser.config), this.custom)), this.baseStyles, this.variants, this.statesConfig);
+      return handler;
+    }
+  }]);
+
+  return AnimusWithAll;
+}();
+
+var AnimusWithSystem = /*#__PURE__*/function (_AnimusWithAll) {
+  _inherits(AnimusWithSystem, _AnimusWithAll);
+
+  var _super = _createSuper(AnimusWithSystem);
+
+  function AnimusWithSystem(props, groups, parser, base, variants, states, activeGroups) {
+    _classCallCheck(this, AnimusWithSystem);
+
+    return _super.call(this, props, groups, parser, base, variants, states, activeGroups, {});
+  }
+
+  _createClass(AnimusWithSystem, [{
+    key: "props",
+    value: function props(config) {
+      return new AnimusWithAll(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, this.activeGroups, config);
+    }
+  }]);
+
+  return AnimusWithSystem;
+}(AnimusWithAll);
+
+var AnimusWithStates = /*#__PURE__*/function (_AnimusWithSystem) {
+  _inherits(AnimusWithStates, _AnimusWithSystem);
+
+  var _super2 = _createSuper(AnimusWithStates);
+
+  function AnimusWithStates(props, groups, parser, base, variants, states) {
+    _classCallCheck(this, AnimusWithStates);
+
+    return _super2.call(this, props, groups, parser, base, variants, states, {});
+  }
+
+  _createClass(AnimusWithStates, [{
+    key: "groups",
+    value: function groups(config) {
+      return new AnimusWithSystem(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, this.statesConfig, config);
+    }
+  }]);
+
+  return AnimusWithStates;
+}(AnimusWithSystem);
+
+var AnimusWithVariants = /*#__PURE__*/function (_AnimusWithStates) {
+  _inherits(AnimusWithVariants, _AnimusWithStates);
+
+  var _super3 = _createSuper(AnimusWithVariants);
+
+  function AnimusWithVariants(props, groups, parser, base, variants) {
+    _classCallCheck(this, AnimusWithVariants);
+
+    return _super3.call(this, props, groups, parser, base, variants, {});
+  }
+
+  _createClass(AnimusWithVariants, [{
+    key: "states",
+    value: function states(config) {
+      return new AnimusWithStates(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, this.variants, config);
+    }
+  }, {
+    key: "variant",
+    value: function variant(options) {
+      var prop = options.prop || 'variant';
+      return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, _defineProperty({}, prop, options)));
+    }
+  }]);
+
+  return AnimusWithVariants;
+}(AnimusWithStates);
+
+var AnimusWithBase = /*#__PURE__*/function (_AnimusWithVariants) {
+  _inherits(AnimusWithBase, _AnimusWithVariants);
+
+  var _super4 = _createSuper(AnimusWithBase);
+
+  function AnimusWithBase(props, groups, parser, base) {
+    _classCallCheck(this, AnimusWithBase);
+
+    return _super4.call(this, props, groups, parser, base, {});
+  }
+
+  _createClass(AnimusWithBase, [{
+    key: "variant",
+    value: function variant(options) {
+      var prop = options.prop || 'variant';
+      return new AnimusWithVariants(this.propRegistry, this.groupRegistry, this.parser, this.baseStyles, merge(this.variants, _defineProperty({}, prop, options)));
+    }
+  }]);
+
+  return AnimusWithBase;
+}(AnimusWithVariants);
+
+var Animus = /*#__PURE__*/function (_AnimusWithBase) {
+  _inherits(Animus, _AnimusWithBase);
+
+  var _super5 = _createSuper(Animus);
+
+  function Animus(props, groups) {
+    _classCallCheck(this, Animus);
+
+    return _super5.call(this, props, groups, createParser$1(props), {});
+  }
+
+  _createClass(Animus, [{
+    key: "styles",
+    value: function styles(config) {
+      return new AnimusWithBase(this.propRegistry, this.groupRegistry, this.parser, config);
+    }
+  }]);
+
+  return Animus;
+}(AnimusWithBase);
+
+var _props = /*#__PURE__*/new WeakMap();
+
+var _groups = /*#__PURE__*/new WeakMap();
+
+var AnimusConfig = /*#__PURE__*/function () {
+  function AnimusConfig(config, groups) {
+    _classCallCheck(this, AnimusConfig);
+
+    _classPrivateFieldInitSpec(this, _props, {
+      writable: true,
+      value: {}
+    });
+
+    _classPrivateFieldInitSpec(this, _groups, {
+      writable: true,
+      value: {}
+    });
+
+    _classPrivateFieldSet(this, _props, config || {});
+
+    _classPrivateFieldSet(this, _groups, groups || {});
+  }
+
+  _createClass(AnimusConfig, [{
+    key: "addGroup",
+    value: function addGroup(name, config) {
+      var newGroup = _defineProperty({}, name, Object.keys(config));
+
+      return new AnimusConfig(_objectSpread2(_objectSpread2({}, _classPrivateFieldGet(this, _props)), config), _objectSpread2(_objectSpread2({}, _classPrivateFieldGet(this, _groups)), newGroup));
+    }
+  }, {
+    key: "build",
+    value: function build() {
+      var props = _classPrivateFieldGet(this, _props);
+
+      var groups = _classPrivateFieldGet(this, _groups);
+
+      return new Animus(props, groups);
+    }
+  }]);
+
+  return AnimusConfig;
+}();
+
+var createAnimus = function createAnimus() {
+  return new AnimusConfig();
+};
+
+var color = {
+  color: {
+    property: 'color',
+    scale: 'colors'
+  },
+  textColor: {
+    property: 'color',
+    scale: 'colors'
+  },
+  bg: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors'
+  },
+  borderColorX: {
+    property: 'borderColor',
+    properties: ['borderLeftColor', 'borderRightColor'],
+    scale: 'colors'
+  },
+  borderColorY: {
+    property: 'borderColor',
+    properties: ['borderTopColor', 'borderBottomColor'],
+    scale: 'colors'
+  },
+  borderColorLeft: {
+    property: 'borderLeftColor',
+    scale: 'colors'
+  },
+  borderColorRight: {
+    property: 'borderRightColor',
+    scale: 'colors'
+  },
+  borderColorTop: {
+    property: 'borderTopColor',
+    scale: 'colors'
+  },
+  borderColorBottom: {
+    property: 'borderBottomColor',
+    scale: 'colors'
+  }
+};
+var border = {
+  border: {
+    property: 'border',
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderX: {
+    property: 'border',
+    properties: ['borderLeft', 'borderRight'],
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderY: {
+    property: 'border',
+    properties: ['borderTop', 'borderBottom'],
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderTop: {
+    property: 'borderTop',
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderRight: {
+    property: 'borderRight',
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderBottom: {
+    property: 'borderBottom',
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  borderLeft: {
+    property: 'borderLeft',
+    scale: 'borders',
+    transform: borderShorthand
+  },
+  // Width
+  borderWidth: {
+    property: 'borderWidth'
+  },
+  borderWidthX: {
+    property: 'borderWidth',
+    properties: ['borderLeftWidth', 'borderRightWidth']
+  },
+  borderWidthY: {
+    property: 'borderWidth',
+    properties: ['borderTopWidth', 'borderBottomWidth']
+  },
+  borderWidthLeft: {
+    property: 'borderLeftWidth'
+  },
+  borderWidthRight: {
+    property: 'borderRightWidth'
+  },
+  borderWidthTop: {
+    property: 'borderTopWidth'
+  },
+  borderWidthBottom: {
+    property: 'borderBottomWidth'
+  },
+  // Radius
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusLeft: {
+    property: 'borderRadius',
+    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusTop: {
+    property: 'borderRadius',
+    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusBottom: {
+    property: 'borderRadius',
+    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusRight: {
+    property: 'borderRadius',
+    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusTopLeft: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusTopRight: {
+    property: 'borderTopRightRadius',
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusBottomRight: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii',
+    transform: numberToPx
+  },
+  borderRadiusBottomLeft: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii',
+    transform: numberToPx
+  },
+  // Style
+  borderStyle: {
+    property: 'borderStyle'
+  },
+  borderStyleX: {
+    property: 'borderStyle',
+    properties: ['borderLeftStyle', 'borderRightStyle']
+  },
+  borderStyleY: {
+    property: 'borderStyle',
+    properties: ['borderTopStyle', 'borderBottomStyle']
+  },
+  borderStyleLeft: {
+    property: 'borderLeftStyle'
+  },
+  borderStyleRight: {
+    property: 'borderRightStyle'
+  },
+  borderStyleTop: {
+    property: 'borderTopStyle'
+  },
+  borderStyleBottom: {
+    property: 'borderBottomStyle'
+  }
+};
+var gaps = {
+  gap: {
+    property: 'gap',
+    scale: 'spacing'
+  },
+  rowGap: {
+    property: 'rowGap',
+    scale: 'spacing'
+  },
+  columnGap: {
+    property: 'columnGap',
+    scale: 'spacing'
+  }
+};
+var selfAlignments = {
+  justifySelf: {
+    property: 'justifySelf'
+  },
+  alignSelf: {
+    property: 'alignSelf'
+  },
+  gridArea: {
+    property: 'gridArea'
+  },
+  area: {
+    property: 'gridArea'
+  }
+};
+
+var alignments = _objectSpread2({
+  justifyContent: {
+    property: 'justifyContent'
+  },
+  justifyItems: {
+    property: 'justifyItems'
+  },
+  alignItems: {
+    property: 'alignItems'
+  },
+  alignContent: {
+    property: 'alignContent'
+  }
+}, selfAlignments);
+
+var flexItems = {
+  flexBasis: {
+    property: 'flexBasis'
+  },
+  flexShrink: {
+    property: 'flexShrink'
+  },
+  flexGrow: {
+    property: 'flexGrow'
+  },
+  order: {
+    property: 'order'
+  }
+};
+var flex = _objectSpread2(_objectSpread2(_objectSpread2({
+  flexDirection: {
+    property: 'flexDirection'
+  },
+  flexWrap: {
+    property: 'flexWrap'
+  },
+  flex: {
+    property: 'flex'
+  }
+}, alignments), flexItems), gaps);
+var gridItems = {
+  gridColumn: {
+    property: 'gridColumn'
+  },
+  gridRow: {
+    property: 'gridRow'
+  },
+  gridColumnStart: {
+    property: 'gridColumnStart'
+  },
+  gridRowStart: {
+    property: 'gridRowStart'
+  },
+  gridColumnEnd: {
+    property: 'gridColumnEnd'
+  },
+  gridRowEnd: {
+    property: 'gridRowEnd'
+  }
+};
+var grid = _objectSpread2(_objectSpread2(_objectSpread2({
+  gridAutoColumns: {
+    property: 'gridAutoColumns'
+  },
+  gridAutoRows: {
+    property: 'gridAutoRows'
+  },
+  gridTemplateColumns: {
+    property: 'gridTemplateColumns'
+  },
+  gridTemplateRows: {
+    property: 'gridTemplateRows'
+  },
+  gridTemplateAreas: {
+    property: 'gridTemplateAreas'
+  },
+  gridAutoFlow: {
+    property: 'gridAutoFlow'
+  },
+  flow: {
+    property: 'gridAutoFlow',
+    scale: createScale()
+  },
+  cols: {
+    property: 'gridTemplateColumns',
+    transform: gridItemRatio,
+    scale: createScale()
+  },
+  rows: {
+    property: 'gridTemplateRows',
+    transform: gridItemRatio,
+    scale: createScale()
+  },
+  autoRows: {
+    property: 'gridAutoRows',
+    transform: gridItem
+  },
+  autoCols: {
+    property: 'gridAutoColumns',
+    transform: gridItem
+  },
+  alignAll: {
+    property: 'justifyContent',
+    properties: ['justifyContent', 'alignItems']
+  }
+}, alignments), gridItems), gaps);
+var background = {
+  background: {
+    property: 'background'
+  },
+  backgroundImage: {
+    property: 'backgroundImage'
+  },
+  backgroundSize: {
+    property: 'backgroundSize'
+  },
+  backgroundRepeat: {
+    property: 'backgroundRepeat'
+  },
+  backgroundPosition: {
+    property: 'backgroundPosition'
+  }
+};
+var positioning = {
+  position: {
+    property: 'position'
+  },
+  inset: {
+    property: 'inset',
+    properties: ['top', 'right', 'bottom', 'left'],
+    transform: size
+  },
+  top: {
+    property: 'top',
+    transform: size
+  },
+  right: {
+    property: 'right',
+    transform: size
+  },
+  bottom: {
+    property: 'bottom',
+    transform: size
+  },
+  left: {
+    property: 'left',
+    transform: size
+  },
+  zIndex: {
+    property: 'zIndex'
+  },
+  opacity: {
+    property: 'opacity'
+  }
+};
+var shadows = {
+  boxShadow: {
+    property: 'boxShadow'
+  },
+  textShadow: {
+    property: 'textShadow'
+  }
+};
+var layout = _objectSpread2(_objectSpread2(_objectSpread2({
+  display: {
+    property: 'display'
+  },
+  overflow: {
+    property: 'overflow'
+  },
+  overflowX: {
+    property: 'overflowX'
+  },
+  overflowY: {
+    property: 'overflowY'
+  },
+  size: {
+    property: 'width',
+    properties: ['width', 'height'],
+    transform: size
+  },
+  width: {
+    property: 'width',
+    transform: size
+  },
+  minWidth: {
+    property: 'minWidth',
+    transform: size
+  },
+  maxWidth: {
+    property: 'maxWidth',
+    transform: size
+  },
+  height: {
+    property: 'height',
+    transform: size
+  },
+  minHeight: {
+    property: 'minHeight',
+    transform: size
+  },
+  maxHeight: {
+    property: 'maxHeight',
+    transform: size
+  },
+  verticalAlign: {
+    property: 'verticalAlign'
+  }
+}, selfAlignments), gridItems), flexItems);
+var typography = {
+  fontFamily: {
+    property: 'fontFamily',
+    scale: 'fontFamily'
+  },
+  fontWeight: {
+    property: 'fontWeight',
+    scale: 'fontWeight'
+  },
+  lineHeight: {
+    property: 'lineHeight',
+    scale: 'lineHeight',
+    lineHeight: 'lineHeight'
+  },
+  fontSize: {
+    property: 'fontSize',
+    scale: 'fontSize'
+  },
+  letterSpacing: {
+    property: 'letterSpacing'
+  },
+  textAlign: {
+    property: 'textAlign'
+  },
+  fontStyle: {
+    property: 'fontStyle'
+  },
+  textDecoration: {
+    property: 'textDecoration'
+  },
+  textTransform: {
+    property: 'textTransform'
+  },
+  whiteSpace: {
+    property: 'whiteSpace'
+  }
+};
+var margin = {
+  m: {
+    property: 'margin',
+    scale: 'spacing'
+  },
+  mx: {
+    property: 'margin',
+    properties: ['marginLeft', 'marginRight'],
+    scale: 'spacing'
+  },
+  my: {
+    property: 'margin',
+    properties: ['marginTop', 'marginBottom'],
+    scale: 'spacing'
+  },
+  mt: {
+    property: 'marginTop',
+    scale: 'spacing'
+  },
+  mb: {
+    property: 'marginBottom',
+    scale: 'spacing'
+  },
+  mr: {
+    property: 'marginRight',
+    scale: 'spacing'
+  },
+  ml: {
+    property: 'marginLeft',
+    scale: 'spacing'
+  }
+};
+var padding = {
+  p: {
+    property: 'padding',
+    scale: 'spacing'
+  },
+  px: {
+    property: 'padding',
+    properties: ['paddingLeft', 'paddingRight'],
+    scale: 'spacing'
+  },
+  py: {
+    property: 'padding',
+    properties: ['paddingTop', 'paddingBottom'],
+    scale: 'spacing'
+  },
+  pt: {
+    property: 'paddingTop',
+    scale: 'spacing'
+  },
+  pb: {
+    property: 'paddingBottom',
+    scale: 'spacing'
+  },
+  pr: {
+    property: 'paddingRight',
+    scale: 'spacing'
+  },
+  pl: {
+    property: 'paddingLeft',
+    scale: 'spacing'
+  }
+};
+var space = _objectSpread2(_objectSpread2({}, margin), padding);
+var mode = {
+  mode: {
+    property: 'none',
+    scale: 'mode'
+  }
+};
+var vars = {
+  vars: {
+    property: 'variables'
+  }
+};
+var config = createAnimus().addGroup('flex', flex).addGroup('grid', grid).addGroup('mode', mode).addGroup('vars', vars).addGroup('space', space).addGroup('color', color).addGroup('layout', layout).addGroup('borders', border).addGroup('shadows', shadows).addGroup('background', background).addGroup('typography', typography).addGroup('positioning', positioning);
 config.build();
 
-const getStylePropNames = (props, filteredKeys) => pick(props, keys(props).filter((key) => !filteredKeys.includes(key)));
+var getStylePropNames = function getStylePropNames(props, filteredKeys) {
+  return pick(props, keys(props).filter(function (key) {
+    return !filteredKeys.includes(key);
+  }));
+};
 
-const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+var _excluded = ["_"];
+var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
  * Destructures the themes breakpoints into an ordered structure to traverse
- */
-const templateMediaQuery = (breakpoint) => `@media screen and (min-width: ${breakpoint}px)`;
-const createMediaQueries = (breakpoints) => {
-    if (breakpoints === undefined)
-        return null;
-    const { xs, sm, md, lg, xl } = breakpoints ?? {};
-    // Ensure order for mapping
-    return {
-        map: mapValues(breakpoints, templateMediaQuery),
-        array: [xs, sm, md, lg, xl].map(templateMediaQuery),
-    };
-};
-const isMediaArray = (val) => Array.isArray(val);
-const isMediaMap = (val) => intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
-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((breakpointKey) => {
-        const bpStyles = rest[breakpointKey];
-        if (typeof bpStyles === 'undefined')
-            return;
-        Object.assign(styles, {
-            [breakpoints[breakpointKey]]: styleFn(bpStyles, prop, props),
-        });
-    });
-    return styles;
-};
-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((val, i) => {
-        const breakpointKey = breakpoints[i];
-        if (!breakpointKey || typeof val === 'undefined')
-            return;
-        Object.assign(styles, {
-            [breakpointKey]: styleFn(val, prop, props),
-        });
-    });
-    return styles;
-};
-const orderBreakpoints = (styles, breakpoints) => {
-    const orderedStyles = omit(styles, breakpoints);
-    breakpoints.forEach((bp) => {
-        if (styles[bp]) {
-            orderedStyles[bp] = styles[bp];
-        }
-    });
-    return orderedStyles;
+ */
+
+var templateMediaQuery = function templateMediaQuery(breakpoint) {
+  return "@media screen and (min-width: ".concat(breakpoint, "px)");
+};
+
+var createMediaQueries = function createMediaQueries(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
+
+
+  return {
+    map: mapValues(breakpoints, templateMediaQuery),
+    array: [xs, sm, md, lg, xl].map(templateMediaQuery)
+  };
+};
+var isMediaArray = function isMediaArray(val) {
+  return Array.isArray(val);
+};
+var isMediaMap = function isMediaMap(val) {
+  return intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
+};
+var objectParser = function objectParser(value, props, config, breakpoints) {
+  var styles = {};
+  var styleFn = config.styleFn,
+      prop = config.prop;
+
+  var _ = value._,
+      rest = _objectWithoutProperties(value, _excluded); // 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];
+    if (typeof bpStyles === 'undefined') return;
+    Object.assign(styles, _defineProperty({}, breakpoints[breakpointKey], styleFn(bpStyles, prop, props)));
+  });
+  return styles;
+};
+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(function (val, i) {
+    var breakpointKey = breakpoints[i];
+    if (!breakpointKey || typeof val === 'undefined') return;
+    Object.assign(styles, _defineProperty({}, breakpointKey, styleFn(val, prop, props)));
+  });
+  return styles;
 };
+var orderBreakpoints = function orderBreakpoints(styles, breakpoints) {
+  var orderedStyles = omit(styles, breakpoints);
+  breakpoints.forEach(function (bp) {
+    if (styles[bp]) {
+      orderedStyles[bp] = styles[bp];
+    }
+  });
+  return orderedStyles;
+};
+
+var renderPropValue = function renderPropValue(styles, prop, props, property, ctx) {
+  var value = get(props, prop);
+
+  switch (_typeof(value)) {
+    case 'string':
+    case 'number':
+    case 'function':
+      return Object.assign(styles, property.styleFn(value, prop, props));
+    // handle any props configured with the responsive notation
+
+    case 'object':
+      if (!ctx.mediaQueries) {
+        return;
+      } // If it is an array the order of values is smallest to largest: [_, xs, ...]
+
+
+      if (isMediaArray(value)) {
+        return merge(styles, arrayParser(value, props, property, ctx.mediaQueries.array));
+      } // Check to see if value is an object matching the responsive syntax and generate the styles.
+
+
+      if (value && isMediaMap(value)) {
+        return merge(styles, objectParser(value, props, property, ctx.mediaQueries.map));
+      }
+
+  }
+};
+
+function createParser(config) {
+  var propNames = orderPropNames(config);
+  var ctx = {
+    mediaQueries: null
+  };
+
+  var parser = function parser(props) {
+    var isCss = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var styles = {};
+    var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
 
-const renderPropValue = (styles, prop, props, property, ctx) => {
-    const value = get(props, prop);
-    switch (typeof value) {
-        case 'string':
-        case 'number':
-        case 'function':
-            return Object.assign(styles, property.styleFn(value, prop, props));
-        // handle any props configured with the responsive notation
-        case 'object':
-            if (!ctx.mediaQueries) {
-                return;
-            }
-            // If it is an array the order of values is smallest to largest: [_, xs, ...]
-            if (isMediaArray(value)) {
-                return merge(styles, arrayParser(value, props, property, ctx.mediaQueries.array));
-            }
-            // Check to see if value is an object matching the responsive syntax and generate the styles.
-            if (value && isMediaMap(value)) {
-                return merge(styles, objectParser(value, props, property, ctx.mediaQueries.map));
-            }
-    }
-};
-function createParser(config) {
-    const propNames = orderPropNames(config);
-    const ctx = {
-        mediaQueries: null,
-    };
-    const parser = (props, isCss = false) => {
-        const styles = {};
-        const { theme } = props;
-        // Attempt to cache the breakpoints if we have not yet or if theme has become available.
-        if (ctx.mediaQueries === null) {
-            // Save the breakpoints if we can
-            ctx.mediaQueries = createMediaQueries(theme?.breakpoints ?? compatTheme.breakpoints);
-        }
-        if (!isCss) {
-            // Loops over all prop names on the configured config to check for configured styles
-            propNames.forEach((prop) => {
-                const property = config[prop];
-                renderPropValue(styles, prop, props, property, ctx);
-            });
-        }
-        else {
-            // Loops over all prop names on the configured config to check for configured styles
-            Object.keys(props).forEach((prop) => {
-                const property = config[prop];
-                if (property) {
-                    renderPropValue(styles, prop, props, property, ctx);
-                }
-                else if (prop !== 'theme') {
-                    Object.assign(styles, { [prop]: get(props, prop) });
-                }
-            });
-        }
-        if (ctx.mediaQueries !== null)
-            return orderBreakpoints(styles, ctx.mediaQueries.array);
-        return styles;
-    };
-    // return the parser function with the resulting meta information for further composition
-    return Object.assign(parser, { propNames, config });
+    if (ctx.mediaQueries === null) {
+      var _theme$breakpoints;
+
+      // Save the breakpoints if we can
+      ctx.mediaQueries = createMediaQueries((_theme$breakpoints = theme === null || theme === void 0 ? void 0 : theme.breakpoints) !== null && _theme$breakpoints !== void 0 ? _theme$breakpoints : compatTheme.breakpoints);
+    }
+
+    if (!isCss) {
+      // Loops over all prop names on the configured config to check for configured styles
+      propNames.forEach(function (prop) {
+        var property = config[prop];
+        renderPropValue(styles, prop, props, property, ctx);
+      });
+    } else {
+      // Loops over all prop names on the configured config to check for configured styles
+      Object.keys(props).forEach(function (prop) {
+        var property = config[prop];
+
+        if (property) {
+          renderPropValue(styles, prop, props, property, ctx);
+        } else if (prop !== 'theme') {
+          Object.assign(styles, _defineProperty({}, prop, get(props, prop)));
+        }
+      });
+    }
+
+    if (ctx.mediaQueries !== null) return orderBreakpoints(styles, ctx.mediaQueries.array);
+    return styles;
+  }; // return the parser function with the resulting meta information for further composition
+
+
+  return Object.assign(parser, {
+    propNames: propNames,
+    config: config
+  });
 }
 
-function createTransform(prop, config) {
-    const { transform = identity, property, properties = [property], scale, variable, } = config;
-    const alwaysTransform = scale === undefined || isArray(scale);
-    return {
-        ...config,
-        prop,
-        styleFn: (value, prop, props) => {
-            const styles = {};
-            if (isUndefined(value)) {
-                return styles;
-            }
-            let useTransform = false;
-            let intermediateValue;
-            let scaleValue;
-            switch (typeof value) {
-                case 'number':
-                case 'string':
-                    scaleValue = lookupScaleValue(value, scale, props.theme);
-                    useTransform = scaleValue !== undefined || alwaysTransform;
-                    intermediateValue = scaleValue ?? value;
-                    break;
-                case 'function':
-                    if (props.theme) {
-                        intermediateValue = value(props.theme);
-                    }
-                    break;
-                default:
-                    return styles;
-            }
-            // for each property look up the scale value from theme if passed and apply any
-            // final transforms to the value
-            properties.forEach((property) => {
-                let styleValue = intermediateValue;
-                if (useTransform && !isUndefined(styleValue)) {
-                    styleValue = transform(styleValue, property, props);
-                }
-                switch (typeof styleValue) {
-                    case 'number':
-                    case 'string':
-                        return (styles[property] = styleValue);
-                    case 'object':
-                        return Object.assign(styles, styleValue);
-                }
-            });
-            if (variable) {
-                let styleValue = intermediateValue;
-                if (useTransform && !isUndefined(styleValue)) {
-                    styleValue = transform(styleValue, property, props);
-                }
-                if (styleValue && typeof styleValue !== 'object') {
-                    styles[variable] = styleValue;
-                }
-            }
-            // return the resulting styles object
-            return styles;
-        },
-    };
+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,
+      variable = config.variable;
+  var alwaysTransform = scale === undefined || isArray(scale);
+  return _objectSpread2(_objectSpread2({}, config), {}, {
+    prop: prop,
+    styleFn: function styleFn(value, prop, props) {
+      var _scaleValue;
+
+      var styles = {};
+
+      if (isUndefined(value)) {
+        return styles;
+      }
+
+      var useTransform = false;
+      var intermediateValue;
+      var scaleValue;
+
+      switch (_typeof(value)) {
+        case 'number':
+        case 'string':
+          scaleValue = lookupScaleValue(value, scale, props.theme);
+          useTransform = scaleValue !== undefined || alwaysTransform;
+          intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
+          break;
+
+        case 'function':
+          if (props.theme) {
+            intermediateValue = value(props.theme);
+          }
+
+          break;
+
+        default:
+          return styles;
+      } // for each property look up the scale value from theme if passed and apply any
+      // final transforms to the value
+
+
+      properties.forEach(function (property) {
+        var styleValue = intermediateValue;
+
+        if (useTransform && !isUndefined(styleValue)) {
+          styleValue = transform(styleValue, property, props);
+        }
+
+        switch (_typeof(styleValue)) {
+          case 'number':
+          case 'string':
+            return styles[property] = styleValue;
+
+          case 'object':
+            return Object.assign(styles, styleValue);
+        }
+      });
+
+      if (variable) {
+        var styleValue = intermediateValue;
+
+        if (useTransform && !isUndefined(styleValue)) {
+          styleValue = transform(styleValue, property, props);
+        }
+
+        if (styleValue && _typeof(styleValue) !== 'object') {
+          styles[variable] = styleValue;
+        }
+      } // return the resulting styles object
+
+
+      return styles;
+    }
+  });
 }
 
-function create(config) {
-    // Create a transform function for each of the props
-    const transforms = {};
-    for (const prop in config) {
-        if (typeof prop === 'string') {
-            transforms[prop] = createTransform(prop, config[prop]);
-        }
-    }
-    // Create a parser that handles all the props within the config
-    return createParser(transforms);
+function create(config) {
+  // Create a transform function for each of the props
+  var transforms = {};
+
+  for (var prop in config) {
+    if (typeof prop === 'string') {
+      transforms[prop] = createTransform(prop, config[prop]);
+    }
+  } // Create a parser that handles all the props within the config
+
+
+  return createParser(transforms);
 }
 
-function createCss(config) {
-    const parser = 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 */
-        const selectors = allKeys.filter((key) => !filteredProps.includes(key) && isObject(cssProps[key]));
-        /** Static CSS Properties get extracted if they match neither syntax */
-        const staticCss = getStylePropNames(cssProps, [
-            'theme',
-            ...selectors,
-            ...filteredProps,
-        ]);
-        return ({ theme }) => {
-            if (cache)
-                return cache;
-            const css = parser({ ...cssProps, theme });
-            selectors.forEach((selector) => {
-                const selectorConfig = cssProps[selector] ?? {};
-                css[selector] = {
-                    ...getStylePropNames(selectorConfig, filteredProps),
-                    ...parser({ ...selectorConfig, theme }),
-                };
-            });
-            /** Merge the static and generated css and save it to the cache */
-            cache = {
-                ...staticCss,
-                ...css,
-            };
-            return cache;
-        };
-    };
+function createCss(config) {
+  var parser = 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 */
+
+    var selectors = allKeys.filter(function (key) {
+      return !filteredProps.includes(key) && isObject(cssProps[key]);
+    });
+    /** Static CSS Properties get extracted if they match neither syntax */
+
+    var staticCss = getStylePropNames(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
+    return function (_ref) {
+      var theme = _ref.theme;
+      if (cache) return cache;
+      var css = parser(_objectSpread2(_objectSpread2({}, 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] = _objectSpread2(_objectSpread2({}, getStylePropNames(selectorConfig, filteredProps)), parser(_objectSpread2(_objectSpread2({}, selectorConfig), {}, {
+          theme: theme
+        })));
+      });
+      /** Merge the static and generated css and save it to the cache */
+
+      cache = _objectSpread2(_objectSpread2({}, staticCss), css);
+      return cache;
+    };
+  };
 }
 
-function createVariant(config) {
-    const css = createCss(config);
-    return ({ prop = 'variant', defaultVariant, base = {}, variants }) => {
-        const baseFn = css(base);
-        const variantFns = {};
-        Object.keys(variants).forEach((key) => {
-            const variantKey = key;
-            const cssProps = variants[variantKey];
-            variantFns[variantKey] = css(cssProps);
-        });
-        return (props) => {
-            const { [prop]: selected = defaultVariant } = props;
-            const styles = {};
-            if (!selected)
-                return styles;
-            return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
-        };
-    };
+function createVariant(config) {
+  var css = createCss(config);
+  return function (_ref) {
+    var _ref$prop = _ref.prop,
+        prop = _ref$prop === void 0 ? 'variant' : _ref$prop,
+        defaultVariant = _ref.defaultVariant,
+        _ref$base = _ref.base,
+        base = _ref$base === void 0 ? {} : _ref$base,
+        variants = _ref.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 function (props) {
+      var _variantFns$selected;
+
+      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 === null || variantFns === void 0 ? void 0 : (_variantFns$selected = variantFns[selected]) === null || _variantFns$selected === void 0 ? void 0 : _variantFns$selected.call(variantFns, props));
+    };
+  };
 }
 
-function compose(...parsers) {
-    return createParser(parsers.reduce((carry, parser) => ({ ...carry, ...parser.config }), {}));
+function compose() {
+  for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+    parsers[_key] = arguments[_key];
+  }
+
+  return createParser(parsers.reduce(function (carry, parser) {
+    return _objectSpread2(_objectSpread2({}, carry), parser.config);
+  }, {}));
 }
 
-function createStates(config) {
-    const css = 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 (props) => {
-            const styles = {};
-            orderedStates.forEach((state) => {
-                merge(styles, props[state] && stateFns[state](props));
-            });
-            return styles;
-        };
-    };
+function createStates(config) {
+  var css = 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 function (props) {
+      var styles = {};
+      orderedStates.forEach(function (state) {
+        merge(styles, props[state] && stateFns[state](props));
+      });
+      return styles;
+    };
+  };
 }
 
-const animusProps = {
-    compose,
-    create,
-    createCss,
-    createVariant,
-    createStates,
+var animusProps = {
+  compose: compose,
+  create: create,
+  createCss: createCss,
+  createVariant: createVariant,
+  createStates: createStates
 };
 
-const animus = config.build();
+/** Export full builder */
+
+var animus = config.build();
 
 export { AnimusConfig, animus, animusProps, borderShorthand, compatTheme, config, createAnimus, createScale, gridItem, gridItemRatio, numberToPx, numberToTemplate, parseGridRatio, percentageOrAbsolute, repeatGridItem, size };