@flodesk/grain 2.19.10 → 2.19.13

package/es/components/box.js

@@ -206,8 +206,6 @@ Box.__docgenInfo = {
           "name": "number"
         }, {
           "name": "string"
-        }, {
-          "name": "object"
         }]
       },
       "required": false,

package/es/hooks/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useMedia", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useMedia;
+  }
+});
+
+var _useMedia = require("./useMedia");

package/es/hooks/useMedia.js

@@ -0,0 +1,54 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMedia = useMedia;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.find-index.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+function useMedia(queries, values, defaultValue) {
+  var mediaQueryLists = queries.map(function (q) {
+    return window.matchMedia(q);
+  });
+
+  var getValue = function getValue() {
+    var index = mediaQueryLists.findIndex(function (mql) {
+      return mql.matches;
+    });
+    return typeof values[index] !== "undefined" ? values[index] : defaultValue;
+  };
+
+  var _useState = useState(getValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  useEffect(function () {
+    var handler = function handler() {
+      return setValue(getValue);
+    };
+
+    mediaQueryLists.forEach(function (mql) {
+      return mql.addListener(handler);
+    });
+    return function () {
+      return mediaQueryLists.forEach(function (mql) {
+        return mql.removeListener(handler);
+      });
+    };
+  }, []);
+  return value;
+}

package/es/utilities/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "getResponsiveDimension", {
     return _responsive.getResponsiveDimension;
   }
 });
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.breakpoints;
+  }
+});
 Object.defineProperty(exports, "getTextSize", {
   enumerable: true,
   get: function get() {

package/es/utilities/responsive.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getSpace = exports.getDimension = exports.mapObjToMedia = exports.getMediaCss = void 0;
+exports.getResponsiveTextSize = exports.getTextSize = exports.getResponsiveSpace = exports.getResponsiveDimension = exports.getSpace = exports.getDimension = exports.mapObjToMedia = exports.getMediaCss = exports.breakpoints = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -17,19 +17,21 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.object.entries.js");
 
+require("core-js/modules/es.array.reverse.js");
+
 var _ = require(".");
 
 var _variables = require("../variables");
 
 var breakpoints = {
-  breakpointS: "320px",
   breakpointM: "768px",
   breakpointL: "1170px"
 };
+exports.breakpoints = breakpoints;
 
 var getBrakpoint = function getBrakpoint(breakpoint) {
   if (breakpoint in breakpoints) {
-    return breakpoints[breakpoint];
+    return "(max-width: ".concat(breakpoints[breakpoint], ")");
   }
 
   return breakpoint;
@@ -46,7 +48,7 @@ var getMediaCss = function getMediaCss(breakpoint, property, value) {
     return "".concat(property, ": ").concat(getValue(value), ";");
   }
 
-  return "\n    @media (min-width: ".concat(getBrakpoint(breakpoint), ") {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+  return "\n    @media ".concat(getBrakpoint(breakpoint), " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
 };
 
 exports.getMediaCss = getMediaCss;
@@ -64,8 +66,10 @@ var mapObjToMedia = function mapObjToMedia(property, obj, varName) {
     }
 
     return getMediaCss(breakpoint, property, value);
-  });
-  return declarations.join("");
+  }); // reverse array to make sure max-widths correctly override
+
+  declarations.reverse().join("");
+  return declarations;
 };
 
 exports.mapObjToMedia = mapObjToMedia;

package/package.json

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