@flodesk/grain 2.19.11 → 2.19.12

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/responsive.js

@@ -30,7 +30,7 @@ exports.breakpoints = breakpoints;
 
 var getBrakpoint = function getBrakpoint(breakpoint) {
   if (breakpoint in breakpoints) {
-    return breakpoints[breakpoint];
+    return "(min-width: ".concat(breakpoints[breakpoint], ")");
   }
 
   return breakpoint;
@@ -47,7 +47,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;

package/package.json

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