baseui 10.0.0 → 10.3.0

package/input/input.js.flow

@@ -93,7 +93,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
         $adjoined={getAdjoinedProp(startEnhancer, endEnhancer)}
         $hasIconTrailing={this.props.clearable || this.props.type == 'password'}
       >
-        {startEnhancer && (
+        {isEnhancer(startEnhancer) && (
           <StartEnhancer
             {...sharedProps}
             {...startEnhancerProps}
@@ -111,7 +111,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
           onFocus={this.onFocus}
           onBlur={this.onBlur}
         />
-        {endEnhancer && (
+        {isEnhancer(endEnhancer) && (
           <EndEnhancer
             {...sharedProps}
             {...endEnhancerProps}
@@ -128,16 +128,20 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
 }
 
 function getAdjoinedProp(startEnhancer, endEnhancer): AdjoinedT {
-  if (startEnhancer && endEnhancer) {
+  if (isEnhancer(startEnhancer) && isEnhancer(endEnhancer)) {
     return ADJOINED.both;
-  } else if (startEnhancer) {
+  } else if (isEnhancer(startEnhancer)) {
     return ADJOINED.left;
-  } else if (endEnhancer) {
+  } else if (isEnhancer(endEnhancer)) {
     return ADJOINED.right;
   }
   return ADJOINED.none;
 }
 
+function isEnhancer(enhancer): boolean {
+  return Boolean(enhancer || enhancer === 0);
+}
+
 export default Input;
 
 declare var __DEV__: boolean;

package/layer/layer.js

@@ -96,7 +96,11 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.context.addEscapeHandler(this.onEscape);
-      this.context.addDocClickHandler(this.onDocumentClick);
+
+      if (!this.props.isHoverLayer) {
+        this.context.addDocClickHandler(this.onDocumentClick);
+      }
+
       var _this$props = this.props,
           onMount = _this$props.onMount,
           mountNode = _this$props.mountNode,

package/layer/layer.js.flow

@@ -30,7 +30,9 @@ class LayerComponent extends React.Component<
 
   componentDidMount() {
     this.context.addEscapeHandler(this.onEscape);
-    this.context.addDocClickHandler(this.onDocumentClick);
+    if (!this.props.isHoverLayer) {
+      this.context.addDocClickHandler(this.onDocumentClick);
+    }
 
     const {onMount, mountNode, host: layersManagerHost} = this.props;
     if (mountNode) {

package/layer/types.js.flow

@@ -47,6 +47,9 @@ export type LayerPropsT = {
   /** Defines the location (child order) at which the layer will be inserted in
    the `host` element. */
   index?: number,
+  /** Identifies if this layer is a hover layer (and subsequent document clicks
+   should be triggered on the last registered non-hover layer. */
+  isHoverLayer?: boolean,
   /** A custom DOM element where the layer is inserted to as a child.
    Note that the `index` prop does not work with a custom `mountNode`. */
   mountNode?: HTMLElement,
@@ -69,6 +72,7 @@ export type LayerComponentPropsT = {
   children: React.Node,
   host: ?HTMLElement,
   index?: number,
+  isHoverLayer?: boolean,
   mountNode?: HTMLElement,
   onEscape?: () => mixed,
   onDocumentClick?: (event: MouseEvent) => mixed,

package/layout-grid/grid.js

@@ -63,32 +63,42 @@ function Grid(_ref) {
       StyledGrid = _getOverrides2[0],
       overrideProps = _getOverrides2[1];
 
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.GridWrapper, _styledComponents.StyledGridWrapper),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      StyledGridWrapper = _getOverrides4[0],
+      wrapperProps = _getOverrides4[1];
+
   var presetStyleValues = _constants.STYLE_VALUES[gridStyle];
-  var gridStyleValues = presetStyleValues && {
+  var gridStyleValues = presetStyleValues ? {
     $gridGutters: presetStyleValues.gutters,
     $gridMargins: presetStyleValues.margins,
     $gridMaxWidth: presetStyleValues.maxWidth,
     $gridUnit: presetStyleValues.unit
-  };
+  } : {};
   var gridContextStyleValues = presetStyleValues && {
     gridColumns: presetStyleValues.columns,
     gridGaps: presetStyleValues.gaps,
     gridGutters: presetStyleValues.gutters,
     gridUnit: presetStyleValues.unit
   };
-  return /*#__PURE__*/React.createElement(StyledGrid, _extends({
+  return /*#__PURE__*/React.createElement(StyledGridWrapper, _extends({
+    $behavior: behavior,
+    $gridMargins: gridMargins != null ? gridMargins : gridStyleValues.$gridMargins,
+    $gridMaxWidth: gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth,
+    $gridUnit: gridUnit != null ? gridUnit : gridStyleValues.$gridUnit
+  }, wrapperProps), /*#__PURE__*/React.createElement(StyledGrid, _extends({
     $align: align,
     $behavior: behavior,
-    $gridGutters: gridGutters,
-    $gridMargins: gridMargins,
-    $gridMaxWidth: gridMaxWidth,
-    $gridUnit: gridUnit
-  }, gridStyleValues, overrideProps), /*#__PURE__*/React.createElement(GridContext.Provider, {
+    $gridGutters: gridGutters != null ? gridGutters : gridStyleValues.$gridGutters,
+    $gridMargins: gridMargins != null ? gridMargins : gridStyleValues.$gridMargins,
+    $gridMaxWidth: gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth,
+    $gridUnit: gridUnit != null ? gridUnit : gridStyleValues.$gridUnit
+  }, overrideProps), /*#__PURE__*/React.createElement(GridContext.Provider, {
     value: _objectSpread({
       gridColumns: gridColumns,
       gridGaps: gridGaps,
       gridGutters: gridGutters,
       gridUnit: gridUnit
     }, gridContextStyleValues)
-  }, children));
+  }, children)));
 }

package/layout-grid/grid.js.flow

@@ -8,7 +8,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import {getOverrides} from '../helpers/overrides.js';
 import {STYLE, STYLE_VALUES} from './constants.js';
-import {StyledGrid as DefaultStyledGrid} from './styled-components.js';
+import {
+  StyledGrid as DefaultStyledGrid,
+  StyledGridWrapper as DefaultStyledGridWrapper,
+} from './styled-components.js';
 
 import type {GridPropsT, SharedGridPropsT} from './types.js';
 
@@ -33,13 +36,19 @@ export default function Grid({
     overrides.Grid,
     DefaultStyledGrid,
   );
+  const [StyledGridWrapper, wrapperProps] = getOverrides(
+    overrides.GridWrapper,
+    DefaultStyledGridWrapper,
+  );
   const presetStyleValues = STYLE_VALUES[gridStyle];
-  const gridStyleValues = presetStyleValues && {
-    $gridGutters: presetStyleValues.gutters,
-    $gridMargins: presetStyleValues.margins,
-    $gridMaxWidth: presetStyleValues.maxWidth,
-    $gridUnit: presetStyleValues.unit,
-  };
+  const gridStyleValues = presetStyleValues
+    ? {
+        $gridGutters: presetStyleValues.gutters,
+        $gridMargins: presetStyleValues.margins,
+        $gridMaxWidth: presetStyleValues.maxWidth,
+        $gridUnit: presetStyleValues.unit,
+      }
+    : {};
   const gridContextStyleValues = presetStyleValues && {
     gridColumns: presetStyleValues.columns,
     gridGaps: presetStyleValues.gaps,
@@ -48,28 +57,45 @@ export default function Grid({
   };
 
   return (
-    <StyledGrid
-      $align={align}
+    <StyledGridWrapper
       $behavior={behavior}
-      $gridGutters={gridGutters}
-      $gridMargins={gridMargins}
-      $gridMaxWidth={gridMaxWidth}
-      $gridUnit={gridUnit}
-      {...gridStyleValues}
-      {...overrideProps}
+      $gridMargins={
+        gridMargins != null ? gridMargins : gridStyleValues.$gridMargins
+      }
+      $gridMaxWidth={
+        gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth
+      }
+      $gridUnit={gridUnit != null ? gridUnit : gridStyleValues.$gridUnit}
+      {...wrapperProps}
     >
-      <GridContext.Provider
-        value={{
-          gridColumns,
-          gridGaps,
-          gridGutters,
-          gridUnit,
-          ...gridContextStyleValues,
-        }}
+      <StyledGrid
+        $align={align}
+        $behavior={behavior}
+        $gridGutters={
+          gridGutters != null ? gridGutters : gridStyleValues.$gridGutters
+        }
+        $gridMargins={
+          gridMargins != null ? gridMargins : gridStyleValues.$gridMargins
+        }
+        $gridMaxWidth={
+          gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth
+        }
+        $gridUnit={gridUnit != null ? gridUnit : gridStyleValues.$gridUnit}
+        {...overrideProps}
       >
-        {children}
-      </GridContext.Provider>
-    </StyledGrid>
+        <GridContext.Provider
+          value={{
+            gridColumns,
+            gridGaps,
+            gridGutters,
+            gridUnit,
+            ...gridContextStyleValues,
+          }}
+        >
+          {children}
+        </GridContext.Provider>
+      </StyledGrid>
+    </StyledGridWrapper>
   );
 }
 

package/layout-grid/index.d.ts

@@ -23,6 +23,7 @@ export type Responsive<T> = T | T[];
 
 export interface GridOverrides {
   Grid?: Override<any>;
+  GridWrapper?: Override<any>;
 }
 
 export interface CellOverrides {

package/layout-grid/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCell = exports.StyledGrid = void 0;
+exports.StyledCell = exports.StyledGrid = exports.StyledGridWrapper = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -17,61 +17,80 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-var StyledGrid = (0, _index.styled)('div', function (_ref) {
+var StyledGridWrapper = (0, _index.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
-      _ref$$align = _ref.$align,
-      $align = _ref$$align === void 0 ? null : _ref$$align,
       _ref$$behavior = _ref.$behavior,
       $behavior = _ref$$behavior === void 0 ? _constants.BEHAVIOR.fixed : _ref$$behavior,
-      _ref$$gridGutters = _ref.$gridGutters,
-      $gridGutters = _ref$$gridGutters === void 0 ? $theme.grid.gutters : _ref$$gridGutters,
       _ref$$gridMargins = _ref.$gridMargins,
       $gridMargins = _ref$$gridMargins === void 0 ? $theme.grid.margins : _ref$$gridMargins,
       _ref$$gridMaxWidth = _ref.$gridMaxWidth,
       $gridMaxWidth = _ref$$gridMaxWidth === void 0 ? $theme.grid.maxWidth : _ref$$gridMaxWidth,
       _ref$$gridUnit = _ref.$gridUnit,
       $gridUnit = _ref$$gridUnit === void 0 ? $theme.grid.unit : _ref$$gridUnit;
+  return {
+    margin: 'auto',
+    maxWidth: $behavior === _constants.BEHAVIOR.fixed ? "".concat($gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1).concat($gridUnit) : null
+  };
+});
+exports.StyledGridWrapper = StyledGridWrapper;
+StyledGridWrapper.displayName = "StyledGridWrapper";
+var StyledGrid = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme,
+      _ref2$$align = _ref2.$align,
+      $align = _ref2$$align === void 0 ? null : _ref2$$align,
+      _ref2$$behavior = _ref2.$behavior,
+      $behavior = _ref2$$behavior === void 0 ? _constants.BEHAVIOR.fixed : _ref2$$behavior,
+      _ref2$$gridGutters = _ref2.$gridGutters,
+      $gridGutters = _ref2$$gridGutters === void 0 ? $theme.grid.gutters : _ref2$$gridGutters,
+      _ref2$$gridMargins = _ref2.$gridMargins,
+      $gridMargins = _ref2$$gridMargins === void 0 ? $theme.grid.margins : _ref2$$gridMargins,
+      _ref2$$gridMaxWidth = _ref2.$gridMaxWidth,
+      $gridMaxWidth = _ref2$$gridMaxWidth === void 0 ? $theme.grid.maxWidth : _ref2$$gridMaxWidth,
+      _ref2$$gridUnit = _ref2.$gridUnit,
+      $gridUnit = _ref2$$gridUnit === void 0 ? $theme.grid.unit : _ref2$$gridUnit;
   var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
   var gridStyles = mediaQueries.reduce(function (acc, cur, idx) {
     return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, cur, {
-      paddingLeft: "".concat(getResponsiveNumber($gridMargins, idx) - getResponsiveNumber($gridGutters, idx) / 2 - 0.5).concat($gridUnit),
-      paddingRight: "".concat(getResponsiveNumber($gridMargins, idx) - getResponsiveNumber($gridGutters, idx) / 2 - 0.5).concat($gridUnit),
+      paddingLeft: "".concat(getResponsiveNumber($gridMargins, idx)).concat($gridUnit),
+      paddingRight: "".concat(getResponsiveNumber($gridMargins, idx)).concat($gridUnit),
+      marginLeft: "-".concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit),
+      marginRight: "-".concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit),
       alignItems: getResponsiveValue($align, idx)
     }));
   }, {
-    paddingLeft: "".concat(getResponsiveNumber($gridMargins, 0) - getResponsiveNumber($gridGutters, 0) / 2 - 0.5).concat($gridUnit),
-    paddingRight: "".concat(getResponsiveNumber($gridMargins, 0) - getResponsiveNumber($gridGutters, 0) / 2 - 0.5).concat($gridUnit),
+    paddingLeft: "".concat(getResponsiveNumber($gridMargins, 0)).concat($gridUnit),
+    paddingRight: "".concat(getResponsiveNumber($gridMargins, 0)).concat($gridUnit),
+    marginLeft: "-".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
+    marginRight: "-".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
     alignItems: getResponsiveValue($align, 0)
   });
   return _objectSpread({
     boxSizing: 'border-box',
     display: 'flex',
     flexWrap: 'wrap',
-    marginLeft: 'auto',
-    marginRight: 'auto',
     maxWidth: $behavior === _constants.BEHAVIOR.fixed ? "".concat($gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1).concat($gridUnit) : null
   }, gridStyles);
 });
 exports.StyledGrid = StyledGrid;
 StyledGrid.displayName = "StyledGrid";
-var StyledCell = (0, _index.styled)('div', function (_ref2) {
-  var $theme = _ref2.$theme,
-      _ref2$$align = _ref2.$align,
-      $align = _ref2$$align === void 0 ? null : _ref2$$align,
-      _ref2$$order = _ref2.$order,
-      $order = _ref2$$order === void 0 ? null : _ref2$$order,
-      _ref2$$gridColumns = _ref2.$gridColumns,
-      $gridColumns = _ref2$$gridColumns === void 0 ? $theme.grid.columns : _ref2$$gridColumns,
-      _ref2$$gridGaps = _ref2.$gridGaps,
-      $gridGaps = _ref2$$gridGaps === void 0 ? $theme.grid.gaps : _ref2$$gridGaps,
-      _ref2$$gridGutters = _ref2.$gridGutters,
-      $gridGutters = _ref2$$gridGutters === void 0 ? $theme.grid.gutters : _ref2$$gridGutters,
-      _ref2$$gridUnit = _ref2.$gridUnit,
-      $gridUnit = _ref2$$gridUnit === void 0 ? $theme.grid.unit : _ref2$$gridUnit,
-      _ref2$$skip = _ref2.$skip,
-      $skip = _ref2$$skip === void 0 ? [0, 0, 0] : _ref2$$skip,
-      _ref2$$span = _ref2.$span,
-      $span = _ref2$$span === void 0 ? [1, 1, 1] : _ref2$$span;
+var StyledCell = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$align = _ref3.$align,
+      $align = _ref3$$align === void 0 ? null : _ref3$$align,
+      _ref3$$order = _ref3.$order,
+      $order = _ref3$$order === void 0 ? null : _ref3$$order,
+      _ref3$$gridColumns = _ref3.$gridColumns,
+      $gridColumns = _ref3$$gridColumns === void 0 ? $theme.grid.columns : _ref3$$gridColumns,
+      _ref3$$gridGaps = _ref3.$gridGaps,
+      $gridGaps = _ref3$$gridGaps === void 0 ? $theme.grid.gaps : _ref3$$gridGaps,
+      _ref3$$gridGutters = _ref3.$gridGutters,
+      $gridGutters = _ref3$$gridGutters === void 0 ? $theme.grid.gutters : _ref3$$gridGutters,
+      _ref3$$gridUnit = _ref3.$gridUnit,
+      $gridUnit = _ref3$$gridUnit === void 0 ? $theme.grid.unit : _ref3$$gridUnit,
+      _ref3$$skip = _ref3.$skip,
+      $skip = _ref3$$skip === void 0 ? [0, 0, 0] : _ref3$$skip,
+      _ref3$$span = _ref3.$span,
+      $span = _ref3$$span === void 0 ? [1, 1, 1] : _ref3$$span;
   var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
   var cellStyles = mediaQueries.reduce(function (acc, cur, idx) {
     if (getResponsiveNumber($span, idx) === 0) {
@@ -87,18 +106,17 @@ var StyledCell = (0, _index.styled)('div', function (_ref2) {
 
     return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, cur, {
       display: 'block',
-      width: "".concat(100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx)), "%"),
-      marginLeft: "".concat(100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1), "%"),
-      paddingLeft: "".concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit),
-      paddingRight: "".concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit),
+      width: "calc(".concat(100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx)), "% - ").concat(getResponsiveNumber($gridGutters, idx)).concat($gridUnit, ")"),
+      marginLeft: "calc(".concat(100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1), "% + ").concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit, ")"),
+      marginRight: "".concat(getResponsiveNumber($gridGutters, idx) / 2).concat($gridUnit),
       marginBottom: "".concat(getResponsiveNumber($gridGaps, idx)).concat($gridUnit),
       alignSelf: getResponsiveValue($align, idx),
       order: getResponsiveNumber($order, idx)
     }));
   }, {
     width: '100%',
-    paddingLeft: "".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
-    paddingRight: "".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
+    marginLeft: "".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
+    marginRight: "".concat(getResponsiveNumber($gridGutters, 0) / 2).concat($gridUnit),
     marginBottom: "".concat(getResponsiveNumber($gridGaps, 0)).concat($gridUnit),
     alignSelf: getResponsiveValue($align, 0),
     order: getResponsiveNumber($order, 0)

package/layout-grid/styled-components.js.flow

@@ -9,7 +9,31 @@ LICENSE file in the root directory of this source tree.
 import {styled} from '../styles/index.js';
 import {getMediaQueries} from '../helpers/responsive-helpers.js';
 import {BEHAVIOR} from './constants.js';
-import type {ResponsiveT, StyledGridPropsT, StyledCellPropsT} from './types.js';
+import type {
+  ResponsiveT,
+  StyledGridPropsT,
+  StyledGridWrapperPropsT,
+  StyledCellPropsT,
+} from './types.js';
+
+export const StyledGridWrapper = styled<StyledGridWrapperPropsT>(
+  'div',
+  ({
+    $theme,
+    $behavior = BEHAVIOR.fixed,
+    $gridMargins = $theme.grid.margins,
+    $gridMaxWidth = $theme.grid.maxWidth,
+    $gridUnit = $theme.grid.unit,
+  }) => ({
+    margin: 'auto',
+    maxWidth:
+      $behavior === BEHAVIOR.fixed
+        ? `${$gridMaxWidth +
+            2 * getResponsiveNumber($gridMargins, Infinity) -
+            1}${$gridUnit}`
+        : null,
+  }),
+);
 
 export const StyledGrid = styled<StyledGridPropsT>(
   'div',
@@ -28,23 +52,27 @@ export const StyledGrid = styled<StyledGridPropsT>(
         return {
           ...acc,
           [cur]: {
-            paddingLeft: `${getResponsiveNumber($gridMargins, idx) -
-              getResponsiveNumber($gridGutters, idx) / 2 -
-              0.5}${$gridUnit}`,
-            paddingRight: `${getResponsiveNumber($gridMargins, idx) -
-              getResponsiveNumber($gridGutters, idx) / 2 -
-              0.5}${$gridUnit}`,
+            paddingLeft: `${getResponsiveNumber(
+              $gridMargins,
+              idx,
+            )}${$gridUnit}`,
+            paddingRight: `${getResponsiveNumber(
+              $gridMargins,
+              idx,
+            )}${$gridUnit}`,
+            marginLeft: `-${getResponsiveNumber($gridGutters, idx) /
+              2}${$gridUnit}`,
+            marginRight: `-${getResponsiveNumber($gridGutters, idx) /
+              2}${$gridUnit}`,
             alignItems: getResponsiveValue($align, idx),
           },
         };
       },
       {
-        paddingLeft: `${getResponsiveNumber($gridMargins, 0) -
-          getResponsiveNumber($gridGutters, 0) / 2 -
-          0.5}${$gridUnit}`,
-        paddingRight: `${getResponsiveNumber($gridMargins, 0) -
-          getResponsiveNumber($gridGutters, 0) / 2 -
-          0.5}${$gridUnit}`,
+        paddingLeft: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
+        paddingRight: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
+        marginLeft: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+        marginRight: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
         alignItems: getResponsiveValue($align, 0),
       },
     );
@@ -52,8 +80,6 @@ export const StyledGrid = styled<StyledGridPropsT>(
       boxSizing: 'border-box',
       display: 'flex',
       flexWrap: 'wrap',
-      marginLeft: 'auto',
-      marginRight: 'auto',
       maxWidth:
         $behavior === BEHAVIOR.fixed
           ? `${$gridMaxWidth +
@@ -98,19 +124,17 @@ export const StyledCell = styled<StyledCellPropsT>(
           ...acc,
           [cur]: {
             display: 'block',
-            width: `${(100 / getResponsiveNumber($gridColumns, idx)) *
+            width: `calc(${(100 / getResponsiveNumber($gridColumns, idx)) *
               Math.min(
                 getResponsiveNumber($span, idx),
                 getResponsiveNumber($gridColumns, idx),
-              )}%`,
-            marginLeft: `${(100 / getResponsiveNumber($gridColumns, idx)) *
+              )}% - ${getResponsiveNumber($gridGutters, idx)}${$gridUnit})`,
+            marginLeft: `calc(${(100 / getResponsiveNumber($gridColumns, idx)) *
               Math.min(
                 getResponsiveNumber($skip, idx),
                 getResponsiveNumber($gridColumns, idx) - 1,
-              )}%`,
-            paddingLeft: `${getResponsiveNumber($gridGutters, idx) /
-              2}${$gridUnit}`,
-            paddingRight: `${getResponsiveNumber($gridGutters, idx) /
+              )}% + ${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit})`,
+            marginRight: `${getResponsiveNumber($gridGutters, idx) /
               2}${$gridUnit}`,
             marginBottom: `${getResponsiveNumber($gridGaps, idx)}${$gridUnit}`,
             alignSelf: getResponsiveValue($align, idx),
@@ -120,8 +144,8 @@ export const StyledCell = styled<StyledCellPropsT>(
       },
       {
         width: '100%',
-        paddingLeft: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
-        paddingRight: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+        marginLeft: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
+        marginRight: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
         marginBottom: `${getResponsiveNumber($gridGaps, 0)}${$gridUnit}`,
         alignSelf: getResponsiveValue($align, 0),
         order: getResponsiveNumber($order, 0),

package/layout-grid/types.js.flow

@@ -67,9 +67,21 @@ export type GridPropsT = {
   /** Overrides for your grid. */
   overrides?: {
     Grid?: OverrideT,
+    GridWrapper?: OverrideT,
   },
 };
 
+export type StyledGridWrapperPropsT = {
+  /** Grid container behavior beyond max width. Fluid will continue to expand. Fixed will limit grid container to max width and center the container horizontally within parent element. */
+  $behavior?: BehaviorT,
+  /** Gap on either side of grid container at each breakpoint. */
+  $gridMargins?: ResponsiveT<number>,
+  /** Maximum width of the grid container. Does not include Margins. Only applies when `behavior` is `fluid`. */
+  $gridMaxWidth?: number,
+  /** Modify the CSS length unit used to measure columns and rows. Defaults to theme value. */
+  $gridUnit?: CSSLengthUnitT,
+};
+
 export type StyledGridPropsT = {
   /** Control vertical alignment of cells at each breakpoint. */
   $align?: ResponsiveT<AlignmentT>,

package/list/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   ListItem: true,
   ListItemLabel: true,
+  ListHeading: true,
   MenuAdapter: true,
   ARTWORK_SIZES: true,
   SHAPE: true
@@ -22,6 +23,12 @@ Object.defineProperty(exports, "ListItemLabel", {
     return _listItemLabel.default;
   }
 });
+Object.defineProperty(exports, "ListHeading", {
+  enumerable: true,
+  get: function get() {
+    return _listHeading.default;
+  }
+});
 Object.defineProperty(exports, "MenuAdapter", {
   enumerable: true,
   get: function get() {
@@ -45,6 +52,8 @@ var _listItem = _interopRequireDefault(require("./list-item.js"));
 
 var _listItemLabel = _interopRequireDefault(require("./list-item-label.js"));
 
+var _listHeading = _interopRequireDefault(require("./list-heading.js"));
+
 var _menuAdapter = _interopRequireDefault(require("./menu-adapter.js"));
 
 var _constants = require("./constants.js");

package/list/index.js.flow

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 export {default as ListItem} from './list-item.js';
 export {default as ListItemLabel} from './list-item-label.js';
+export {default as ListHeading} from './list-heading.js';
 export {default as MenuAdapter} from './menu-adapter.js';
 
 export {ARTWORK_SIZES, SHAPE} from './constants.js';