@flodesk/grain 5.3.0 → 5.4.0

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/tab.js

@@ -22,7 +22,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import { types } from '../types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: var(--grn-space-m);\n  width: fit-content;\n  align-items: stretch;\n  height: ", ";\n"])), function (p) {
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: var(--grn-space-l);\n  width: fit-content;\n  align-items: stretch;\n  height: ", ";\n"])), function (p) {
   return getDimension(p.height);
 });
 var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: 100%;\n  background-color: transparent;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 0;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {

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/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.0",
+  "version": "5.4.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",