@flodesk/grain 10.10.9 → 10.10.11

package/es/components/box2.js

@@ -14,8 +14,6 @@ var _excluded = ["color", "colorHover", "backgroundColor", "backgroundColorHover
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import "core-js/modules/es.string.trim.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
 
 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; }
 
@@ -163,12 +161,12 @@ export var Box2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shadow: shadow,
     shadowHover: shadowHover,
     radius: radius
-  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderColorHover", borderColorHover), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderSide", borderSide), _generateClassNameAtt)), propClassName].join(' ').replace(/\s+/g, ' ').trim();
+  }, _defineProperty(_generateClassNameAtt, "position", position), _defineProperty(_generateClassNameAtt, "overflow", overflow), _defineProperty(_generateClassNameAtt, "transition", transition), _defineProperty(_generateClassNameAtt, "transitionHover", transitionHover), _defineProperty(_generateClassNameAtt, "cursor", cursor), _defineProperty(_generateClassNameAtt, "alignSelf", alignSelf), _defineProperty(_generateClassNameAtt, "borderColor", borderColor), _defineProperty(_generateClassNameAtt, "borderColorHover", borderColorHover), _defineProperty(_generateClassNameAtt, "borderWidth", borderWidth), _defineProperty(_generateClassNameAtt, "borderSide", borderSide), _generateClassNameAtt)), propClassName].join(' ').trim();
   var Tag = tag;
   return ___EmotionJSX(Tag, _extends({
     ref: ref,
     style: styles,
-    className: classNames
+    className: classNames || undefined
   }, otherProps), children);
 });
 Box2.propTypes = {

package/es/styles/utilities.js

@@ -27,6 +27,7 @@ import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { styleConfig } from '../utilities';
 import { propNameToShort } from '../utilities/style-config';
+import { breakpoints, deviceShort } from '../variables';
 
 var generateUtilityClassDeclarations = function generateUtilityClassDeclarations(propertySets) {
   var css = '';
@@ -46,11 +47,6 @@ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations
   return css;
 };
 
-var breakpoints = {
-  tab: 1169,
-  mob: 767
-};
-
 var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
@@ -64,12 +60,14 @@ var generateStyleClassDeclarations = function generateStyleClassDeclarations(pro
       if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
 
       if (set.isResponsive) {
-        css += "\n          [style*=\"".concat(cssVar, "-def\"] {").concat(property, ": var(").concat(cssVar, "-def)}\n        ");
+        var device = deviceShort.default;
+        css += "\n          [style*=\"".concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n        ");
         Object.entries(breakpoints).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
-              device = _ref2[0],
+              deviceName = _ref2[0],
               screenSize = _ref2[1];
 
+          var device = deviceShort[deviceName];
           css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
         });
       }

package/es/utilities/attributes.js

@@ -1,10 +1,15 @@
 import "core-js/modules/es.object.values.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.keys.js";
+import { breakpoints, deviceShort } from '../variables';
 import { isObject } from './helpers';
 import { propNameToShort, styleConfig } from './style-config';
+var mediaQueries = {
+  tablet: "@media (max-width: ".concat(breakpoints.tablet, "px)"),
+  mobile: "@media (max-width: ".concat(breakpoints.mobile, "px)")
+};
 export var generateStyleAttributes = function generateStyleAttributes(props) {
   var styles = {};
   var styleConfigValues = Object.values(styleConfig);
@@ -24,10 +29,15 @@ export var generateStyleAttributes = function generateStyleAttributes(props) {
       } else {
         var def = value.default,
             mobile = value.mobile,
-            tablet = value.tablet;
-        styles["--".concat(propNameShort, "-def")] = hasTransformer ? propsSet.valueTransformer(def) : def;
-        styles["--".concat(propNameShort, "-mob")] = hasTransformer ? propsSet.valueTransformer(mobile) : mobile;
-        styles["--".concat(propNameShort, "-tab")] = hasTransformer ? propsSet.valueTransformer(tablet) : tablet;
+            tablet = value.tablet; // accept fixed string media queries to help migration
+
+        var mobileMediaValue = value[mediaQueries.mobile];
+        var tabletMediaValue = value[mediaQueries.tablet];
+        var mob = mobileMediaValue || mobile;
+        var tab = tabletMediaValue || tablet;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.default)] = hasTransformer ? propsSet.valueTransformer(def) : def;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.mobile)] = hasTransformer ? propsSet.valueTransformer(mob) : mob;
+        styles["--".concat(propNameShort, "-").concat(deviceShort.tablet)] = hasTransformer ? propsSet.valueTransformer(tab) : tab;
       }
     });
   });

package/es/variables/breakpoints.js

@@ -0,0 +1,9 @@
+export var breakpoints = {
+  tablet: 1169,
+  mobile: 767
+};
+export var deviceShort = {
+  default: 'def',
+  mobile: 'mob',
+  tablet: 'tab'
+};

package/es/variables/index.js

@@ -1,2 +1,3 @@
 export * from './vars';
-export * from './colors';
+export * from './colors';
+export * from './breakpoints';

package/package.json

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