@flodesk/grain 3.0.2 → 3.0.3

package/es/utilities/responsive.js

@@ -13,7 +13,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.entries.js";
-import "core-js/modules/es.array.reverse.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.to-string.js";
@@ -40,20 +39,23 @@ export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
   return "\n    ".concat(mediaQuery, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
-  var varPrefix = varInfo[type].prefix;
+  var checkValueInVars = function checkValueInVars(value) {
+    if (type && value in vars[type]) {
+      var varPrefix = varInfo[type].prefix;
+      return getCssVar(varPrefix, value);
+    }
+
+    return value;
+  };
+
   var declarations = Object.entries(obj).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         mediaQuery = _ref2[0],
         value = _ref2[1];
 
-    if (value in vars[type]) {
-      return getMediaCss(mediaQuery, property, getCssVar(varPrefix, value));
-    }
-
-    return getMediaCss(mediaQuery, property, value);
-  }); // reverse array to make sure max-widths correctly override
-
-  declarations.reverse().join('');
+    return getMediaCss(mediaQuery, property, checkValueInVars(value));
+  });
+  declarations.join('');
   return declarations;
 };
 export var getDimension = function getDimension(dimension) {
@@ -61,14 +63,14 @@ export var getDimension = function getDimension(dimension) {
   if (isString(dimension)) return dimension;
   if (isNumber(dimension)) return u(dimension);
 };
-export var getSpace = function getSpace(value) {
-  if (value in vars.spaces) {
-    return getCssVar(varInfo.spaces.prefix, value);
+export var getSpace = function getSpace(space) {
+  if (space in vars.spaces) {
+    return getCssVar(varInfo.spaces.prefix, space);
   }
 
-  if (value === 0) return value;
-  if (isString(value)) return value;
-  if (isNumber(value)) return u(value);
+  if (space === 0) return space;
+  if (isString(space)) return space;
+  if (isNumber(space)) return u(space);
 };
 export var getResponsiveDimension = function getResponsiveDimension(property, dimension) {
   if (!dimension) return;
@@ -105,22 +107,12 @@ export var getResponsiveTextSize = function getResponsiveTextSize(size) {
 
   return "".concat(property, ": ").concat(getTextSize(size));
 };
-export var mapColumnsToMedia = function mapColumnsToMedia(property, obj) {
-  var declarations = Object.entries(obj).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        breakpoint = _ref4[0],
-        value = _ref4[1];
-
-    return getMediaCss(breakpoint, property, value);
-  });
-  return declarations.join('');
-};
 export var getResponsiveGridColumns = function getResponsiveGridColumns(columns) {
   if (!columns) return;
   var property = 'grid-template-columns';
 
   if (isObject(columns)) {
-    return mapColumnsToMedia(property, columns);
+    return mapObjToMedia(property, columns);
   }
 
   return "".concat(property, ": ").concat(columns);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",