@flodesk/grain 5.3.1 → 5.4.1

package/es/components/arrange.js

@@ -68,13 +68,13 @@ export var Arrange = function Arrange(_ref) {
   }, props), children);
 };
 Arrange.propTypes = {
-  gap: types.space,
-  columns: types.columns,
+  gap: types.responsiveSpace,
+  columns: types.responsiveColumns,
   autoFlow: types.autoFlow,
   alignItems: types.gridItemsAlignment,
   justifyItems: types.gridItemsAlignment,
   justifyContent: types.gridContentPosition,
   alignContent: types.gridContentPosition,
-  width: types.dimension,
-  height: types.dimension
+  width: types.responsiveDimension,
+  height: types.responsiveDimension
 };

package/es/components/box.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.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";
-var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio"];
+var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex"];
 
 var _templateObject;
 
@@ -21,7 +21,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { types } from '../types';
 import PropTypes from 'prop-types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n  ", ";\n"])), function (p) {
   return getBorder(p.borderSide, p.borderWidth, p.borderColor);
 }, function (p) {
   return getResponsiveSpace('padding', p.padding);
@@ -77,6 +77,8 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return p.overflow;
 }, function (p) {
   return p.aspectRatio;
+}, function (p) {
+  return p.zIndex && "z-index: ".concat(p.zIndex);
 });
 export var Box = function Box(_ref) {
   var children = _ref.children,
@@ -116,6 +118,7 @@ export var Box = function Box(_ref) {
       shadow = _ref.shadow,
       overflow = _ref.overflow,
       aspectRatio = _ref.aspectRatio,
+      zIndex = _ref.zIndex,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
@@ -148,7 +151,8 @@ export var Box = function Box(_ref) {
     right: right,
     shadow: shadow,
     overflow: overflow,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    zIndex: zIndex
   }, props), children);
 };
 Box.propTypes = {
@@ -157,33 +161,34 @@ Box.propTypes = {
   borderSide: types.side,
   borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   borderColor: types.color,
-  width: types.dimension,
-  minWidth: types.dimension,
-  maxWidth: types.dimension,
-  height: types.dimension,
-  minHeight: types.dimension,
-  maxHeight: types.dimension,
+  width: types.responsiveDimension,
+  minWidth: types.responsiveDimension,
+  maxWidth: types.responsiveDimension,
+  height: types.responsiveDimension,
+  minHeight: types.responsiveDimension,
+  maxHeight: types.responsiveDimension,
   radius: types.radius,
   shadow: types.shadow,
-  padding: types.space,
-  paddingTop: types.space,
-  paddingBottom: types.space,
-  paddingLeft: types.space,
-  paddingRight: types.space,
-  paddingX: types.space,
-  paddingY: types.space,
-  margin: types.space,
-  marginTop: types.space,
-  marginBottom: types.space,
-  marginLeft: types.space,
-  marginRight: types.space,
-  marginX: types.space,
-  marginY: types.space,
+  padding: types.responsiveSpace,
+  paddingTop: types.responsiveSpace,
+  paddingBottom: types.responsiveSpace,
+  paddingLeft: types.responsiveSpace,
+  paddingRight: types.responsiveSpace,
+  paddingX: types.responsiveSpace,
+  paddingY: types.responsiveSpace,
+  margin: types.responsiveSpace,
+  marginTop: types.responsiveSpace,
+  marginBottom: types.responsiveSpace,
+  marginLeft: types.responsiveSpace,
+  marginRight: types.responsiveSpace,
+  marginX: types.responsiveSpace,
+  marginY: types.responsiveSpace,
   position: types.position,
-  top: types.space,
-  bottom: types.space,
-  left: types.space,
-  right: types.space,
+  top: types.responsiveSpace,
+  bottom: types.responsiveSpace,
+  left: types.responsiveSpace,
+  right: types.responsiveSpace,
   overflow: types.overflow,
-  aspectRatio: PropTypes.string
+  aspectRatio: PropTypes.string,
+  zIndex: types.zIndex
 };

package/es/components/stack.js

@@ -35,5 +35,5 @@ export var Stack = function Stack(_ref) {
 };
 Stack.propTypes = {
   children: PropTypes.node,
-  gap: types.space
+  gap: types.responsiveSpace
 };

package/es/components/text.js

@@ -61,7 +61,7 @@ export var Text = function Text(_ref) {
   }, props), children);
 };
 Text.propTypes = {
-  size: types.textSize,
+  size: types.responsiveTextSize,
   weight: types.weight,
   color: types.color,
   align: types.textAlign,

package/es/icons/icon-phone.js

@@ -9,7 +9,7 @@ var IconPhone = function IconPhone(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h12v20H2V6zm6 18a1 1 0 100-2 1 1 0 000 2z",
+    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h12v20H2V6zm6 18.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
     fill: "currentColor"
   }));
 };

package/es/styles/variables.css

@@ -5,7 +5,7 @@
 :root {
   --grn-text-s: 12px;
   --grn-text-m: 14px;
-  --grn-text-l: 20px;
+  --grn-text-l: 18px;
   --grn-text-xl: 24px;
   --grn-text-xxl: 30px;
 }
@@ -96,16 +96,16 @@
     0 2px 8px hsl(0 0% 0% / 2%),
     0 4px 16px hsl(0 0% 0% / 2%)
   ;
-  
+
   --grn-shadow-m:
-    var(--grn-shadow-s), 
+    var(--grn-shadow-s),
     0 8px 32px hsl(0 0% 0% / 4%)
   ;
-  
+
   --grn-shadow-l:
     var(--grn-shadow-m),
     0 16px 64px hsl(0 0% 0% / 4%),
     0 32px 128px hsl(0 0% 0% / 5%),
     0 64px 128px -32px hsl(0 0% 0% / 5%)
   ;
-}
+}

package/es/types.js

@@ -6,20 +6,21 @@ export var gridItemsAlignments = ['start', 'end', 'center', 'stretch'];
 export var autoFlows = ['column', 'row'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
-  space: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
-  dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
+  responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
+  dimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  responsiveDimension: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]),
   side: PropTypes.oneOf(['all', 'left', 'right', 'top', 'bottom', 'x', 'y']),
   radius: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.radii)), PropTypes.string, PropTypes.number]),
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(['static', 'relative', 'fixed', 'absolute', 'sticky']),
-  textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
+  responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
   textAlign: PropTypes.oneOf(['left', 'center', 'right']),
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']),
-  columns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOf(autoFlows),
   gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),
   gridContentPosition: PropTypes.oneOf(gridContentPositions),

package/package.json

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