@flodesk/grain 11.1.0 → 11.2.1

package/es/components/arrange/index.js

@@ -29,10 +29,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { generateAttributes } from '../../utilities';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import { Box } from '../box';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -55,6 +56,7 @@ export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
@@ -70,7 +72,8 @@ export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
       columns: columns,
       rows: rows
     }, sharedProps),
-    classNameProps: _objectSpread({}, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps),
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/components/box.js

@@ -26,10 +26,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../types';
 import PropTypes from 'prop-types';
 import { generateAttributes } from '../utilities';
+import { BreakpointsContext } from './breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = _ref.color,
@@ -91,6 +92,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
   var Tag = tag;
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     padding: padding,
     paddingTop: paddingTop,
@@ -146,7 +148,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       overflow: overflow,
       overflowX: overflowX,
       overflowY: overflowY
-    }, sharedProps)
+    }, sharedProps),
+    breakpoints: breakpoints
   });
   var classAttributes = "".concat(attributes.classNames, " ").concat(propClassName).trim();
 

package/es/components/breakpoints-provider.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { breakpoints } from '../variables';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var BreakpointsContext = /*#__PURE__*/createContext(breakpoints);
+export var BreakpointsProvider = function BreakpointsProvider(_ref) {
+  var children = _ref.children,
+      breakpoints = _ref.breakpoints;
+  return ___EmotionJSX(BreakpointsContext.Provider, {
+    value: breakpoints
+  }, children);
+};

package/es/components/dropdown.js

@@ -89,9 +89,7 @@ export var Dropdown = function Dropdown(_ref2) {
       if (option.type === 'node') return ___EmotionJSX(Fragment, {
         key: index
       }, option.node({
-        requestClose: function requestClose() {
-          return close;
-        }
+        requestClose: close
       }));
       return ___EmotionJSX(Menu.Item, {
         key: index

package/es/components/flex/index.js

@@ -28,11 +28,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import { generateAttributes } from '../../utilities';
 import { Box } from '../box';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$direction = _ref.direction,
@@ -55,6 +56,7 @@ export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
@@ -67,7 +69,8 @@ export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var attributes = generateAttributes({
     styleProps: _objectSpread({}, sharedProps),
-    classNameProps: _objectSpread({}, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps),
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/components/nav/index.js

@@ -0,0 +1,108 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.assign.js";
+var _excluded = ["children", "direction", "justifyContent", "size", "className", "style"],
+    _excluded2 = ["children", "isActive"],
+    _excluded3 = ["children", "direction", "justifyContent", "size"];
+
+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";
+import "core-js/modules/es.array.concat.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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { forwardRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { generateAttributes } from '../../utilities';
+import { types } from '../../types';
+import { BreakpointsContext } from '../breakpoints-provider';
+import styles from './styles.module.css';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavRoot = function NavRoot(_ref) {
+  var children = _ref.children,
+      direction = _ref.direction,
+      justifyContent = _ref.justifyContent,
+      size = _ref.size,
+      className = _ref.className,
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var propClassName = className ? className : '';
+  var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
+  var attributes = generateAttributes({
+    styleProps: {
+      size: size,
+      justifyContent: justifyContent
+    },
+    classNameProps: {
+      size: size,
+      justifyContent: justifyContent
+    },
+    breakpoints: breakpoints
+  });
+
+  var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);
+
+  var classAttributes = [attributes.classNames, propClassName, styles.nav, styles[direction]].join(' ').replace(/\s+/g, ' ').trim();
+  return ___EmotionJSX("nav", _extends({
+    className: classAttributes,
+    style: styleAttributes
+  }, props), children);
+};
+
+export var NavItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      isActive = _ref2.isActive,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var classAttributes = "".concat(styles.navItem, " ").concat(isActive ? styles.isActive : '').trim();
+  return ___EmotionJSX("div", _extends({
+    ref: ref,
+    isActive: isActive,
+    className: classAttributes
+  }, props), children);
+});
+export var Nav = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+      _ref3$direction = _ref3.direction,
+      direction = _ref3$direction === void 0 ? 'row' : _ref3$direction,
+      justifyContent = _ref3.justifyContent,
+      size = _ref3.size,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  return ___EmotionJSX(NavRoot, _extends({
+    direction: direction,
+    size: size,
+    justifyContent: justifyContent,
+    ref: ref
+  }, props), children);
+});
+NavItem.propTypes = {
+  isActive: PropTypes.bool
+};
+Nav.propTypes = {
+  direction: PropTypes.oneOf(['row', 'column']),
+  size: types.responsiveTextSize,
+  justifyContent: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']), PropTypes.object])
+};

