@flodesk/grain 11.0.4 → 11.0.6

package/es/components/box.js

@@ -32,8 +32,6 @@ import PropTypes from 'prop-types';
 import { generateAttributes } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _objectSpread2;
-
   var color = _ref.color,
       colorHover = _ref.colorHover,
       backgroundColor = _ref.backgroundColor,
@@ -140,9 +138,15 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       opacity: opacity,
       opacityHover: opacityHover
     }, sharedProps),
-    classNameProps: _objectSpread((_objectSpread2 = {
-      position: position
-    }, _defineProperty(_objectSpread2, "position", position), _defineProperty(_objectSpread2, "overflow", overflow), _defineProperty(_objectSpread2, "cursor", cursor), _defineProperty(_objectSpread2, "borderWidth", borderWidth), _defineProperty(_objectSpread2, "borderSide", borderSide), _objectSpread2), sharedProps)
+    classNameProps: _objectSpread({
+      position: position,
+      cursor: cursor,
+      borderWidth: borderWidth,
+      borderSide: borderSide,
+      overflow: overflow,
+      overflowX: overflowX,
+      overflowY: overflowY
+    }, sharedProps)
   });
   var classAttributes = "".concat(attributes.classNames, " ").concat(propClassName).trim();
 

package/es/components/stack.js

@@ -0,0 +1,50 @@
+import _styled from "@emotion/styled/base";
+var _excluded = ["children", "gap"];
+
+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.includes.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 { getResponsiveSpace } from '../utilities';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { types } from '../types';
+import { Box } from './box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Root = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['gap'].includes(prop);
+  },
+  target: "e17bgatr0"
+} : {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['gap'].includes(prop);
+  },
+  target: "e17bgatr0",
+  label: "Root"
+})("&>*+*{", function (p) {
+  return getResponsiveSpace('margin-top', p.gap);
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0YiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuXG5jb25zdCBSb290ID0gc3R5bGVkKEJveCwgeyBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhWydnYXAnXS5pbmNsdWRlcyhwcm9wKSB9KWBcbiAgJiA+ICogKyAqIHtcbiAgICAke3AgPT4gZ2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgcC5nYXApfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0YWNrID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgZ2FwLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFJvb3QgcmVmPXtyZWZ9IGdhcD17Z2FwfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9Sb290PlxuKSk7XG5cblN0YWNrLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBnYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbn07XG4iXX0= */"));
+
+export var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      gap = _ref.gap,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Root, _extends({
+    ref: ref,
+    gap: gap
+  }, props), children);
+});
+Stack.propTypes = {
+  children: PropTypes.node,
+  gap: types.responsiveSpace
+};

package/es/utilities/responsive.js

@@ -24,7 +24,11 @@ import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.regexp.exec.js";
 import { getCssVar, isNumber, isString, u, isObject } from '.';
-import { vars, varInfo } from '../variables';
+import { vars, varInfo, breakpoints } from '../variables';
+var mediaQueries = {
+  mobile: "@media (max-width: ".concat(breakpoints.mobile, "px)"),
+  tablet: "@media (max-width: ".concat(breakpoints.tablet, "px)")
+};
 export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
   var getValue = function getValue(val) {
     if (val === 0) return '0';
@@ -36,7 +40,11 @@ export var getMediaCss = function getMediaCss(mediaQuery, property, value) {
     return "".concat(property, ": ").concat(getValue(value), ";");
   }
 
-  return "\n    ".concat(mediaQuery, " {\n      ").concat(property, ": ").concat(getValue(value), ";\n    }\n  ");
+  if (mediaQuery in mediaQueries) {
+    return "\n      ".concat(mediaQueries[mediaQuery], " {\n        ").concat(property, ": ").concat(getValue(value), ";\n      }\n    ");
+  } else {
+    return "\n      ".concat(mediaQuery, " {\n        ").concat(property, ": ").concat(getValue(value), ";\n      }\n    ");
+  }
 };
 export var mapObjToMedia = function mapObjToMedia(property, obj, type) {
   var checkValueInVars = function checkValueInVars(value) {

package/es/utilities/style-config.js

@@ -120,10 +120,6 @@ export var styleConfig = {
       propName: 'columnGap',
       property: 'column-gap',
       short: 'cg'
-    }, {
-      propName: 'stackGap',
-      property: '--stackGap',
-      short: 'sg'
     }],
     valueTransformer: getSpace,
     variableChecker: isSpaceVar,

package/package.json

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

package/es/components/stack/index.js

@@ -1,68 +0,0 @@
-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", "gap", "style", "className"];
-
-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.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.string.trim.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 PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import { types } from '../../types';
-import { Box } from '../box';
-import { generateAttributes } from '../../utilities';
-import styles from './styles.module.css';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      stackGap = _ref.gap,
-      style = _ref.style,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var propClassName = className ? className : '';
-  var propStyle = style ? style : {};
-  var attributes = generateAttributes({
-    styleProps: {
-      stackGap: stackGap
-    },
-    classNameProps: {
-      stackGap: stackGap
-    }
-  });
-
-  var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);
-
-  var classAttributes = "".concat(propClassName, " ").concat(attributes.classNames, " ").concat(styles.stack).trim().replace(/\s+/g, ' ');
-  return ___EmotionJSX(Box, _extends({
-    ref: ref,
-    style: styleAttributes,
-    className: classAttributes
-  }, props), children);
-});
-Stack.propTypes = {
-  children: PropTypes.node,
-  gap: types.responsiveSpace
-};

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

@@ -1,3 +0,0 @@
-.stack > *:not(:last-child) {
-  margin-bottom: var(--stackGap);
-}