@flodesk/grain 11.0.0-next.5 → 11.0.0-next.7

package/es/components/arrange/index.js

@@ -58,20 +58,19 @@ export var Arrange = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
-    rowGap: rowGap
+    rowGap: rowGap,
+    alignItems: alignItems,
+    justifyItems: justifyItems,
+    justifyContent: justifyContent,
+    alignContent: alignContent,
+    autoFlow: !columns ? autoFlow : undefined
   };
   var attributes = generateAttributes({
     styleProps: _objectSpread({
       columns: columns,
       rows: rows
     }, sharedProps),
-    classNameProps: _objectSpread({
-      alignItems: alignItems,
-      justifyItems: justifyItems,
-      justifyContent: justifyContent,
-      alignContent: alignContent,
-      autoFlow: !columns ? autoFlow : undefined
-    }, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps)
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/components/box.js

@@ -122,7 +122,8 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     borderColor: borderColor,
     borderColorHover: borderColorHover,
     transition: transition,
-    transitionHover: transitionHover
+    transitionHover: transitionHover,
+    alignSelf: alignSelf
   };
   var attributes = generateAttributes({
     styleProps: _objectSpread({
@@ -141,7 +142,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, sharedProps),
     classNameProps: _objectSpread((_objectSpread2 = {
       position: position
-    }, _defineProperty(_objectSpread2, "position", position), _defineProperty(_objectSpread2, "overflow", overflow), _defineProperty(_objectSpread2, "cursor", cursor), _defineProperty(_objectSpread2, "alignSelf", alignSelf), _defineProperty(_objectSpread2, "borderWidth", borderWidth), _defineProperty(_objectSpread2, "borderSide", borderSide), _objectSpread2), sharedProps)
+    }, _defineProperty(_objectSpread2, "position", position), _defineProperty(_objectSpread2, "overflow", overflow), _defineProperty(_objectSpread2, "cursor", cursor), _defineProperty(_objectSpread2, "borderWidth", borderWidth), _defineProperty(_objectSpread2, "borderSide", borderSide), _objectSpread2), sharedProps)
   });
   var classAttributes = "".concat(attributes.classNames, " ").concat(propClassName).trim();
 

package/es/components/flex/index.js

@@ -58,17 +58,16 @@ export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var sharedProps = {
     gap: gap,
     columnGap: columnGap,
-    rowGap: rowGap
+    rowGap: rowGap,
+    wrap: wrap,
+    justifyContent: justifyContent,
+    alignItems: alignItems,
+    alignContent: alignContent,
+    direction: direction
   };
   var attributes = generateAttributes({
     styleProps: _objectSpread({}, sharedProps),
-    classNameProps: _objectSpread({
-      justifyContent: justifyContent,
-      alignItems: alignItems,
-      alignContent: alignContent,
-      wrap: wrap,
-      direction: direction
-    }, sharedProps)
+    classNameProps: _objectSpread({}, sharedProps)
   });
 
   var styleAttributes = _objectSpread(_objectSpread({}, attributes.styles), propStyle);

package/es/styles/utilities.js

@@ -106,8 +106,8 @@ var spaceProps = styleConfig.spaceProps,
     contentPositionProps = styleConfig.contentPositionProps,
     flexDirectionProps = styleConfig.flexDirectionProps,
     flexWrapProps = styleConfig.flexWrapProps;
-var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps];
-var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps, autoFlowProps, itemAlignmentProps, contentPositionProps, flexDirectionProps, flexWrapProps]);
+var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps, flexWrapProps, autoFlowProps, itemAlignmentProps, contentPositionProps, flexDirectionProps, alignSelfProps];
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, 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");

package/es/utilities/style-config.js

@@ -344,7 +344,8 @@ export var styleConfig = {
     variables: alignSelfs,
     variableChecker: function variableChecker(value) {
       return alignSelfs.includes(value);
-    }
+    },
+    isResponsive: true
   },
   borderColorProps: {
     props: [{
@@ -449,7 +450,8 @@ export var styleConfig = {
     variables: autoFlows,
     variableChecker: function variableChecker(value) {
       return autoFlows.includes(value);
-    }
+    },
+    isResponsive: true
   },
   gridTemplateProps: {
     props: [{
@@ -460,7 +462,8 @@ export var styleConfig = {
       propName: 'rows',
       property: 'grid-template-rows',
       short: 'gtr'
-    }]
+    }],
+    isResponsive: true
   },
   itemAlignmentProps: {
     props: [{
@@ -475,7 +478,8 @@ export var styleConfig = {
     variables: axisAlignments,
     variableChecker: function variableChecker(value) {
       return axisAlignments.includes(value);
-    }
+    },
+    isResponsive: true
   },
   contentPositionProps: {
     props: [{
@@ -490,11 +494,12 @@ export var styleConfig = {
     variables: contentPositions,
     variableChecker: function variableChecker(value) {
       return contentPositions.includes(value);
-    }
+    },
+    isResponsive: true
   },
   flexDirectionProps: {
     props: [{
-      propName: 'flexDirection',
+      propName: 'direction',
       property: 'flex-direction',
       short: 'fd'
     }],
@@ -512,7 +517,8 @@ export var styleConfig = {
     variables: flexWraps,
     variableChecker: function variableChecker(value) {
       return flexWraps.includes(value);
-    }
+    },
+    isResponsive: true
   }
 };
 export var propNameToShort = function propNameToShort(propName) {

package/package.json

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