package/es/components/nav/styles.module.css

@@ -0,0 +1,42 @@
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--grn-space-s);
+}
+
+.nav.row {
+  flex-direction: row;
+  align-items: baseline;
+  column-gap: var(--grn-space-m);
+}
+
+.nav.row .navItem {
+  font-weight: var(--grn-weight-medium);
+}
+
+.nav.column {
+  flex-direction: column;
+  align-items: start;
+}
+
+.navItem {
+  cursor: pointer;
+  transition: color var(--grn-transition-leave);
+  color: var(--grn-color-content2);
+}
+
+.navItem.isActive {
+  color: var(--grn-color-content);
+  font-weight: var(--grn-weight-medium);
+}
+
+.navItem:hover {
+  color: var(--grn-color-content);
+  transition: color var(--grn-transition-hover);
+}
+
+.navItem a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+}

package/es/components/provider.js

@@ -2,13 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Global } from '@emotion/react';
 import styles from '../styles';
+import { generateUtilitiesCss } from '../styles/utilities';
+import { BreakpointsProvider } from './breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultBreakpoints = {
+  tablet: 1169,
+  mobile: 767
+};
 export function GrainProvider(_ref) {
-  var children = _ref.children;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Global, {
-    styles: styles
+  var children = _ref.children,
+      _ref$breakpoints = _ref.breakpoints,
+      breakpoints = _ref$breakpoints === void 0 ? defaultBreakpoints : _ref$breakpoints;
+  var utilityStyles = generateUtilitiesCss({
+    breakpoints: breakpoints
+  });
+  return ___EmotionJSX(BreakpointsProvider, {
+    breakpoints: breakpoints
+  }, ___EmotionJSX(Global, {
+    styles: [styles, utilityStyles, process.env.NODE_ENV === "production" ? "" : ";label:GrainProvider;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3Byb3ZpZGVyLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJvdmlkZXIuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyBnZW5lcmF0ZVV0aWxpdGllc0NzcyB9IGZyb20gJy4uL3N0eWxlcy91dGlsaXRpZXMnO1xuaW1wb3J0IHsgQnJlYWtwb2ludHNQcm92aWRlciB9IGZyb20gJy4vYnJlYWtwb2ludHMtcHJvdmlkZXInO1xuXG5jb25zdCBkZWZhdWx0QnJlYWtwb2ludHMgPSB7XG4gIHRhYmxldDogMTE2OSxcbiAgbW9iaWxlOiA3NjcsXG59O1xuXG5leHBvcnQgZnVuY3Rpb24gR3JhaW5Qcm92aWRlcih7IGNoaWxkcmVuLCBicmVha3BvaW50cyA9IGRlZmF1bHRCcmVha3BvaW50cyB9KSB7XG4gIGNvbnN0IHV0aWxpdHlTdHlsZXMgPSBnZW5lcmF0ZVV0aWxpdGllc0Nzcyh7IGJyZWFrcG9pbnRzIH0pO1xuICByZXR1cm4gKFxuICAgIDxCcmVha3BvaW50c1Byb3ZpZGVyIGJyZWFrcG9pbnRzPXticmVha3BvaW50c30+XG4gICAgICA8R2xvYmFsIHN0eWxlcz17W3N0eWxlcywgdXRpbGl0eVN0eWxlc119IC8+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9CcmVha3BvaW50c1Byb3ZpZGVyPlxuICApO1xufVxuXG5HcmFpblByb3ZpZGVyLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLmlzUmVxdWlyZWQsXG4gIGJyZWFrcG9pbnRzOiBQcm9wVHlwZXMub2JqZWN0LFxufTtcbiJdfQ== */"]
   }), children);
 }
 GrainProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  breakpoints: PropTypes.object
 };

