@animus-ui/core 0.1.1-beta.15 → 0.1.1-beta.19

package/dist/index.js

@@ -1,5 +1,6 @@
-import { isNumber, get, isArray, isObject, isString, isUndefined, identity, mapValues, omit, intersection, merge, pick, isEmpty, set, keys } from 'lodash';
 import _styled from '@emotion/styled/base';
+import isPropValid from '@emotion/is-prop-valid';
+import { isArray, isObject, get, isString, isUndefined, identity, mapValues, omit, intersection, merge, pick, isEmpty, set, isNumber, keys } from 'lodash';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -333,127 +334,91 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) {
 var createScale = function createScale() {
   return [];
 };
+var numericScale = [];
+var stringScale = [];
+var numericOrStringScale = [];
 
-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];
-
-  if (match === undefined) {
-    return value;
-  }
-
-  var numericValue = parseFloat(number);
-  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
+var compatTheme = {
+  breakpoints: {
+    xs: 480,
+    sm: 768,
+    md: 1024,
+    lg: 1200,
+    xl: 1440
+  },
+  space: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96],
+  fontSizes: [64, 44, 34, 26, 22, 20, 18, 16, 14],
+  lineHeights: numericOrStringScale,
+  letterSpacings: {},
+  fontWeights: numericOrStringScale,
+  fonts: {},
+  radii: numericOrStringScale,
+  borders: numericOrStringScale,
+  borderWidths: numericOrStringScale,
+  colors: {},
+  gradients: {},
+  shadows: {},
+  modes: {},
+  transitions: {},
+  animations: {},
+  zIndices: {},
+  opacities: {},
+  mode: undefined
 };
 
-var gridItemMap = {
-  max: 'max-content',
-  min: 'min-content'
+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
 };
-var unitlessNumber = new RegExp(/^[0-9]*$/);
 
-var isUnitlessNumber = function isUnitlessNumber(val) {
-  return unitlessNumber.test(val);
+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
+ */
 
-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 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);
 
-    var delimiter = gridStyle.length > 0 ? ' ' : '';
-    var curr = items[i];
+    if (aIsShorthand && bIsShorthand) {
+      var aNum = aProperties.length;
+      var bNum = bProperties.length;
 
-    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;
-    }
-  }
+      if (aProp !== bProp) {
+        return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
+      }
 
-  return gridStyle;
-};
-var gridItemRatio = function gridItemRatio(val) {
-  return isNumber(val) ? repeatGridItem('1', val) : parseGridRatio(val);
-};
+      if (aProp === bProp) {
+        if (aNum === 0) return SORT.A_BEFORE_B;
+        if (bNum === 0) return SORT.B_BEFORE_A;
+      }
 
-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");
-  });
-};
+      return compare(bNum, aNum);
+    }
 
-var borderShorthand = function borderShorthand(val) {
-  return numberToTemplate(val, function (width) {
-    return "".concat(width, "px solid currentColor");
+    if (aIsShorthand) return SORT.A_BEFORE_B;
+    if (bIsShorthand) return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
   });
 };
 
