@flodesk/grain 11.0.3 → 11.0.5

package/es/components/stack.js

@@ -0,0 +1,43 @@
+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 _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 { 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" ? {
+  target: "e17bgatr0"
+} : {
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N0YWNrLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3RhY2suanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuXG5jb25zdCBSb290ID0gc3R5bGVkKEJveClgXG4gICYgPiAqICsgKiB7XG4gICAgJHtwID0+IGdldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLXRvcCcsIHAuZ2FwKX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdGFjayA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGdhcCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxSb290IHJlZj17cmVmfSBnYXA9e2dhcH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvUm9vdD5cbikpO1xuXG5TdGFjay5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgZ2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG59O1xuIl19 */"));
+
+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.3",
+  "version": "11.0.5",
   "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 > * + * {
-  margin-top: var(--stackGap);
-}