package/es/components/text/index.js

@@ -29,9 +29,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import { generateAttributes } from '../../utilities';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { types } from '../../types';
 import styles from './styles.module.css';
+import { BreakpointsContext } from '../breakpoints-provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -65,6 +66,7 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var propClassName = className ? className : '';
   var propStyle = style ? style : {};
+  var breakpoints = useContext(BreakpointsContext);
   var attributes = generateAttributes({
     styleProps: {
       size: size,
@@ -79,7 +81,8 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
       weight: weight,
       display: !ellipsisLines ? display : undefined,
       textTransform: textTransform
-    }
+    },
+    breakpoints: breakpoints
   });
 
   var styleAttributes = _objectSpread(_objectSpread(_objectSpread({}, attributes.styles), propStyle), ellipsisLines && _defineProperty({}, '--el', ellipsisLines));

package/es/styles/index.js

@@ -2,5 +2,4 @@ import variables from './variables';
 import colors from './colors';
 import shadows from './shadows';
 import base from './base';
-import utilities from './utilities';
-export default [variables, colors, shadows, base, utilities].join('\n');
+export default [variables, colors, shadows, base].join('\n');

package/es/styles/utilities.js

@@ -27,7 +27,6 @@ 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 = '';
@@ -47,7 +46,7 @@ var generateUtilityClassDeclarations = function generateUtilityClassDeclarations
   return css;
 };
 
-var generateStyleClassDeclarations = function generateStyleClassDeclarations(propertySets) {
+var generateStyleClassDeclarations = function generateStyleClassDeclarations(breakpoints, propertySets) {
   var css = '';
   propertySets.forEach(function (set) {
     set.props.forEach(function (prop) {
@@ -60,14 +59,14 @@ var generateStyleClassDeclarations = function generateStyleClassDeclarations(pro
       if (hasHover) css += "[style*=\"".concat(cssVar, ":\"]:hover ").concat(declaration);
 
       if (set.isResponsive) {
-        var device = deviceShort.default;
+        var device = '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),
               deviceName = _ref2[0],
               screenSize = _ref2[1];
 
-          var device = deviceShort[deviceName];
+          var device = deviceName;
           css += "\n            @media (max-width: ".concat(screenSize, "px) {\n              [style*=\"").concat(cssVar, "-").concat(device, "\"] {").concat(property, ": var(").concat(cssVar, "-").concat(device, ")}\n            }\n          ");
         });
       }
@@ -110,5 +109,9 @@ var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radius
 var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps]);
 var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps, gridTemplateProps]);
 var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
-var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
-export default utilities;
+export var generateUtilitiesCss = function generateUtilitiesCss(_ref3) {
+  var breakpoints = _ref3.breakpoints;
+  var classDeclarations = generateUtilityClassDeclarations(classDeclarationProps);
+  var styleDeclarations = generateStyleClassDeclarations(breakpoints, styleDeclarationProps);
+  return "\n    ".concat(defaultBorder, "\n    ").concat(classDeclarations, "\n    ").concat(styleDeclarations, "\n  ");
+};

package/es/utilities/attributes.js

@@ -1,29 +1,45 @@
-import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.values.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.map.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.string.trim.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)")
+
+var getValueWithBackup = function getValueWithBackup(value) {
+  var mediaQueries = {
+    '@media (max-width: 1169px)': 'tablet',
+    '@media (max-width: 767px)': 'mobile'
+  };
+  var valueWithBackup = Object.keys(value).reduce(function (acc, key) {
+    if (mediaQueries[key]) {
+      acc[mediaQueries[key]] = value[key];
+    } else {
+      acc[key] = value[key];
+    }
+
+    return acc;
+  }, {});
+  return valueWithBackup;
 };