-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;
@@ -547,59 +512,6 @@ var createPropertyStyle = function createPropertyStyle(value, props, config) {
   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
-};
-
-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
- */
-
-
-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'];
 /**
@@ -994,10 +906,14 @@ var AnimusWithAll = /*#__PURE__*/function () {
     key: "asComponent",
     value: function asComponent(component) {
       var handler = createStylist(createParser$1(_objectSpread2(_objectSpread2({}, this.parser.config), this.custom), [].concat(_toConsumableArray(Object.keys(this.variants)), _toConsumableArray(Object.keys(this.statesConfig)))), this.baseStyles, this.variants, this.statesConfig);
+      var propNames = Object.keys(this.propRegistry);
       return /*#__PURE__*/_styled(component, {
+        shouldForwardProp: function shouldForwardProp(prop) {
+          return isPropValid(prop) && !propNames.includes(prop);
+        },
         target: "e19x4vr0",
         label: "AnimusWithAll"
-      })(handler, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuaW11cy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QmUiLCJmaWxlIjoiQW5pbXVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWVyZ2UgfSBmcm9tICdsb2Rhc2gnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IGNyZWF0ZVBhcnNlciB9IGZyb20gJy4vc3R5bGVzL2NyZWF0ZVBhcnNlcic7XHJcbmltcG9ydCB7IGNyZWF0ZVN0eWxpc3QgfSBmcm9tICcuL3N0eWxlcy9jcmVhdGVTdHlsaXN0JztcclxuZXhwb3J0IGNsYXNzIEFuaW11c1dpdGhBbGwge1xyXG4gICAgcHJvcFJlZ2lzdHJ5ID0ge307XHJcbiAgICBncm91cFJlZ2lzdHJ5ID0ge307XHJcbiAgICBwYXJzZXIgPSB7fTtcclxuICAgIGJhc2VTdHlsZXMgPSB7fTtcclxuICAgIHN0YXRlc0NvbmZpZyA9IHt9O1xyXG4gICAgdmFyaWFudHMgPSB7fTtcclxuICAgIGFjdGl2ZUdyb3VwcyA9IHt9O1xyXG4gICAgY3VzdG9tID0ge307XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHZhcmlhbnRzLCBzdGF0ZXMsIGFjdGl2ZUdyb3VwcywgY3VzdG9tKSB7XHJcbiAgICAgICAgdGhpcy5wcm9wUmVnaXN0cnkgPSBwcm9wcztcclxuICAgICAgICB0aGlzLmdyb3VwUmVnaXN0cnkgPSBncm91cHM7XHJcbiAgICAgICAgdGhpcy5wYXJzZXIgPSBwYXJzZXI7XHJcbiAgICAgICAgdGhpcy5iYXNlU3R5bGVzID0gYmFzZTtcclxuICAgICAgICB0aGlzLnZhcmlhbnRzID0gdmFyaWFudHM7XHJcbiAgICAgICAgdGhpcy5zdGF0ZXNDb25maWcgPSBzdGF0ZXM7XHJcbiAgICAgICAgdGhpcy5hY3RpdmVHcm91cHMgPSBhY3RpdmVHcm91cHM7XHJcbiAgICAgICAgdGhpcy5jdXN0b20gPSBjdXN0b207XHJcbiAgICB9XHJcbiAgICBhc0NvbXBvbmVudChjb21wb25lbnQpIHtcclxuICAgICAgICBjb25zdCBoYW5kbGVyID0gY3JlYXRlU3R5bGlzdChjcmVhdGVQYXJzZXIoeyAuLi50aGlzLnBhcnNlci5jb25maWcsIC4uLnRoaXMuY3VzdG9tIH0sIFtcclxuICAgICAgICAgICAgLi4uT2JqZWN0LmtleXModGhpcy52YXJpYW50cyksXHJcbiAgICAgICAgICAgIC4uLk9iamVjdC5rZXlzKHRoaXMuc3RhdGVzQ29uZmlnKSxcclxuICAgICAgICBdKSwgdGhpcy5iYXNlU3R5bGVzLCB0aGlzLnZhcmlhbnRzLCB0aGlzLnN0YXRlc0NvbmZpZyk7XHJcbiAgICAgICAgcmV0dXJuIHN0eWxlZChjb21wb25lbnQpKGhhbmRsZXIpO1xyXG4gICAgfVxyXG4gICAgYnVpbGQoKSB7XHJcbiAgICAgICAgY29uc3QgaGFuZGxlciA9IGNyZWF0ZVN0eWxpc3QoY3JlYXRlUGFyc2VyKHsgLi4udGhpcy5wYXJzZXIuY29uZmlnLCAuLi50aGlzLmN1c3RvbSB9LCBbXHJcbiAgICAgICAgICAgIC4uLk9iamVjdC5rZXlzKHRoaXMudmFyaWFudHMpLFxyXG4gICAgICAgICAgICAuLi5PYmplY3Qua2V5cyh0aGlzLnN0YXRlc0NvbmZpZyksXHJcbiAgICAgICAgXSksIHRoaXMuYmFzZVN0eWxlcywgdGhpcy52YXJpYW50cywgdGhpcy5zdGF0ZXNDb25maWcpO1xyXG4gICAgICAgIHJldHVybiBoYW5kbGVyO1xyXG4gICAgfVxyXG59XHJcbmNsYXNzIEFuaW11c1dpdGhTeXN0ZW0gZXh0ZW5kcyBBbmltdXNXaXRoQWxsIHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcywgYWN0aXZlR3JvdXBzKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzLCBhY3RpdmVHcm91cHMsIHt9KTtcclxuICAgIH1cclxuICAgIHByb3BzKGNvbmZpZykge1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aEFsbCh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgdGhpcy5iYXNlU3R5bGVzLCB0aGlzLnZhcmlhbnRzLCB0aGlzLnN0YXRlc0NvbmZpZywgdGhpcy5hY3RpdmVHcm91cHMsIGNvbmZpZyk7XHJcbiAgICB9XHJcbn1cclxuY2xhc3MgQW5pbXVzV2l0aFN0YXRlcyBleHRlbmRzIEFuaW11c1dpdGhTeXN0ZW0ge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzLCB7fSk7XHJcbiAgICB9XHJcbiAgICBncm91cHMoY29uZmlnKSB7XHJcbiAgICAgICAgcmV0dXJuIG5ldyBBbmltdXNXaXRoU3lzdGVtKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIHRoaXMuc3RhdGVzQ29uZmlnLCBjb25maWcpO1xyXG4gICAgfVxyXG59XHJcbmNsYXNzIEFuaW11c1dpdGhWYXJpYW50cyBleHRlbmRzIEFuaW11c1dpdGhTdGF0ZXMge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHt9KTtcclxuICAgIH1cclxuICAgIHN0YXRlcyhjb25maWcpIHtcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhTdGF0ZXModGhpcy5wcm9wUmVnaXN0cnksIHRoaXMuZ3JvdXBSZWdpc3RyeSwgdGhpcy5wYXJzZXIsIHRoaXMuYmFzZVN0eWxlcywgdGhpcy52YXJpYW50cywgY29uZmlnKTtcclxuICAgIH1cclxuICAgIHZhcmlhbnQob3B0aW9ucykge1xyXG4gICAgICAgIGNvbnN0IHByb3AgPSBvcHRpb25zLnByb3AgfHwgJ3ZhcmlhbnQnO1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aFZhcmlhbnRzKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIG1lcmdlKHRoaXMudmFyaWFudHMsIHsgW3Byb3BdOiBvcHRpb25zIH0pKTtcclxuICAgIH1cclxufVxyXG5jbGFzcyBBbmltdXNXaXRoQmFzZSBleHRlbmRzIEFuaW11c1dpdGhWYXJpYW50cyB7XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UpIHtcclxuICAgICAgICBzdXBlcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHt9KTtcclxuICAgIH1cclxuICAgIHZhcmlhbnQob3B0aW9ucykge1xyXG4gICAgICAgIGNvbnN0IHByb3AgPSBvcHRpb25zLnByb3AgfHwgJ3ZhcmlhbnQnO1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aFZhcmlhbnRzKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIG1lcmdlKHRoaXMudmFyaWFudHMsIHsgW3Byb3BdOiBvcHRpb25zIH0pKTtcclxuICAgIH1cclxufVxyXG5leHBvcnQgY2xhc3MgQW5pbXVzIGV4dGVuZHMgQW5pbXVzV2l0aEJhc2Uge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3Vwcykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIGNyZWF0ZVBhcnNlcihwcm9wcyksIHt9KTtcclxuICAgIH1cclxuICAgIHN0eWxlcyhjb25maWcpIHtcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhCYXNlKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCBjb25maWcpO1xyXG4gICAgfVxyXG59XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUFuaW11cy5qcy5tYXAiXX0= */");
+      })(handler, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuaW11cy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QmUiLCJmaWxlIjoiQW5pbXVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGlzUHJvcFZhbGlkIGZyb20gJ0BlbW90aW9uL2lzLXByb3AtdmFsaWQnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IG1lcmdlIH0gZnJvbSAnbG9kYXNoJztcclxuaW1wb3J0IHsgY3JlYXRlUGFyc2VyIH0gZnJvbSAnLi9zdHlsZXMvY3JlYXRlUGFyc2VyJztcclxuaW1wb3J0IHsgY3JlYXRlU3R5bGlzdCB9IGZyb20gJy4vc3R5bGVzL2NyZWF0ZVN0eWxpc3QnO1xyXG5leHBvcnQgY2xhc3MgQW5pbXVzV2l0aEFsbCB7XHJcbiAgICBwcm9wUmVnaXN0cnkgPSB7fTtcclxuICAgIGdyb3VwUmVnaXN0cnkgPSB7fTtcclxuICAgIHBhcnNlciA9IHt9O1xyXG4gICAgYmFzZVN0eWxlcyA9IHt9O1xyXG4gICAgc3RhdGVzQ29uZmlnID0ge307XHJcbiAgICB2YXJpYW50cyA9IHt9O1xyXG4gICAgYWN0aXZlR3JvdXBzID0ge307XHJcbiAgICBjdXN0b20gPSB7fTtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcywgYWN0aXZlR3JvdXBzLCBjdXN0b20pIHtcclxuICAgICAgICB0aGlzLnByb3BSZWdpc3RyeSA9IHByb3BzO1xyXG4gICAgICAgIHRoaXMuZ3JvdXBSZWdpc3RyeSA9IGdyb3VwcztcclxuICAgICAgICB0aGlzLnBhcnNlciA9IHBhcnNlcjtcclxuICAgICAgICB0aGlzLmJhc2VTdHlsZXMgPSBiYXNlO1xyXG4gICAgICAgIHRoaXMudmFyaWFudHMgPSB2YXJpYW50cztcclxuICAgICAgICB0aGlzLnN0YXRlc0NvbmZpZyA9IHN0YXRlcztcclxuICAgICAgICB0aGlzLmFjdGl2ZUdyb3VwcyA9IGFjdGl2ZUdyb3VwcztcclxuICAgICAgICB0aGlzLmN1c3RvbSA9IGN1c3RvbTtcclxuICAgIH1cclxuICAgIGFzQ29tcG9uZW50KGNvbXBvbmVudCkge1xyXG4gICAgICAgIGNvbnN0IGhhbmRsZXIgPSBjcmVhdGVTdHlsaXN0KGNyZWF0ZVBhcnNlcih7IC4uLnRoaXMucGFyc2VyLmNvbmZpZywgLi4udGhpcy5jdXN0b20gfSwgW1xyXG4gICAgICAgICAgICAuLi5PYmplY3Qua2V5cyh0aGlzLnZhcmlhbnRzKSxcclxuICAgICAgICAgICAgLi4uT2JqZWN0LmtleXModGhpcy5zdGF0ZXNDb25maWcpLFxyXG4gICAgICAgIF0pLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIHRoaXMuc3RhdGVzQ29uZmlnKTtcclxuICAgICAgICBjb25zdCBwcm9wTmFtZXMgPSBPYmplY3Qua2V5cyh0aGlzLnByb3BSZWdpc3RyeSk7XHJcbiAgICAgICAgcmV0dXJuIHN0eWxlZChjb21wb25lbnQsIHtcclxuICAgICAgICAgICAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm9wKSA9PiBpc1Byb3BWYWxpZChwcm9wKSAmJiAhcHJvcE5hbWVzLmluY2x1ZGVzKHByb3ApLFxyXG4gICAgICAgIH0pKGhhbmRsZXIpO1xyXG4gICAgfVxyXG4gICAgYnVpbGQoKSB7XHJcbiAgICAgICAgY29uc3QgaGFuZGxlciA9IGNyZWF0ZVN0eWxpc3QoY3JlYXRlUGFyc2VyKHsgLi4udGhpcy5wYXJzZXIuY29uZmlnLCAuLi50aGlzLmN1c3RvbSB9LCBbXHJcbiAgICAgICAgICAgIC4uLk9iamVjdC5rZXlzKHRoaXMudmFyaWFudHMpLFxyXG4gICAgICAgICAgICAuLi5PYmplY3Qua2V5cyh0aGlzLnN0YXRlc0NvbmZpZyksXHJcbiAgICAgICAgXSksIHRoaXMuYmFzZVN0eWxlcywgdGhpcy52YXJpYW50cywgdGhpcy5zdGF0ZXNDb25maWcpO1xyXG4gICAgICAgIHJldHVybiBoYW5kbGVyO1xyXG4gICAgfVxyXG59XHJcbmNsYXNzIEFuaW11c1dpdGhTeXN0ZW0gZXh0ZW5kcyBBbmltdXNXaXRoQWxsIHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHN0YXRlcywgYWN0aXZlR3JvdXBzKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzLCBhY3RpdmVHcm91cHMsIHt9KTtcclxuICAgIH1cclxuICAgIHByb3BzKGNvbmZpZykge1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aEFsbCh0aGlzLnByb3BSZWdpc3RyeSwgdGhpcy5ncm91cFJlZ2lzdHJ5LCB0aGlzLnBhcnNlciwgdGhpcy5iYXNlU3R5bGVzLCB0aGlzLnZhcmlhbnRzLCB0aGlzLnN0YXRlc0NvbmZpZywgdGhpcy5hY3RpdmVHcm91cHMsIGNvbmZpZyk7XHJcbiAgICB9XHJcbn1cclxuY2xhc3MgQW5pbXVzV2l0aFN0YXRlcyBleHRlbmRzIEFuaW11c1dpdGhTeXN0ZW0ge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzKSB7XHJcbiAgICAgICAgc3VwZXIocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cywgc3RhdGVzLCB7fSk7XHJcbiAgICB9XHJcbiAgICBncm91cHMoY29uZmlnKSB7XHJcbiAgICAgICAgcmV0dXJuIG5ldyBBbmltdXNXaXRoU3lzdGVtKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIHRoaXMudmFyaWFudHMsIHRoaXMuc3RhdGVzQ29uZmlnLCBjb25maWcpO1xyXG4gICAgfVxyXG59XHJcbmNsYXNzIEFuaW11c1dpdGhWYXJpYW50cyBleHRlbmRzIEFuaW11c1dpdGhTdGF0ZXMge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3VwcywgcGFyc2VyLCBiYXNlLCB2YXJpYW50cykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIHBhcnNlciwgYmFzZSwgdmFyaWFudHMsIHt9KTtcclxuICAgIH1cclxuICAgIHN0YXRlcyhjb25maWcpIHtcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhTdGF0ZXModGhpcy5wcm9wUmVnaXN0cnksIHRoaXMuZ3JvdXBSZWdpc3RyeSwgdGhpcy5wYXJzZXIsIHRoaXMuYmFzZVN0eWxlcywgdGhpcy52YXJpYW50cywgY29uZmlnKTtcclxuICAgIH1cclxuICAgIHZhcmlhbnQob3B0aW9ucykge1xyXG4gICAgICAgIGNvbnN0IHByb3AgPSBvcHRpb25zLnByb3AgfHwgJ3ZhcmlhbnQnO1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aFZhcmlhbnRzKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIG1lcmdlKHRoaXMudmFyaWFudHMsIHsgW3Byb3BdOiBvcHRpb25zIH0pKTtcclxuICAgIH1cclxufVxyXG5jbGFzcyBBbmltdXNXaXRoQmFzZSBleHRlbmRzIEFuaW11c1dpdGhWYXJpYW50cyB7XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UpIHtcclxuICAgICAgICBzdXBlcihwcm9wcywgZ3JvdXBzLCBwYXJzZXIsIGJhc2UsIHt9KTtcclxuICAgIH1cclxuICAgIHZhcmlhbnQob3B0aW9ucykge1xyXG4gICAgICAgIGNvbnN0IHByb3AgPSBvcHRpb25zLnByb3AgfHwgJ3ZhcmlhbnQnO1xyXG4gICAgICAgIHJldHVybiBuZXcgQW5pbXVzV2l0aFZhcmlhbnRzKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCB0aGlzLmJhc2VTdHlsZXMsIG1lcmdlKHRoaXMudmFyaWFudHMsIHsgW3Byb3BdOiBvcHRpb25zIH0pKTtcclxuICAgIH1cclxufVxyXG5leHBvcnQgY2xhc3MgQW5pbXVzIGV4dGVuZHMgQW5pbXVzV2l0aEJhc2Uge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMsIGdyb3Vwcykge1xyXG4gICAgICAgIHN1cGVyKHByb3BzLCBncm91cHMsIGNyZWF0ZVBhcnNlcihwcm9wcyksIHt9KTtcclxuICAgIH1cclxuICAgIHN0eWxlcyhjb25maWcpIHtcclxuICAgICAgICByZXR1cm4gbmV3IEFuaW11c1dpdGhCYXNlKHRoaXMucHJvcFJlZ2lzdHJ5LCB0aGlzLmdyb3VwUmVnaXN0cnksIHRoaXMucGFyc2VyLCBjb25maWcpO1xyXG4gICAgfVxyXG59XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUFuaW11cy5qcy5tYXAiXX0= */");
     }
   }, {
     key: "build",
@@ -1170,19 +1086,112 @@ var createAnimus = function createAnimus() {
   return new AnimusConfig();
 };
 
+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];
+
+  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]*$/);
+
+var isUnitlessNumber = function isUnitlessNumber(val) {
+  return unitlessNumber.test(val);
+};
+
+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 color = {
   color: {
     property: 'color',
     scale: 'colors'
   },
-  textColor: {
-    property: 'color',
-    scale: 'colors'
-  },
   bg: {
     property: 'backgroundColor',
     scale: 'colors'
   },
+  gradient: {
+    property: 'backgroundImage',
+    scale: 'gradients'
+  },
   borderColor: {
     property: 'borderColor',
     scale: 'colors'
@@ -1212,6 +1221,14 @@ var color = {
   borderColorBottom: {
     property: 'borderBottomColor',
     scale: 'colors'
+  },
+  fill: {
+    property: 'fill',
+    scale: 'colors'
+  },
+  stroke: {
+    property: 'stroke',
+    scale: 'colors'
   }
 };
 var border = {
@@ -1254,77 +1271,84 @@ var border = {
   },
   // Width
   borderWidth: {
-    property: 'borderWidth'
+    property: 'borderWidth',
+    scale: 'borderWidths'
   },
   borderWidthX: {
     property: 'borderWidth',
-    properties: ['borderLeftWidth', 'borderRightWidth']
+    properties: ['borderLeftWidth', 'borderRightWidth'],
+    scale: 'borderWidths'
   },
   borderWidthY: {
     property: 'borderWidth',
-    properties: ['borderTopWidth', 'borderBottomWidth']
+    properties: ['borderTopWidth', 'borderBottomWidth'],
+    scale: 'borderWidths'
   },
   borderWidthLeft: {
-    property: 'borderLeftWidth'
+    property: 'borderLeftWidth',
+    scale: 'borderWidths'
   },
   borderWidthRight: {
-    property: 'borderRightWidth'
+    property: 'borderRightWidth',
+    scale: 'borderWidths'
   },
   borderWidthTop: {
-    property: 'borderTopWidth'
+    property: 'borderTopWidth',
+    scale: 'borderWidths'
   },
   borderWidthBottom: {
-    property: 'borderBottomWidth'
+    property: 'borderBottomWidth',
+    scale: 'borderWidths'
   },
   // Radius
   borderRadius: {
     property: 'borderRadius',
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusLeft: {
     property: 'borderRadius',
     properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusTop: {
     property: 'borderRadius',
     properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusBottom: {
     property: 'borderRadius',
     properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusRight: {
     property: 'borderRadius',
     properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusTopLeft: {
     property: 'borderTopLeftRadius',
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusTopRight: {
     property: 'borderTopRightRadius',
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusBottomRight: {
     property: 'borderBottomRightRadius',
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   borderRadiusBottomLeft: {
     property: 'borderBottomLeftRadius',
     scale: 'radii',
-    transform: numberToPx
+    transform: size
   },
   // Style
   borderStyle: {
@@ -1354,15 +1378,15 @@ var border = {
 var gaps = {
   gap: {
     property: 'gap',
-    scale: 'spacing'
+    scale: 'space'
   },
   rowGap: {
     property: 'rowGap',
-    scale: 'spacing'
+    scale: 'space'
   },
   columnGap: {
     property: 'columnGap',
-    scale: 'spacing'
+    scale: 'space'
   }
 };
 var selfAlignments = {
@@ -1529,18 +1553,22 @@ var positioning = {
     transform: size
   },
   zIndex: {
-    property: 'zIndex'
+    property: 'zIndex',
+    scale: 'zIndices'
   },
   opacity: {
-    property: 'opacity'
+    property: 'opacity',
+    scale: 'opacities'
   }
 };
 var shadows = {
   boxShadow: {
-    property: 'boxShadow'
+    property: 'boxShadow',
+    scale: 'shadows'
   },
   textShadow: {
-    property: 'textShadow'
+    property: 'textShadow',
+    scale: 'shadows'
   }
 };
 var layout = _objectSpread2(_objectSpread2(_objectSpread2({
@@ -1592,23 +1620,24 @@ var layout = _objectSpread2(_objectSpread2(_objectSpread2({
 var typography = {
   fontFamily: {
     property: 'fontFamily',
-    scale: 'fontFamily'
+    scale: 'fonts'
   },
   fontWeight: {
     property: 'fontWeight',
-    scale: 'fontWeight'
+    scale: 'fontWeights'
   },
   lineHeight: {
     property: 'lineHeight',
-    scale: 'lineHeight',
+    scale: 'lineHeights',
     lineHeight: 'lineHeight'
   },
   fontSize: {
     property: 'fontSize',
-    scale: 'fontSize'
+    scale: 'fontSizes'
   },
   letterSpacing: {
-    property: 'letterSpacing'
+    property: 'letterSpacing',
+    scale: 'letterSpacings'
   },
   textAlign: {
     property: 'textAlign'
@@ -1629,68 +1658,81 @@ var typography = {
 var margin = {
   m: {
     property: 'margin',
-    scale: 'spacing'
+    scale: 'space'
   },
   mx: {
     property: 'margin',
     properties: ['marginLeft', 'marginRight'],
-    scale: 'spacing'
+    scale: 'space'
   },
   my: {
     property: 'margin',
     properties: ['marginTop', 'marginBottom'],
-    scale: 'spacing'
+    scale: 'space'
   },
   mt: {
     property: 'marginTop',
-    scale: 'spacing'
+    scale: 'space'
   },
   mb: {
     property: 'marginBottom',
-    scale: 'spacing'
+    scale: 'space'
   },
   mr: {
     property: 'marginRight',
-    scale: 'spacing'
+    scale: 'space'
   },
   ml: {
     property: 'marginLeft',
-    scale: 'spacing'
+    scale: 'space'
   }
 };
 var padding = {
   p: {
     property: 'padding',
-    scale: 'spacing'
+    scale: 'space'
   },
   px: {
     property: 'padding',
     properties: ['paddingLeft', 'paddingRight'],
-    scale: 'spacing'
+    scale: 'space'
   },
   py: {
     property: 'padding',
     properties: ['paddingTop', 'paddingBottom'],
-    scale: 'spacing'
+    scale: 'space'
   },
   pt: {
     property: 'paddingTop',
-    scale: 'spacing'
+    scale: 'space'
   },
   pb: {
     property: 'paddingBottom',
-    scale: 'spacing'
+    scale: 'space'
   },
   pr: {
     property: 'paddingRight',
-    scale: 'spacing'
+    scale: 'space'
   },
   pl: {
     property: 'paddingLeft',
-    scale: 'spacing'
+    scale: 'space'
   }
 };
 var space = _objectSpread2(_objectSpread2({}, margin), padding);
+var transitions = {
+  transition: {
+    property: 'transition',
+    scale: 'transitions'
+  },
+  animation: {
+    property: 'animation',
+    scale: 'animations'
+  },
+  animationPlayState: {
+    property: 'animationPlayState'
+  }
+};
 var mode = {
   mode: {
     property: 'none',
@@ -1702,15 +1744,9 @@ var 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);
+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).addGroup('transitions', transitions);
 config.build();
 
-var getStylePropNames = function getStylePropNames(props, filteredKeys) {
-  return pick(props, keys(props).filter(function (key) {
-    return !filteredKeys.includes(key);
-  }));
-};
-
 var _excluded = ["_"];
 var BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
@@ -1868,6 +1904,16 @@ function createParser(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 createTransform(prop, config) {
   var _config$transform = config.transform,
       transform = _config$transform === void 0 ? identity : _config$transform,
@@ -1962,6 +2008,12 @@ function create(config) {
   return createParser(transforms);
 }
 
+var getStylePropNames = function getStylePropNames(props, filteredKeys) {
+  return pick(props, keys(props).filter(function (key) {
+    return !filteredKeys.includes(key);
+  }));
+};
+
 function createCss(config) {
   var parser = create(config);
   var filteredProps = parser.propNames;
@@ -1998,6 +2050,26 @@ function createCss(config) {
   };
 }
 
+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;
+    };
+  };
+}
+
 function createVariant(config) {
   var css = createCss(config);
   return function (_ref) {
@@ -2026,36 +2098,6 @@ function createVariant(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) {
-  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;
-    };
-  };
-}
-
 var animusProps = {
   compose: compose,
   create: create,
@@ -2068,4 +2110,4 @@ var animusProps = {
 
 var animus = config.build();
 
-export { AnimusConfig, animus, animusProps, borderShorthand, compatTheme, config, createAnimus, createScale, gridItem, gridItemRatio, numberToPx, numberToTemplate, parseGridRatio, percentageOrAbsolute, repeatGridItem, size };
+export { AnimusConfig, animus, animusProps, borderShorthand, compatTheme, config, createAnimus, createScale, gridItem, gridItemRatio, numberToPx, numberToTemplate, numericOrStringScale, numericScale, parseGridRatio, percentageOrAbsolute, repeatGridItem, size, stringScale };