-export var generateStyleAttributes = function generateStyleAttributes(props) {
+
+export var generateStyleAttributes = function generateStyleAttributes(_ref) {
+  var styleProps = _ref.styleProps,
+      breakpoints = _ref.breakpoints;
   var styles = {};
   var styleConfigValues = Object.values(styleConfig);
   styleConfigValues.forEach(function (propsSet) {
     var variableChecker = propsSet.variableChecker,
         valueTransformer = propsSet.valueTransformer;
-    propsSet.props.forEach(function (_ref) {
-      var propName = _ref.propName;
-      var value = props[propName];
+    propsSet.props.forEach(function (_ref2) {
+      var propName = _ref2.propName;
+      var value = styleProps[propName];
       if (value === undefined || value === null) return;
       var hasVariable = variableChecker && variableChecker(value);
       if (hasVariable) return;
@@ -37,18 +53,12 @@ export var generateStyleAttributes = function generateStyleAttributes(props) {
       if (!isObject(value)) {
         styles["--".concat(propNameShort)] = processValue(value);
       } else {
-        var def = value.default,
-            mobile = value.mobile,
-            tablet = value.tablet; // accept fixed string media queries to help migration
-
-        var mobileMediaValue = value[mediaQueries.mobile];
-        var tabletMediaValue = value[mediaQueries.tablet]; // check undefined to allow 0 value
-
-        var mob = mobileMediaValue !== undefined ? mobileMediaValue : mobile;
-        var tab = tabletMediaValue !== undefined ? tabletMediaValue : tablet;
-        styles["--".concat(propNameShort, "-").concat(deviceShort.default)] = processValue(def);
-        styles["--".concat(propNameShort, "-").concat(deviceShort.mobile)] = processValue(mob);
-        styles["--".concat(propNameShort, "-").concat(deviceShort.tablet)] = processValue(tab);
+        // // accept fixed string media queries to help migration
+        var valueWithBackup = getValueWithBackup(value);
+        styles["--".concat(propNameShort, "-default")] = processValue(value.default);
+        Object.keys(breakpoints).forEach(function (deviceName) {
+          styles["--".concat(propNameShort, "-").concat(deviceName)] = processValue(valueWithBackup[deviceName]);
+        });
       }
     });
   });
@@ -75,10 +85,14 @@ export var generateClassNameAttributes = function generateClassNameAttributes(pr
   });
   return classNames.join(' ').trim();
 };
-export var generateAttributes = function generateAttributes(_ref2) {
-  var styleProps = _ref2.styleProps,
-      classNameProps = _ref2.classNameProps;
-  var styleAttributes = generateStyleAttributes(styleProps);
+export var generateAttributes = function generateAttributes(_ref3) {
+  var styleProps = _ref3.styleProps,
+      classNameProps = _ref3.classNameProps,
+      breakpoints = _ref3.breakpoints;
+  var styleAttributes = generateStyleAttributes({
+    styleProps: styleProps,
+    breakpoints: breakpoints
+  });
   var classNameAttributes = generateClassNameAttributes(classNameProps);
   return {
     styles: styleAttributes,

package/es/variables/breakpoints.js

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

package/package.json

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

package/es/components/nav.js

@@ -1,88 +0,0 @@
-import _styled from "@emotion/styled/base";
-var _excluded = ["children", "isActive"],
-    _excluded2 = ["children", "direction", "justifyContent", "size"];
-
-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); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.object.assign.js";
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { getColor, getResponsiveOneOf, getResponsiveTextSize, getSpace, getTransition, getWeight } from '../utilities';
-import { types } from '../types';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var directionStyles = {
-  row: "\n    flex-direction: row;\n    align-items: baseline;\n    column-gap: ".concat(getSpace('m'), ";\n\n    .NavItem {\n      font-weight: ").concat(getWeight('medium'), ";\n    }\n  "),
-  column: "\n    flex-direction: column;\n    align-items: start;\n  "
-};
-
-var NavRoot = /*#__PURE__*/_styled("nav", process.env.NODE_ENV === "production" ? {
-  target: "esn928h1"
-} : {
-  target: "esn928h1",
-  label: "NavRoot"
-})("display:flex;flex-wrap:wrap;row-gap:", getSpace('s'), ";", function (_ref) {
-  var direction = _ref.direction;
-  return directionStyles[direction];
-}, ";", function (_ref2) {
-  var size = _ref2.size;
-  return getResponsiveTextSize(size);
-}, ";", function (_ref3) {
-  var justifyContent = _ref3.justifyContent;
-  return getResponsiveOneOf('justify-content', justifyContent);
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkIwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZ2V0Q29sb3IsXG4gIGdldFJlc3BvbnNpdmVPbmVPZixcbiAgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgZ2V0V2VpZ2h0LFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnbScpfTtcblxuICAgIC5OYXZJdGVtIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICAgIH1cbiAgYCxcbiAgY29sdW1uOiBgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gIGAsXG59O1xuXG5jb25zdCBOYXZSb290ID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICByb3ctZ2FwOiAke2dldFNwYWNlKCdzJyl9O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG4gICR7KHsgc2l6ZSB9KSA9PiBnZXRSZXNwb25zaXZlVGV4dFNpemUoc2l6ZSl9O1xuICAkeyh7IGp1c3RpZnlDb250ZW50IH0pID0+IGdldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyBpc0FjdGl2ZSB9KSA9PiBnZXRDb2xvcihpc0FjdGl2ZSA/ICdjb250ZW50JyA6ICdjb250ZW50MicpfTtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgaXNBY3RpdmUgfSkgPT4gZ2V0V2VpZ2h0KGlzQWN0aXZlID8gJ21lZGl1bScgOiAnbm9ybWFsJyl9O1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8TmF2SXRlbVJvb3QgcmVmPXtyZWZ9IGlzQWN0aXZlPXtpc0FjdGl2ZX0gY2xhc3NOYW1lPVwiTmF2SXRlbVwiIHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKSk7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycsIGp1c3RpZnlDb250ZW50LCBzaXplLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPE5hdlJvb3RcbiAgICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXtqdXN0aWZ5Q29udGVudH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZSb290PlxuICAgICk7XG4gIH0sXG4pO1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG4gIGp1c3RpZnlDb250ZW50OiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoW1xuICAgICAgJ3N0YXJ0JyxcbiAgICAgICdlbmQnLFxuICAgICAgJ2NlbnRlcicsXG4gICAgICAnc3RyZXRjaCcsXG4gICAgICAnc3BhY2UtYXJvdW5kJyxcbiAgICAgICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgICdzcGFjZS1ldmVubHknLFxuICAgIF0pLFxuICAgIFByb3BUeXBlcy5vYmplY3QsXG4gIF0pLFxufTtcbiJdfQ== */"));
-
-var NavItemRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "esn928h0"
-} : {
-  target: "esn928h0",
-  label: "NavItemRoot"
-})("cursor:pointer;color:", function (_ref4) {
-  var isActive = _ref4.isActive;
-  return getColor(isActive ? 'content' : 'content2');
-}, ";font-weight:", function (_ref5) {
-  var isActive = _ref5.isActive;
-  return getWeight(isActive ? 'medium' : 'normal');
-}, ";transition:color ", getTransition('leave'), ";&:hover{color:", getColor('content'), ";transition:color ", getTransition('hover'), ";}a{color:inherit;text-decoration:none;display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL25hdi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0M4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9uYXYuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgZ2V0Q29sb3IsXG4gIGdldFJlc3BvbnNpdmVPbmVPZixcbiAgZ2V0UmVzcG9uc2l2ZVRleHRTaXplLFxuICBnZXRTcGFjZSxcbiAgZ2V0VHJhbnNpdGlvbixcbiAgZ2V0V2VpZ2h0LFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGRpcmVjdGlvblN0eWxlcyA9IHtcbiAgcm93OiBgXG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnbScpfTtcblxuICAgIC5OYXZJdGVtIHtcbiAgICAgIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICAgIH1cbiAgYCxcbiAgY29sdW1uOiBgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogc3RhcnQ7XG4gIGAsXG59O1xuXG5jb25zdCBOYXZSb290ID0gc3R5bGVkLm5hdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICByb3ctZ2FwOiAke2dldFNwYWNlKCdzJyl9O1xuICAkeyh7IGRpcmVjdGlvbiB9KSA9PiBkaXJlY3Rpb25TdHlsZXNbZGlyZWN0aW9uXX07XG4gICR7KHsgc2l6ZSB9KSA9PiBnZXRSZXNwb25zaXZlVGV4dFNpemUoc2l6ZSl9O1xuICAkeyh7IGp1c3RpZnlDb250ZW50IH0pID0+IGdldFJlc3BvbnNpdmVPbmVPZignanVzdGlmeS1jb250ZW50JywganVzdGlmeUNvbnRlbnQpfTtcbmA7XG5cbmNvbnN0IE5hdkl0ZW1Sb290ID0gc3R5bGVkLmRpdmBcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyBpc0FjdGl2ZSB9KSA9PiBnZXRDb2xvcihpc0FjdGl2ZSA/ICdjb250ZW50JyA6ICdjb250ZW50MicpfTtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgaXNBY3RpdmUgfSkgPT4gZ2V0V2VpZ2h0KGlzQWN0aXZlID8gJ21lZGl1bScgOiAnbm9ybWFsJyl9O1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICBhIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBOYXZJdGVtID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8TmF2SXRlbVJvb3QgcmVmPXtyZWZ9IGlzQWN0aXZlPXtpc0FjdGl2ZX0gY2xhc3NOYW1lPVwiTmF2SXRlbVwiIHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L05hdkl0ZW1Sb290PlxuKSk7XG5cbmV4cG9ydCBjb25zdCBOYXYgPSBmb3J3YXJkUmVmKFxuICAoeyBjaGlsZHJlbiwgZGlyZWN0aW9uID0gJ3JvdycsIGp1c3RpZnlDb250ZW50LCBzaXplLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPE5hdlJvb3RcbiAgICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGp1c3RpZnlDb250ZW50PXtqdXN0aWZ5Q29udGVudH1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZSb290PlxuICAgICk7XG4gIH0sXG4pO1xuXG5OYXZJdGVtLnByb3BUeXBlcyA9IHtcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxufTtcblxuTmF2LnByb3BUeXBlcyA9IHtcbiAgZGlyZWN0aW9uOiBQcm9wVHlwZXMub25lT2YoWydyb3cnLCAnY29sdW1uJ10pLFxuICBzaXplOiB0eXBlcy5yZXNwb25zaXZlVGV4dFNpemUsXG4gIGp1c3RpZnlDb250ZW50OiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoW1xuICAgICAgJ3N0YXJ0JyxcbiAgICAgICdlbmQnLFxuICAgICAgJ2NlbnRlcicsXG4gICAgICAnc3RyZXRjaCcsXG4gICAgICAnc3BhY2UtYXJvdW5kJyxcbiAgICAgICdzcGFjZS1iZXR3ZWVuJyxcbiAgICAgICdzcGFjZS1ldmVubHknLFxuICAgIF0pLFxuICAgIFByb3BUeXBlcy5vYmplY3QsXG4gIF0pLFxufTtcbiJdfQ== */"));
-
-export var NavItem = /*#__PURE__*/forwardRef(function (_ref6, ref) {
-  var children = _ref6.children,
-      isActive = _ref6.isActive,
-      props = _objectWithoutProperties(_ref6, _excluded);
-
-  return ___EmotionJSX(NavItemRoot, _extends({
-    ref: ref,
-    isActive: isActive,
-    className: "NavItem"
-  }, props), children);
-});
-export var Nav = /*#__PURE__*/forwardRef(function (_ref7, ref) {
-  var children = _ref7.children,
-      _ref7$direction = _ref7.direction,
-      direction = _ref7$direction === void 0 ? 'row' : _ref7$direction,
-      justifyContent = _ref7.justifyContent,
-      size = _ref7.size,
-      props = _objectWithoutProperties(_ref7, _excluded2);
-
-  return ___EmotionJSX(NavRoot, _extends({
-    direction: direction,
-    size: size,
-    justifyContent: justifyContent,
-    ref: ref
-  }, props), children);
-});
-NavItem.propTypes = {
-  isActive: PropTypes.bool
-};
-Nav.propTypes = {
-  direction: PropTypes.oneOf(['row', 'column']),
-  size: types.responsiveTextSize,
-  justifyContent: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly']), PropTypes.object])
-};